NutriSnap

Landing Page
Dashboard
Take a photo
Stats Page
Stats Page
Stats Page
Camera Page

Inspiration

It's no secret that we all want to eat healthier, but it's a lot of work. Keeping track of your meals, counting calories, and recording macros are all essential to a healthy lifestyle, but require a large amount of effort and dedication. For all of us on the team, we've certainly been there at one point. Maybe it's New Years Eve, maybe we've eaten junk all week and feel bloated. The point is, everyone's been there at some point in our lives. The problem is we never know where to start, and keeping track of calories, meals, etc. requires a lot of dedication and time. Using computer vision, data science, and mobile development, we decided to tackle this challenge and offload some of the burden of living a healthy lifestyle. This is why we built NutriSnap, and we hope it will be as useful to others as it will be for us.

What it does

At it's core, our app is a meal tracker. Simply snap a picture of whatever you're eating and it will log it, as well as estimate macros such as calories, protein, and sugar. This functionality is already extremely useful, as simply viewing what we've eaten can reveal trends and .... We've enriched its functionality by including a statistics page, visualzing your consumption and comparing to previous times.

How we built it

We built the app as a PWA (progressive web application) using Next.JS, Typescript, and Tailwind. For the backend, we used Typescript, Postgres, and GPT-4 Vision.

Challenges we ran into

One challenge we ran into was communication between the frontend and backend. Using Next, we decided to try their new server functions for data fetching. These worked great for the most part, but about mid-way through the hackathon they completely broke and we still don't know why :). After debugging for a bit, we decided to migrate everything to the old API router that we were more familiar with.

Another challenge we faced was in regards to deployment. We were using TypeScript, and it wouldn't deploy due to type mismatches and dependency errors that we weren't sure how to solve. But after going through them one by one, we were able to resolve everything and deploy before the deadline.

Accomplishments that we're proud of

This was our first PWA, and we're really proud of how it turned out. We weren't sure if the experience on mobile would be good, but it's hardly distinguishable from a native app.

What we learned

We all learned a ton during our time developing the app. It was the first PWA we've ever worked on, so that was a really great experience to see how they're made and get hands-on-experience. Moreover, we learned the importance of venturing out to areas of tech that we are unfamiliar with. From being the first PWA we have all done to testing and debugging SSR functions on Next.js, the amount we all learned in a matter of 1 day is priceless. And just overall, whenever working on a large project there are issues that arise, and learning how to overcome them is always a really valuable learning experience.

What's next for NutriSnap

After the hackathon, we intend to continue working on the core functionality of the app. While we do have user accounts and authentication working, we would like to refine our implementation and integrate more tightly with third-party services. Something we talked about was integration with an apple watch, to track how many calories you burn throughout the day, and compare it to your consumption. Overall, we're really excited to continue working on the app, and we can't wait to see what the future has in store!