To demo, sign up or use the test account below:
- Email: [email protected]
- PW: testing
- Users can search for recipes from the home page. Filters can also be selected to specify diet exclusions, cuisine and meal type.
- Popular recipes section highlights popular search results.
- Random recipes section highlights random recipes from a number of popular search results.
- Options to display as tile or list
- A maximum of 100 recipes are displayed at a time with 12 results per page using paginations due to the database size of the 3rd part API used, Edamam which contains 2.3 million recipes.
- Users can then click on the recipe to show recipe details.
- Users can cross out ingredients off the list
- As the API does not contain recipe method, a link is given to direct users to the original source which opens in a new tab.
- In order to access the "My Recipes" and "My Meal Plan" page users must sign up or log in.
- If users try clicking on the "Add to My Recipes" button on search results or recipes details page, they alerted to log in or sign up.
- Shows all of the logged in user's saved recipes.
- Users can add recipes to meal plan from this page too.
- Shows all of the logged in user's saved meal plans.
- Users can click on an individual meal plan to show the details of the meal plan.
- The meal plan details page shows a planner with a column for each day of the week starting from Monday.
- When recipes are added to the meal plan from either the search results page, recipe details page or "My Recipes" page it is put by default into the Monday column.
- Users can drag and drop recipes in the columns and across to different days.
- After signing up, the user will be taken to their profile page. The username is default to the username of their email.
- Profile photo and username can be changed on this page.
The vision was to create a full-stack app where users can search for recipes, save them and then create a meal planner for the week.
For this we would require using a 3rd party JSON API (Edamam) to fetch recipes, create a database to store users, recipes and meal plans and implement drag and drop to our meal planner board so that uses can move recipes around.
We created a wireframe to draw out our plans.
We used Trello, Whimsical, Slack and Zoom as collaboration tools to ensure effective communication across the team.
- React
- Firebase/ Firestore
- React-Bootstrap
- npm
- Options to pick more than one filter on the search page