Meal planner

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.

Technology tags

React
SASS
Flexbox
Edamam recipe search API

Future Ideas

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.

Project architecture

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

Learnings through this project

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.

Recommend Projects