Turing's Mod 2 "What's Cookin" group project continued to build on on class-to-class interaction, Test-Driven Development, and the freshly taught ES6 syntax and iterator methods, while introducing new technologies like webpack and and GET network requests. The spec asked us to start with some very real-world steps such as creating a project board with wireframes, laying out our goals, detailing the steps of how we'd achieve those, and truly thinking big picture. Over the course of 10 days, our group of three developers designed a site that pulled its data using Fetch API, and allows the user to filter through a database of recipes, store their favorites or upcoming meals-to-cook, and select recipes to their specific details such as instructions and total cost.
On page load, the user will be able to scroll through a database of potential recipes.
If the user would like to learn more about the recipe, such as instructions for cooking it or the total cost of all the ingredients involved, simply click on a small card to see a larger display.
If the user sees a recipe they like, they may favorite that recipe by clicking the heart. A filled in heart indicates the recipe has been favorited.
If the user decides they no longer love the recipe, they can "un-heart" it and they will no longer see the recipe in their fav view. The recipe can also be removed from the faved view.
If the user sees a recipe they'd like to cook for later, they may store it by clicking the plus. If they want to view their meals stored to cook later, they may click the "Meal Plan" button on the right of the screen. If they cook that meal or decide they don't want it after all, simply click the red X.
The user may select the Filter Button to display all the available tags to filter the recipes by. The filtering is set to be more inclusive, so any checkbox that is displayed will show recipes that include that particular tag. They may work back towards the whole database by unchecking boxes OR reclicking the Filter button that now says "Clear Filters".
The user may also use the search bar to filter through all potential recipes by ingredient name. In the example above, the user filters by eggs, then eggs AND salt, then eggs AND salt AND chicken to finally display one single recipe requring all 3 pieces.
The filtering tags will also work within the user's favorited recipes section, as does the search by Recipe Name or ingredients in the search bar.
As of January 2022, the user now has a "Pantry", in which they can keep track of the ingredients they have at home, adding and removing them, either with simple incrementer buttons or with a custom "add ingredient" section.
The new pantry function also allows a user to check if they have the ingredients necessary to create a meal. After clicking on a recipe, while in the single recipe display, they have the option of pressing a button to determine if they have the necessary ingredients. If not, the list of ingredients will update with a list of ingredients they still require.
If the user has the necessary ingredients, the ingredients will be replaced with a message informing them as such. They will also have the option of selecting "Cook this Meal", which will consider the meal "cooked", and remove the requisite ingredients from their pantry.
- Provide a better UX by updating the UI
-
fork the repository
-
copy the SSH clone address
-
run
git clone [remote-address]in your repo -
run
npm installin your terminal -
run
npm startin the Terminal visit localhost:8080 -
now fork and clone the APIs that the site will be drawing it's data and Pantry functonality from: (https://github.com/Daniel-OC/whats-cookin-api)
-
run
npm installin your terminal -
run
npm startin the Terminal
- Daniel O'Connell = LinkedIn || GitHub
- Ethan Tweittman = LinkedIn || GitHub
- Alex Fritz = LinkedIn || GitHub
- Hannah Hudson (Project Manager) = LinkedIn || GitHub
- Turing School of Software & Design