Meal Planner App 🍽️

Try it here!

User Features

Homepage

• 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.

Search Results

• Options to display in list or tile mode
• 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.
  • As the API does not contain recipe method, a link is given to direct users to the original source.

Member's Only Access

• 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 will be redirected to log in or sign up.

My Recipes Page

• Shows all of the logged in user's saved recipes.
• Users can add recipes to meal plan from this page too.

My Meal Plans Page

• 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.

Profile Page

• 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.

Planning

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.

Tech Stack

• React
• Firebase/ Firestore
• React-Bootstrap
• npm

Libraries Used

• react-router-dom
• react-beautiful-dnd
• uuid
• react-icons

Future Features to add

• Options to pick more than one filter on the search page