By the end of this exercise you will build a full stack application with a client, server, and database.
** NOTE ** Do not copy and paste. This project is about solidifying concepts and finding gaps in your knowledge. It is OK to look back at previous work, however, you should understand what every line does and be able to write from scratch.
- Pick a resource
- What would you like to CRUD?
- This should be a simple resource for a single table with no relations
- Must include multiple data types
- Examples
- Posts for a blog/forum
- Todo list
- Watched Movie Tracker
- Book List/Tracker
- Events
- Address Book
- Call Log
- Beer Tasting Tracker
- Refrigerator/Pantry Inventory
- Homework/Assignment Tracker
- Store Inventory
- Plan out web client
- Think of the User Interface to CRUD the resource
- Read the tasks below and design wireframes and user stories to help you
- Diagram an ERD
- Should contain a primary key ID
- Should have at least 4 columns
- At least 1 numeric column
- At least 1 column should have a non-nullable constraint
- Resource table should be seeded with at least 5 rows.
- The seed file should reset the id sequence and insert rows with pre-defined ids.
- Generate Express server
- Create a GET route to
/resourcename
- Create query to GET all records
- Serve all records as JSON
- Should contain semantic HTML, CSS, and JS
- Use AJAX to request all resources
- Display all resources
- Require CORS module
- Implement middleware
- App client is running on a static web hosting service
- App with a database is running on heroku
- Database connection string is provided via environment variable / works both locally and on Heroku
- No API keys / auth tokens are committed to git / pushed to Github
- Properly display client, server, and db communication
- Includes 3 key parts of the Requests and Responses
- Create a GET route to
/resourcename/:id
- Create query to GET a single record
- Serves record as JSON
- Deploy
- Use AJAX to request resource
- Display single resource
- Deploy
- Create a POST route to
/resourcename
- Include body parser middleware
- Extract data from requests using body params
- Create query to POST a single record
- Responds with the resource
id
- Deploy
- Use AJAX to create resource
- Display newly created resource
- Deploy
- Create a PUT route to
/resourcename/:id
- Extract data from requests using body params
- Create query to PUT a record
- Responds with newly edited record
- Deploy
- Use AJAX to update a resource
- Display newly updated resource
- Deploy
- Create a DELETE route to
/resourcename/:id
- Create query to DELETE a record
- Responds with success message
- Deploy
- Use AJAX to delete a resource
- Remove deleted resource
- Deploy
- Checks the request body for missing or invalid information before submitting
- Responds with error if the information is invalid
- User is unable to submit empty forms or invalid information
- Handles validation errors from the server by display a message to the user
- Use handlebars
- Implement tests for server routes
- Add a user relationship for the resource
- Create a sign up page for user
- Replace some routes with server side rendering
- Add search/filter functionality