Nutrinfo

By: Malcom Calivar

Published: Nov. 15, 2020

Background information

Like many, I used to find dieting to be a mystifying concept. I'd try keto, or simply "eating less and exercising more," or any other fad or broad approach to either gaining or losing weight. The results, like for many people, were very random. I could lose some weight, then put it back on, or vice versa. I had no real understanding of what I was doing. It was a while until I learned about the calories in, calories out approach. What's it all about?

You know how nutrition labels on food products often tell you that "daily values are based on a 2,000 calorie diet?" Well, what happens if you eat less than your body needs? You lose weight. What happens if you eat more? You gain weight. Keep in mind this post isn't about nutrition. It's a complicated subject and there's a reason celebrities and athletes hire professionals to calculate these things for them. Caloric and macronutrient needs vary from person to person.

However, at its simplest, a way to count calories and nutrients is incredibly useful to anyone who's looking to make some changes to their weight or health.

Project description

With that, the idea for Nutrinfo was born. I wanted an app that I could input some amount of food into, and it would return a very familiar-looking nutrition label that included that item's nutrition info. 

 

How was it made?

The Nutritionix API provided all the information I needed about the food the user would query. The rest was done with ReactJS. I took the time to manually craft these nutrition labels using CSS; I wanted to deliver nutrient information in a familiar-looking format. The app would also keep a running total of every item the user added. 

This API uses natural language to query information. As such, a user can use whatever measurement they want. You can type "100g chicken" into the search bar, or "3oz of corn."

This was a short, fun, personal project that I used to practice development with ReactJS. 

Final design

I was very happy with how the nutrition labels ended up looking. Here's an example of a couple of search queries and their total nutritional information.