Merge pull request dimitrinossar#49 from pik-nik/edits

README.md

@@ -1,24 +1,55 @@
 # Meal Planner App :plate_with_cutlery:
-[Try it here!](https://planmyplate.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. 
 
 We created a [wireframe](https://whimsical.com/seir63-meal-planner-app-NqDdWC24RS4W12V1d8fYeM) to draw out our plans. 
 
 <!-- Insert screenshot of wireframe here -->
 
-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)
 

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())