“Nutrain”-NutritionManagingApp
I made “Nutrain” which allows me to record and track food nutrition I had.
SiteURL : https://startling-puppy-43815a.netlify.app/
Github : https://github.com/Kazumakr/Nutrain_mark1
Overview
This application is to record and manage food nutrition.
You can search for foods from the food database and get accurate nutrients.
Technical Specifications
ReactJS, Styled-Components, Netlify, Edamam API
Why I created this project
I wanted an app that would allow me to intuitively record and visualize the nutrients in the food I eat. I used to track my nutrition with spreadsheet because I work out and need to have enough protein and calories.
A spreadsheet is fine for calculating ahead of time and creating a list of meals, but it’s not best option to keep track of what I eat every day.
Difficult part
It was a bit difficult to store in one array from two different APIs. They are provided by the same site Edamam and the contents seem like similar, but the response are different, so I couldn’t handle them all at once. I created the objects for each of them and combined them into one.
The units of serving are different, such as “per 100g” and “per person,” and I had a hard time making it possible to change the serving amount for each.
What I learned through this project
I learned how to use the API provided by Edamam. It was a good opportunity to learn how to handle data as I have been interested in the nutrient API for some time. I will probably use this API in the future.
And this was my first project since react18 was released, so I learned the syntax of a new root API introduced by react18.
What I will do in the future
I have a plan to make mark2. I will use artificial intelligence. It will be more useful.
