https://github.com/Logandv3/whats-cookin
https://logandv3.github.io/whats-cookin/
- Code: HTML, CSS, JavaScript
- TDD: Mocha, Chai
- Compiler: Webpack
- Accessibility: Lighthouse & Wave
- Linter: aslant
- Debugging: Chrome Dev Tools
- Version Control/Management: Git/Github/Github Projects
- Fork this web app to your own Github account
- Clone the repository to your local machine
cd
into the file- run
npm install
. - Run
npm start
and visitlocalhost:8080
In this project, we create a recipe tracking / meal planning application that allows users to view their favorite recipes and plan shopping trips around them. Users should view a list of recipes, favorite their own recipes, and choose recipes to cook. Users also have a Pantry tab where they can manage, view and add ingredients that they have on hand.
- Implement ES6 classes that communicate to each other as needed
- Use object and array prototype methods to perform data manipulation
- Create a user interface that is easy to use and clearly displays information.
- Write modular, reusable code that follows SRP (Single Responsibility Principle)
- Implement a robust testing suite using TDD
- Make network requests to retrieve data
- A user will be displayed on page load.
- All recipes will be displayed. The user can search through the recipes in the search bar by name/ ingredient or select a tag, then submit.
- When a recipe is selected on the main page that same recipe will become larger and reveal information about the recipe including instructions.
- On each individual recipe card the user will see options to add/ remove recipes from their favorites(star) list or list of recipes they want to cook(checkbox).
- The user can see the recipes they have added to their Favorites or Cooking list by clicking the
Favorite Recipes
andWhat to Cook
buttons. - To return to the main page where all recipes are displayed they can click the
All Recipes
button. - The user can filter their favorite recipes by name/ ingredient or tags when looking at their favorite recipe list.
- The user can see the ingredients they have added to their Pantry.
- Users can add additional ingredients or add to the amount of an ingredient that already exists in the pantry by using the form.
We managed to attack most of the project requirements.
Successfully using the Fetch API (GET & POST)
Figuring out the logic to add and remove ingredients from the pantry.
Debugging the dropdown menu functionality
This project introduced us to Fetch API and webpack which took a bit to get used to and figure out.
We tested our classes and set up our code by working with data files, then hooked them up to the API at the end.
We also found that the data we needed to access for one task was often spread out across multiple files so we had to figure out how to either search both or pull it into one place to access later. We favored pulling it to one place to reference. Some of the data was also broken and caused some errors we had to get around.
We didn't get to refactor our CSS to SCSS.
Organization was a challenge.
We learned a lot about data structures and accessing them. We found unique ways to pull data from one place and insert it another even when it wasn't set up in an ideal way.
We learned about getting data from the API and how it might be structured and how we needed to access it.
We plan to have persisting data that allows multiple users(possibly a login) to be able to store their favorites and what they have planned to cook.
We would also like to take into account what ingredients the user has and evaluate which recipes they may be able to cook and how much it would cost.
When users click "Cook This Now", pantry ingredients should be used and their amounts should be decreased according to what was needed to make the recipe.