mini-apps-grocery-list-build-burn.md

Mini Apps Review - Grocery List Build/Burn

Here are modified objectives and resources for re-building the grocery list project.

Objectives

• 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
• 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

Stretch Goals

• 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

Resources

• Front-End
  • webpack
  • npm | build amazing things
  • Components and Props – React
  • State and Lifecycle – React
    • State and Lifecycle – Using State Correctly\
  • Forms – React
    • Uncontrolled Components – React
  • Lifting State Up – React
  • React.Component – React
    • React.Component – constructor()
    • React.Component - componentDidMount()
    • React.Component - setState()
  • Thinking in React – React
• Back-End
  • Serving static files in Express
    • Express 4.x - API Reference: express.static()
  • Using Express middleware
    • Express 4.x - API Reference: express.json()
  • Additional Express Documentation:
    • Express 4.x - API Reference: req.body()
    • Express 4.x - API Reference: res.status()
    • Express 4.x - API Reference: res.json()
    • Express 4.x - API Reference: res.send()
  • SQL Query Practice (Highly Recommended):
    • SQLZOO (highly recommended SQL query practice)
  • mysql - npm
    • mysql - npm: Establishing Connections
    • mysql - npm: Performing Queries
    • mysql - npm: Escaping Query Values