I Put My Daily Step Count on My Website (Here’s How)

I love data. Especially when it is my data

Our phones and watches track everything. Steps, distance, sleep, and heart rate. But that data usually lives and dies inside a "walled garden" app like Google Fit or Samsung Health.

I wanted to break it out.

I wanted to own that data. More specifically, I wanted to show off my daily activity right in my personal website.

So I built a bridge

The Stack

I did not want to overcomplicate this. I just needed a simple app to poll the data and push it to my backend.

I used Expo to create the app. The data source is Android Health Connect and I used the react native health connect package to make it work.

The Build

The concept is simple. The phone counts the steps. The app asks for the steps. The app sends the steps to my server.

But dealing with Health APIs is never simple.

First you have to handle permissions. Android Health Connect is strict. You cannot just grab a user's health data. You have to ask nicely. I set up the permissions to read Steps and Distance.

Then came the syncing.

I did not want to open the app every time I wanted my website to update. That defeats the purpose.

I implemented a background sync. Now the app wakes up, quietly polls the data from Health Connect, and pushes it to my database. Of course, I added a manual "Sync Now" button too because sometimes you just want to see that number jump right now.

The Result

Now if you scroll to the bottom of my site, you will see it.

"Steps Today: 1632 | Distance : 0.88km"

It is a small detail. Most people will not even notice it. But I know it is there. It is live, it is automated

If you want to see how I wired it all together, the code is open source.

Check out the Vital Log App on GitHub