326Project - Milestone 2

Project Structure: All of the code for milestone 2 is located in the client folder, which can be found within the src folder in the root directory. Within the client folder are the index.html, styles.css, script.js, and foodList.js files. The html file contains all the page contents, for each area of the site. The css file contains all the styling for each area and the script.js file contains all the functionality for different areas of the site. Lastly, the foodList.js file just contains an array of the most commonly used ingredients so that users can only add ingredient names that are properly formatted for future api calls.

Setup Instructions: To run the project, run "npm install" to install dependencies and then "npm run milestone-03". This will concurrently run the frontend and backend and automatically open the webpage in your browser.

NOTE Our backend server is running on port 5000. If you are using a macbook to run the server, your airplay might be running on port 5000, causing a port already in use error when trying to run the project. To fix this, go into Settings --> General --> AirDrop & Handoff --> turn off AirPlay Receiver. This will free up port 5000, allowing the backend to run.

Use Instructions: The Navigation Bar at the top of the screen allows users to access the different areas of the page without unnecessary page reloads. This nav bar will consistently be at the top of the screen, ensuring users will always be able to access the different areas of the site whenever they want.

The Homepage is where users will first be redircted to when accessing the site. Here, users can see our product name and vision, while getting some quick background information on our development team.

The Pantry page is where users can add, modify, and delete items from their pantry. By clicking on the info button, users can get help using the page while getting key information about the color coding system used. Clicking on the + button allows users to add items to their pantry (stored in the db in the server) with an expiration date that is used for our color coding system. By clicking on any existing items in the pantry, users can modify or delete an item from their existing pantry.

The Discover Recipes page is where users can find recipes depending the items that that have in stock in their pantry. Here, users select which specific items from their pantry they would like to use in their recipe search as well any additional filters they would like to set, such as maximum time to cook. Once clicking on the search button, users will be brought to a list of recipes (up to 5) fitting their search criteria, each of which link to the full recipe so that users can follow it. The search uses Spoonaculuar's API to identify recipes that contain the designated ingredients (as well as fitting any other designated filters) and displays the image and recipe link. In the event that no recipe is found by Spoonacular, the user will be notified that no recipe was found and will be asked to try with different search parameters.

The Local Food Banks page is where users can view food banks within a 5km radius on their current location. When first accessing the site, users will be prompted to share their location. Once enabled, this page will display a map that pinpoints all local food banks. When clicking on any given one, users will be provided with the name and address of the food bank.

The Food Waste Resources page is our final page, providing users with some basic tips and advice on preventing food waste in their own lives. It also links to external resouces which expand on the topic and give users even more helpful information when it comes to limiting food waste. We hope that this page enlightens users about the issue gives quick tips that can quickly and easily be implemented in their own day to day life to help fight the battle against food waste.