- 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.