chunyean/Nutrition-App

This app is used to calculate nutrients from ‘Edamman’ API. Each food or dish will contain different nutrition. Balance and good nutrition will help us maintain a good, healthy lifestyle. It contains three features: a single ingredient, a home-cooked recipe and a standard recipe. Technology is used by React.js, JavaScript, CSS.

Nutrition-App

Introduction

This Nutrition App is build for people who wish to know how much calories they consume from the daily food especially homecook food. Homeook food is hard to track how much of the calories it's contain, but this apps will help user figure out.

Technologies Used

• HTML
• CSS
• Javascript
• React.js
• Component Libraries: MaterialUI
• API source: https://www.edamam.com/

Getting Start

No need do any installation.
Compatible device: laptop with 13inch screen. (not compatible with others device screen side) Deploy at Netlify: https://cy-nutrition-app.netlify.app

Screenshots

Homepage

Single Ingredient Search

User to key in requirement

Nutrition Page

Personal Recipe

This features is what i like the most.

Key in personal recipe

Result

Searching Standard Recipe

Choose your dish based on photo

Result

Reference

• https://stackoverflow.com/
• https://www.verywellfit.com/how-many-calories-do-i-need-each-day-2506873
• google image source
• https://www.tutorialspoint.com/javascript_regexp/javascript_regexp_brackets_anycase.htm

Next Step

1. Searching wise will change image list layout and display more recipe image for user to choose.
2. Will look for another API to get more recipe and combine with nutrition.
3. CSS the whole website to make it look more nicer.