Going into HackDavis 2018, we wanted to build a full-fledged web application complete with a front-end, server, and complex APIs.

We know it's a day-to-day hassle to keep up with a meticulous record of your diet and fitness, as hard as you may try. We want people to focus on what's important: eating right and treating our bodies well. We want to create something that will take care of the record-keeping and make it easier for us to achieve our health and dietary goals.

HackDavis's emphasis on building for social good -- in particular, community health and wellness -- as well as the availability and robustness of Google Cloud Platform's Vision API made for a great combination and we decided to take on this challenge.

What it does

Our application allows the user to take a photo of their food item and immediately calculate and record its calories. The app keeps a running count of the user's daily calorie intake.

How we built it

We built the front-end client using HTML, CSS, and Javascript (in particular, we used a combination of vanilla JS and JQuery). We used node.js to communicate with Google Vision API by building an Express server to function as middleman between our client and the API. We also implemented AJAX calls to use the Nutritionix API to calculate calories for specified food items.

Challenges we ran into

This was our first time venturing into Google Vision and using the Cloud Platform in general. The most challenging aspect of this project was enabling client-server communication. We finally settled on using XMLHTTPRequests to enable requests and responses between the client and server.

Accomplishments that we're proud of

So, so much! For one, we finished building the core functionality, which is to allow users to upload photos, determine what food items the photo contains, calculate the food item's calories, and keep a running total of the daily calorie count.

We also integrated a complex API into a full fledged web application with a complete front-end and back-end. We all built a server for the first time and were exposed to a variety of technologies such as Node.js, Express, Vision API, etc.

What we learned

We learned that configuring and setting up APIs is hard (for the first time, at least)! Learning to pore over documentation and making sense of software you've never seen before is hard! But most of all, it's well worth it, especially when you're working with a fantastic and motivated team.

What's next for NomNom

We plan to further what we have and finish NomNom deploy it as a complete application on Google Play or the App Store.

(Note: Burger Image credits --> Free Icon Shop)

Built With

Share this project: