I already use my Garmin watch to track my steps and calories burned. I wanted to add a simple calorie tracker so I could see how many calories I had eaten and their nutritional breakdown.
I also did not want to use any heavy frameworks or pay for third-party apps.
Desired workflow#
- I send a photo of the food I am eating to ChatGPT, along with nutrition information if it is available.
- ChatGPT identifies the food, estimates its calories, and saves the entry to the backend through an 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 fetches the same data and displays it in more detail.
Implementation#
- I ended up using Supabase to store the data because it has a MCP endpoint and a simple database.
- For the UI, I used the Garmin Connect SDK to build a watch face, along with 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 has 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.
The same number is also displayed on the web, along with a trend graph.
