This app allows the user to search for food or drink recipes, share them, add them to the favorites list and, most importantly, cook/prepare recipes. Each recipe page includes a list of all the necessary ingredients, a video tutorial, and the recipe itself.
Check it out! (recommended resolution: 360x640)
This was a group project developed while studying Front-end web development @betrybe. This was the final project for the Front-end certificate. The group got an approval of 100% on this project's requirements.
By using agile methodologies, mainly SCRUM and kanban, the group got into a very good workflow and we were able to finish the project three days before the deadline. This allowed us to focus on the app design and also refactor our code. Together, we prototyped the app with Figma and then went on to styling the app with pure CSS.
This application uses theMealDB and theCocktailDB APIs.
All the files we worked on are in the /src folder.
Important: the app was developed in a resolution of 360x640. It may not be compatible with different sizes.
The team: @DanubioRafa, @edmcorrea, @ataidemarcelo and @felupee
- Develop the searchbar
- Implement the favorite and share buttons
- Code the "recipe in progress" page
- Create the custom Hook useGetRecipeForDetails
- Write tests
- Add CSS, mainly on the recipe details, recipe in progress and profile pages
- React
- React Redux
- React Router
- React Hooks
- React Testing Library
- CSS
- Install the dependencies with
npm install(requires node on version 16) - Run the app with
npm start - Run the tests we made with
npm testornpm test <test name> - Run the project's requirements tests with
npm run cyornpm run cy:open(might not show 100% approval as we made changes after finishing it) - For test coverage, run
npm run test-coverage