Kitchen Assist

The purpose of this project is for me to practice integrating a 3rd party API into a React app, and to learn as many different pieces of React as I can. API: Edamam

I switched from spoonacular API to Edamam, because Edamam only limited my free account by the number of requests per minute (about 100 requests/min). With Spoonacular, the number of requests was limited to about 150 requests/day. I also liked that with Edamam I could get the title, image, ingredients, and nutrition information all in one call. With Spoonacular, if you want to search all recipes, you connect to one endpoint, and if you want to get the ingredients and instructions, you need to connect to another endpoint. The latter needing the ID found from the first endpoint. Since this is only for my own use and practice, I went with Edamam, even though it did not directly give the recipe instructions (it gives a URL to the instructions).

Below is a list of some things I would like to add in the app.

TODO

Grocery List

1. Search Groceries
2. Add, Delete, Mark Done Groceries
3. Add, Delete Multiple Lists
4. Filter Groceries/Lists

Recipe Book

1. Search Recipes
2. Add, Delete Recipes
3. Add, Delete Multiple Books
4. Filter Recipes/Books
5. Overview Recipe: Name, Image, Servings and Calories of Recipe
6. Click on Recipe: Name, Image, Servings, Calories, Ingredients, and Steps(Link)

References

1. I used some ideas from TylerPottsDev's awesome card-flip. Learned about perspective, preserve-3d, and backface-visibility from this!

2. For transitions I recommend looking at cubic-bezier!. It is fun to test out different animations and tailor it exactly how you want.