- 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.jswith 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 startto start the development server
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent