From 083b6b4d0abf2c5308480ca2a566eed623dd3154 Mon Sep 17 00:00:00 2001 From: Nikki Pham Date: Wed, 26 Apr 2023 16:57:03 +1000 Subject: [PATCH] added to read me and edited random meal --- README.md | 46 +++++++++++++++++++++++++++++------ src/components/RandomMeal.jsx | 7 +++++- 2 files changed, 44 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 30b9e0a..935890e 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,39 @@ # Meal Planner App :plate_with_cutlery: -[Try it here!](https://main--velvety-figolla-99f3fd.netlify.app/) +[Try it here!](planmyplate.netlify.app/) + +# 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 10 results per page using paginations due to the database size of the 3rd part API used, [Edamam](https://www.edamam.com/) 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 the create an app where users can search for recipes, save them and then create a meal planner for the week. +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](https://www.edamam.com/)) 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. @@ -11,14 +41,14 @@ We created a [wireframe](https://whimsical.com/seir63-meal-planner-app-NqDdWC24R -Tech Stack +# Tech Stack - React -- Bootstrap - Firebase/ Firestore +- Bootstrap - npm -Libraries Used -- React Router Dom -- React beautiful dnd -- UUID +# Libraries Used +- [react-router-dom](https://reactrouter.com/en/main) +- [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) +- [uuid](https://www.npmjs.com/package/uuid) diff --git a/src/components/RandomMeal.jsx b/src/components/RandomMeal.jsx index aa1154c..14a8573 100644 --- a/src/components/RandomMeal.jsx +++ b/src/components/RandomMeal.jsx @@ -16,9 +16,14 @@ const randomQuery = options[Math.floor(Math.random() * options.length)] export default function RandomMeal() { const [randomMeals, setRandomMeals] = useState([]) + const randomNumber = Math.floor(Math.random() * 100) useEffect(() => { - const url = `https://api.edamam.com/search?q=${randomQuery}&app_id=${process.env.REACT_APP_EDAMAM_APP_ID}&app_key=${process.env.REACT_APP_EDAMAM_API_KEY}&random=true&from=0&to=3` + const url = `https://api.edamam.com/search?q=${randomQuery}&app_id=${ + process.env.REACT_APP_EDAMAM_APP_ID + }&app_key=${ + process.env.REACT_APP_EDAMAM_API_KEY + }&random=true&from=${randomNumber}&to=${randomNumber + 3}` fetch(url) .then((res) => res.json())