Build a RESTful, full stack CRUD application.

full-stack-app.md

Full Stack Application

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.

Tasks

0. Plan

• 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

1. List all resources

1.1 Create a Table

• 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

1.2 Seed the DB

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

1.3 Create GET Route

• Generate Express server
• Create a GET route to /resourcename
• Create query to GET all records
• Serve all records as JSON

1.4 Create Web Client

• Should contain semantic HTML, CSS, and JS
• Use AJAX to request all resources
• Display all resources

2. CORS

2.1 Add CORS headers

• Require CORS module
• Implement middleware

3. Deploy

3.1 Deploy web client

• App client is running on a static web hosting service

3.2 Deploy a database-driven application to Heroku

• 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

4. Web sequence diagram

4.1 Display HTTP Request flow

• Properly display client, server, and db communication
• Includes 3 key parts of the Requests and Responses

5. Read

5.1 Create GET Route

• Create a GET route to /resourcename/:id
• Create query to GET a single record
• Serves record as JSON
• Deploy

5.2 Create client page

• Use AJAX to request resource
• Display single resource
• Deploy

6. Create

6.1 Create POST Route

• 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

6.2 Create client page

• Use AJAX to create resource
• Display newly created resource
• Deploy

7. Update

7.1 Create PUT Route

• 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

6.2 Create client page

• Use AJAX to update a resource
• Display newly updated resource
• Deploy

7. Delete

7.1 Create DELETE Route

• Create a DELETE route to /resourcename/:id
• Create query to DELETE a record
• Responds with success message
• Deploy

7.2 Create client page

• Use AJAX to delete a resource
• Remove deleted resource
• Deploy

8. Validate

8.2 Implement server-side validation

• Checks the request body for missing or invalid information before submitting
• Responds with error if the information is invalid

8.1 Implement client-side validation

• User is unable to submit empty forms or invalid information
• Handles validation errors from the server by display a message to the user

9. Stretch

• 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