🧑‍🍳 Flavor Haven 👩‍🍳

Abstract:

• Flavor Haven is a recipe look-up application that is designed to help users discover a wide variety of recipes from within a data set. Users can explore recipes based on name, ingredients or view all recipies. Flavor Haven has the option to save the recipes a user likes for later use, where they may also be filtered by the previously mentioned options! Flavor Haven also offers the total price of the recipe based on the amount of ingrediets needed to make it, as well as the instructions to cook the recipe. Flavor Haven aims to make meal planning and cooking enjoyable and accessible for everyone.

Installation Instructions:

1. Select fork.
2. Decide where you want to clone this repo in YOUR terminal.
3. Select the Code button and copy the SSH provided.
4. YOUR terminal command should look like the line below.
5. git clone [email protected]:robert-phillips33/flavorHaven.git
6. Move into the directory using cd [dir_name].
7. Run npm install or npm i to install dependencies.

To Run

1. Run npm start in terminal to see the HTML file
2. copy http://localhost:8080 from the terminal and paste it in your browser
3. To stop running the local server, use control + c in the terminal

To Test

• In the terminal run npm test

Preview of App:

Context:

• At Turing School of Software and Design, during the first week of Mod 2, we were assigned to create a recipe website. Our responsibilities included developing the website's functionality by writing tests based on user, recipe, and ingredient criteria. During the testing phase, we created functions to filter recipes by name, tag, and ingredient, as well as to calculate the total cost of ingredients and return instructions for a given recipe.

• In the user phase of the assignment, we implemented features that allowed users to filter recipes by tag, name, and ingredient. Users could also add or remove recipes from their saved recipes section and search for saved recipes by name or tag.

• In the final phase of the project, we transitioned from using a hardcoded data file to using a fetch call to receive data. After researching Promise.all(), we successfully gathered data by fetching it with this static method. From there, we were also able to use POST for the first time in order to ensure our users saved recipe section would persist on reload!

Contributors:

Ryan
Charles
Robert
Zelalem

Learning Goals:

• Utilize object and array prototype methods for effective data manipulation.

• Create a user friendly interface that clearly presents information.

• Develop a comprehensive testing suite using Test-Driven Development (TDD)

• Perform network requests to fetch and post data.

Wins + Challenges 🏆:

• Wins

  • We communicated effectively early on to set a side a schedule to work on this project.
  • We discussed ideas and other perspectives before moving on to the next task.
  • We learned how to create a table in our HTML file as a team.

• Challenges

  • We had a problem importing images early on the project. We thought it would be adding the image in a file and writing the path in the source in the HTML file. But we learned we had to import it in the script JS file to display the image on the page.
  • Navigating the use of network requests was challenging as it was our first experience working with them. With a good bit of trial and error, we were able to get our network requests working and had a solid few learning moments along the way.

Part 2 Specific

• In the second part of the project, we fetched our API data from a local server. We cloned the local server and ran it in a separate terminal tab while running our recipe page. We used a POST request to save users favorite recipes to the local API. This ensured the users favorite recipes are visible even after refreshing the page.

• To address accessibility, we used tools like Lighthouse and WAVE to test and improve accessibility. The tools gave us feedbacks on what needs to be fixed based on a missing label or having improper color scheme.