Calorie Climb

A fun game for kids to learn about nutrition, with real USDA food data.

Comment

Inspiration

One day, my kids asked me, "Daddy, what's more healthy -- chicken nuggets or pizza?" I realized two things. First, they were interested to learn more about healthy foods, which is great. But second, their exposure to diverse foods was, shall we say, a little limited. It was time to fix that and get them more knowledge about food in a fun way (in addition to eating it)!

What it does

This is really two things -- a game for kids, and then a full search of the USDA food database. The game is fun and sort of themed on "What beats rock" with a person who needs to fill up their caloric intake for the day with foods that steadily climb in their number of calories per serving. But they need to do it in a healthy way so the person doesn't get unhappy or sick!

The USDA food database is freely available and really interesting. We've exposed two areas in the "Food Search" page -- basic, unbranded foods we eat, and a full list of branded items tracked by the USDA (30,000+ items).

How we built it

We started with the front end in Bolt and got a game working the way we wanted it with basic foods added by the chat to static files. Then we did a little research about if there was a way online to find some pre-built nutritional data that could be incorporated via API, and Perplexity told us about the USDA! With only a prompt, Bolt was able to pull into the USDA API into our project for some testing and it looked great. We also added calls to the Perplexity LLM to help us format fun responses about the different types of foods for kids to better understand the various items being used in the game.

Challenges we ran into

At first, it seemed pretty easy to test locally with our API keys, but then we realized they wouldn't be secure that way. It was a bit of a challenge to talk through a back-end architecture that would help us proxy both the APIs we wanted to access without slowing down our searches, but we eventually settled on the Netlify edge functions being used in the product today.

Accomplishments that we're proud of

The Food Search page ended up being surprisingly fun. One of the first searches my 7-year-old did was for Lemonade, but instead, the top search returned was a specific branded food named something like "Lemo-o-made cold brew lemonade" and somehow this was completely and totally hilarious. From then on, we decided we wanted the game and the searches to have two modes -- "Lemonade" mode would search the generic food database at the USDA, and "Lem-o-made" mode would search all the branded food items. ("Lem-o-made" mode is still, I'm told, the most hilarious.)

What we learned

A lot about food! There are a lot more foods out there that we had no idea about, and the kids have been eating them up (pun intended).

What's next for Calorie Climb

We're going to keep working on the game play mode. We haven't had a winner in our house yet, so honestly, don't really know what happens when the person gets full. We're going to work on refining the game until we figure it out and see what the celebration looks like!

Built With

Share this project:

Updates