Home

FoodForThought

User Stories

• User can list ingredients and get recipes
• User can view number of ingredients missing
• User can view the recipe
• User can leave/view reviews
• User can limit how many recipes are shown

React Components

• Main

  • This component manages the overall application
  • Uses React-Router to connect child components
  • Uses Spoonacular Food-Recipe-Nutrition API
  • Uses Firebase for database
  • Child Components
    • Get recipe by ingredients (searchRecipe)
    • History of previously searched recipes (Using Firebase) (History)

• Header

  • Component where it has either a drop down or inline list, showing the two “Child Components”. (To Be Determined)

• searchRecipe

  • Will have a form and submit button.
  • User will input ingredients
  • Submit Button will fetch list of recipes using the Spoonacular API
  • Shows (number of) missing ingredients.

• History

  • User will be able to see past searched recipes
  • User will be able you view reviews

Persisted Data

• Recipe By Ingredients
  • fillingIngredients: Boolean - Adds missing/used ingredients
  • Ingredients: String - String of Ingredients
  • Number: Integer - Number of Recipes to display
  • Ranking: Integer - Toggles missing/used ingredients first.

Third Party Data

• Spoonacular Food-Recipe-Nutrition API - https://market.mashape.com/spoonacular/recipe-food-nutrition#search-recipes-by-ingredients

Node Package Manager (NPM)

• Packages
  • Material-UI - https://www.npmjs.com/package/material-ui
    • Makes things prettier
  • Firebase - https://www.npmjs.com/package/firebase
    • For our database
  • Axios - https://www.npmjs.com/package/axios
    • Automatically transforms JSON data without having to explicitly write the code.
  • AOS - Animation On Scroll - https://www.npmjs.com/package/aos
    • Animations when you scroll up and down.

TODO - Add more features to react component. (Maybe 1 or 2 more features) Create a sketch of the GUI and add it to the top of this doc.