Here are modified objectives and resources for re-building the grocery list project.
- Get situated with project in general
- Diagram React component hierarchy
- Identify where state should live and what props should be passed
- Create a basic React client
- index.js that renders an App component into the DOM
- Create basic express server
- Serve front-end
- Use middleware
- Create a MySQL database
- Practice creating ERDs (Entity Relationship Diagrams)
- Practice writing schema
- Practice writing seed data
- Establish connection from server to DB
- Implement GET all groceries functionality
- Create GET route in express server
- Communicate with DB to get all items in the table
- Test with Postman
- Fetch data in App component
- Load into state of application
- Create additional react components to dynamically render groceries
- Pass groceries data from state as props
- Create GET route in express server
- Implement POST new grocery item functionality
- Create POST route in express server
- Communicate with DB to insert new item into the table
- Test with Postman
- Create form react component
- Properly control inputs in form component
- On submission of form, send POST request to server
- Update state of application when POST succeeds
- Create POST route in express server
- Allow user to mark individual items as complete and remove them from the list
- DELETE route
- Update state after successful removal
- Allow user to edit the name/quantity of individual items
- PUT route
- Update state after successful edit
- Refactor server code to be more modular
- Routes
- Models
- Controllers
- Update back-end to support adding categories to items
- Update front-end to display categories
- Update front-end to choose category in form
- Front-End
- Back-End
- Serving static files in Express
- Using Express middleware
- Additional Express Documentation:
- SQL Query Practice (Highly Recommended):
- mysql - npm