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.

#oauth

Putting my step count on my website

保持更新