Full Stack Application Pair Project

Snack-a-log

Create an app that allows users to log their favorite snacks. Add functionality that allows users to see whether or not their snack is healthy based on a simple algorithm.

For this project there are 40 features or functionality to build. To pass this project a minimum of 28 features must be built.

Overview

• Using a mono-repo template repository, create a full-stack web application
• Use express to build a full CRUD back-end application that adheres to RESTful routes
• Use create-react-app to build a full CRUD front-end application that interacts with the back-end
• Use unit tests to guide the building process
• Deploy the applications online, so anyone can see them online

User Stories, Acceptance Criteria and Code Quality Rubric

Back-end

1. Basic root route that returns a string
2. Snacks resource
   1. Get one (with correct id)
   2. Get one (non-matching id, sends 404)
   3. Delete (with valid id)
   4. Delete (handles invalid id)
   5. Get all snacks
   6. Create a snack with all fields completed
   7. Create a snack and set a default image, if no image is provided
   8. Correctly capitalize snack name - for snack names with 2 or more letters
   9. Correctly capitalize snack name with multiple words
   10. Correctly fix capitalization, regardless if input is lowercase or uppercase
3. Snack Health Check logic
   1. Checks if snack has enough fiber
   2. Checks if snack has enough protein
   3. Checks if snack has enough fiber and protein
   4. Checks if snack has enough fiber but too much sugar
   5. Checks if snack has enough protein but too much sugar
   6. Checks if snack has enough fiber and protein, but too much sugar
   7. Checks if snack has not enough protein, nor fiber and has too much sugar
   8. Checks if snack has invalid or missing information

Total: 21 tests

Front-end

1. Index page
   1. Can load index page and has navigation to the New page
   2. Has a list of snack cards that are coming from the back-end seed data
   3. Has a link to each snack's show page
   4. Has a solid heart, if the snack is healthy
   5. Has a heart outline, if the snack is unhealthy
   6. Has the CSS that is detailed in the tests
2. Show page
   1. Shows header text
   2. Can navigate to New page
   3. Snack has correct information displayed
   4. Contains action/navigation buttons
3. New page
   1. Shows the header text
   2. Has a form with the correct labels and fields
   3. Can create a snack and then redirects back to the index page
4. Edit page
   1. Has a form with the correct labels and fields
   2. Data is pre-filled into the form
   3. Can update a snack and then redirects back to the index page
5. Delete button
   1. Can delete a snack using the app

Total: 17 tests

Additional points:

Back-end hosted and accessible online: 1 point Front-end hosted and accessible online: 1 point

Grand total: 40 points

Getting Started

1. Fork and clone this repository.

Back-end setup

It is recommended that you open a new terminal tab that will be dedicated to running and developing your back-end

• cd back-end
• touch .env

.env

PORT=3333
PG_HOST=localhost
PG_PORT=5432
PG_DATABASE=snack_a_log

• npm install - install npm packages listed in package.json
• npm run db:init - initialize a new database and create tables
• npm run db:seed - seed the table(s) with some data
• nodemon - confirm that this is running on port 3333
• Visit http://localhost:3333/snacks/ and make sure you see some snack data in the form of an array of objects
• npm run test - to run the back-end tests

Front-end setup

It is recommended that you open a new terminal tab that will be dedicated to running and developing your front-end

• cd front-end
• touch .env

.env

REACT_APP_API_URL=http://localhost:3333

• npm install - install npm packages listed in package.json
• npm start - make sure your React app can start

Keep the React app running, open a new tab and run

• npm test - to open Cypress and run front-end tests

Screenshots

Index page

Show page

New page

Edit page

Resources

This project uses this template - you can follow the readme to set up deployment.