Mini Project #4: Python on Django with React

Overview

You will build a Django & React App for one more repetition to solidify this unit and prepare you for your final project.

Keep the scope of this small and polish it well! You'll only have a week to work on it, and you may be busy with Outcomes and job search work.

Django backend: Serve a JSON API with all CRUD operations available across your models. The Django API must be deployed online via Heroku.
- Must have at least one model with full CRUD
React frontend: Serve a React frontend that consumes your Django API. The React frontend must be deployed online via Heroku or (more likely) Vercel, Netlify, or GitHub Pages.
- Tip if you're using Heroku: Be sure to configure it to serve up the react static site or use the mars/create-react-app buildpack to do it automatically.
- To use the create-react-app buildpack on Heroku, use this command line when creating your app from the terminal: heroku create yourappname --buildpack mars/create-react-app where yourappname is the name you want for your app/url.
Two git repositories hosted on Github, with a link to the relevant live sites, and frequent commits dating back to the very beginning of the project. Commit early, commit often!
At least one Github commit per day.
A README.md file with explanations of the technologies used, the approach was taken, unsolved problems, and notes to yourself/group members so you can come back to your project later and be able to pick up your train of thought, etc. As well as a link to your hosted working app

Github Repos, and Deployed Urls must be submitted by the presentation due date

Configure CORS in your rails API so that only your frontend app can access your API
Use Sass
Include two or more models (additional models do not require full CRUD)
Include either a one-to-many or a many-to-many relationship (full CRUD not required)
Use a third party API with a gem
Add graphs or visuals on your data with Chart.js or D3.js
Include portfolio-quality styling
Use a CSS framework like skeleton or bootstrap
Include User Stories
Include wireframes that you designed during the planning process (uploaded to your github repo)
Authentication
Implement React Router

We will do quick approval meetings in the first half of class on project week kickoff

Video, Github Repos, and Deployed Urls must be submitted by the presentation due date

List of ways to get started

Wireframe Make a drawing of what your app will look like on each page of your application (what does it look like as soon as you log on to the site? What does it look like once a user logs in, etc.).

Break the project down into different components (data, presentation, views, style, DOM manipulation) and brainstorm each component individually.

Use your Development Tools (console.log, inspector, alert statements, etc) to debug and solve problems

Work through the lessons in class for help and inspiration! Think about adding relevant code to your application each day - you are given a week so that you can work on it in small chunks, so COMMIT OFTEN. We will be looking at your commit dates and comments are part of your scoring.

Commit early, commit often. Don’t be afraid to break something because you can always go back in time to a previous version.

Consult documentation resources (MDN, jQuery, etc.) at home to better understand what you’ll be getting into.

Don’t be afraid to write code that you know you will have to remove later. Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then.