Putting my step count on my website
I spent the weekend adding my step count to my website. Now everyone can see how much I walk.
My smartwatch and Android phone track my steps throughout the day. Since they're Android devices, all that data gets stored in Google Fit. I use Google Cloud's API to pull that data and display it on my site.
What it shows
Just the basics:
- Today's steps (shown in the footer of every page)
- Weekly total steps
- 30-day total
- My streak
That's it. Just steps.
Why I built it
I'm not a fitness person. I don't have fitness routines or step goals. But I think public accountability might work to make me walk or exercise more.
Also, I wanted to implement an API integration with Google Fit and this seemed like a quick pet project to try it out.
I got inspired by Dries Buytaert who posts his phone battery status, and Aaron Parecki who tracks his sleep and health publicly. I'm doing the same thing with my steps.
How it works
I connected my Google account to pull data from Google Fit, made a simple dashboard to see my stats, and added a page to display them. I can turn it on or off whenever.
The data refreshes automatically every hour using a Cloudflare Worker cron job, so the numbers stay current throughout the day without me having to do anything.
The tech side
If you want to build something like this, here's the basic flow:
- Set up a Google Cloud project and enable the Fitness API
- Configure OAuth 2.0 credentials to authenticate users
- Use the Google Fit API to fetch step data from the dataset.aggregate endpoint
- Store access and refresh tokens securely in Cloudflare KV
- Calculate stats like weekly totals, monthly totals, and streaks from the raw data
- Build a simple UI to display the data
- Set up a Cloudflare Worker with a cron trigger to refresh data automatically
I built this with Next.js and TypeScript, hosted on Cloudflare Pages. The authentication and API endpoints run as a separate Cloudflare Worker, while the frontend shows the stats and charts.
See it live
Check out my steps page to see the tracker in action.