Plantasty React app was created by Alina Savin, Maryam Dar, Tania Yeromiyan and Tom Walker. The problem that the app is trying to solve is to help people reduce meat an dairy consumption from their diets.
The website allows the user to create and generate a costumised daily meal plan based on the user diet preferences, maximum calories target for the day and the ability to exclude any food intolerances they might have. The recipes are fetched from the Spoonacular API, sot he user gets detailed meal information for each of the recipes generated.
The React app has some extra features, such as a page with information about nutrition and myth busters explained around a vegan diet. Using the shopping list feature you can create a shopping list. There is also a favourites page where you can save your favourite recipes to come back to.
COMING SOON : sing in/sing up page
Clone the project
git clone https://github.com/SchoolOfCode/w15_collaborative-react-project-team-f-plantasty.gitGo to the project directory
cd plantastyInstall dependencies
npm installStart the server
npm run startUsing React Developers Tools on Google Chrome you can inspect and see each component in the Plantasty App.
All components are located inside the components folder inside src folder. The main components used in the app are:
- Header
- Navbar
- InfoCard
- Single Choice Form
- Multiple Choice Form
- MealList
- FullRecipeCard
- Mythbusters
- ShoppingItems
- VegucateMe Card
This is the main component of the app. React router is used to navigate between the different pages of the app.
It also holds the functions needed to:
- select and set diet preference of the user
- select and set food intolerance of the user
- select and set Calories input value from the user
There is a separate folder of the pages that are linked using React router that are accesed by the user in the navbar.
This page includes:
- Hero components with explination of the website
- InfoCard components rendered with a button that link to the CreateMealPlan page
This page includes:
- Single Choice Form component where the user can select his dietary preference
- Multiple Choice Form component that allows the user to select his food intolerances
- CaloriesInput component that allows the user to input the maximum calories target for the day
- Button that generates meal plan and links to the MealPlanCreated page
This page will display the daily meal plan with 3 recipes for each day. The FullRecipeCard component will display the recipe information including a button that takes you to the full recipe link and a Favouritesbutton that allows the user to save the recipe to the Favourites page for later access.
There is also a Calendar component that allows the user to switch between the days of the week and get a new meal plan generated for each day.
This page allows the user to create a personalised shopping list by adding and deleting any ingredients.
This page hold the Mythbusters component and also the VegucateMe Card that hold nutritional information.
- Logo
- TextButton
- IconButton
Each component has its own CSS and CSS modules stylesheet is used to add the CSS.
This project was bootstrapped with Create React App.
API information is fetched from Spoonacular
- "@syncfusion/ej2-react-calendars": "^19.2.46",
- @testing-library/jest-dom": "^5.14.1"
- "@testing-library/react": "^11.2.7",
- "@testing-library/user-event": "^12.8.3",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "react-icons": "^4.2.0",
- "react-router-dom": "^5.2.0",
- "react-scripts": "4.0.3",
- "react-star-ratings": "^2.3.0",
- "router": "^1.3.5",
- "simple-react-footer": "^1.0.2",
- "styled-components": "^5.3.0",
- "web-vitals": "^1.1.2"