I am already using my Garmin watch to track my steps and calories burned. I wanted to add a simple calorie tracker to it, so I can see how many calories I have eaten and what the breakdown is.
I also did not want to use any heavy frameworks to build this and did not want to pay for any third party apps as well.
Desired workflow#
- I send a photo of the food along with the nutrition information (if available) I am eating to ChatGPT.
- ChatGPT identifies the food, estimates its calories, and saves the entry in the backend via a MCP endpoint.
- The backend stores the food item, calorie count, meal type, and date.
- The calorie tracker on my Garmin watch fetches today’s data from the backend and displays the total calories consumed.
- A frontend dashboard to fetch the same data and display it in a more detailed way.
Implementation#
- I ended up using Supabase to store the data because it has a MCP endpoint and a simple database.
- For the UI surfaces, I used the Garmin Connect SDK to build a watch face and a web app powered by ChatGPT sites.
- Surprisingly Garmin had a very streamlined process for building and deploying a watch face. Once I uploaded the plugin, I could sync it directly to my watch and see the changes immediately.
- Rest once the stack was decided Claude did the heavy lifting of the implementation and I just had to wire it up.
In production#
The end result with an overview on the left and a detailed view on the right. The watch face shows the total calories consumed today, while the detailed view shows the breakdown of protein, carbs, and fat.
And the same number is displayed on the web as well, with a trend graph.
