• A web application to plan what you eat daily in accordance to dietary needs.
• Please find the demo here.
• This project was bootstrapped with create-react-app
• This project does not make use of any external CSS frameworks. Excuse the sassiness. 😉
• This project has been designed mobile-first and makes use of Flexbox extensively.

• React
• SASS
• Flexbox
• Edamam recipe search API

• Adding a grocery list aggregating all ingredients from the suggested meals
• Creating more selection criteria for health concerns such as PCOD, Diabetes, etc by collecting and analyzing data from several health and nutrition websites.

|-src
    |-components
      |-shared : All the components shared across the application
      |-page : Container components that serve as pages and use the shared components
    |-partials : Sass folder to include any partial sass files and a manifest file that imports all partials
    |-utils : Helper folder to contain any files that help the application, in this case, data fetching from the Edamam API
    |-App.js : The container component that decides how the app is navigated
    |-index.js : The JavaScript entry file 
    |-global.scss : Sass file that contains global application styles

• The Edamam API allows to query for recipes based on several parameters. However not all of them return apt results. I had to tweak my survey form to include only those fields that successfully returned some results.
• Having components that don't require to maintain state should be written as stateless components. Some of the advantages of this approach is nicely discussed in this article.

• Run npm i
• Please replace the lines in the file : meal-planner/src/utils/data/data.js with your own edamam ID and edamam API key. Thanks!

const API = {
  ID : "YOUR_EDAMAM_ID",
  KEY : "YOUR_EDAMAM_API_KEY",
  URL : "https://api.edamam.com/search?",
}

Make sure you make an API ID and Key from the Recipe Search API

• npm run start to start the development server