Hīkoi

Hīkoi is te reo Māori for to walk. A group of friends walked a series of tracks around Aotearoa New Zealand. This is the private archive of them.

Where it started

I wore a Xiaomi Mi Band on every walk, so the band recorded the route, distance, time and steps of each one. But the records sat in the Mi Fitness app on my phone, between workouts and sleep scores, where nobody else who walked could see them.

Hīkoi puts the walks back together. Every route the band recorded is drawn on one map, and choosing a walk shows its numbers beside who came and the photos from that day. It keeps no totals and no pace charts, because it is a shared album of the walks, not a fitness tracker.

How it's built

• Next.js 16 with the App Router and TypeScript, deployed on Vercel.
• Supabase for Postgres and Google sign in.
• Google Maps through @vis.gl/react-google-maps, with Advanced Markers.
• Mantine 9 for form and button primitives, layout in plain CSS modules.

Working with Google Maps

The map is the whole background, drawn with the Maps JavaScript API through @vis.gl/react-google-maps. Each walk starts with an Advanced Marker, and its route is a polyline built from the GPX track. The library has no polyline component, so that one is a thin wrapper over the API's own. The camera fits every walk on load and eases to a walk when it is chosen, inset so the route never hides under the floating panels. Selecting a walk also traces its route from start to end.

Advanced Markers need a Map ID, and a Map ID turns off styling from code. So the map's look is a JSON style kept in the repo and pasted into the Google Cloud console, with points of interest and road labels removed and the land and water muted. Google's zoom control can't be restyled, so it is switched off and replaced with one that matches the rest of the app.

A theme taken from the land

The Mantine theme has three colour scales named after the land. Pounamu, the greenstone and bush green, is the primary colour for routes, markers and links. Kowhai, the yellow of the native tree, is the one accent and appears once on screen at most. Tussock, a warm grass neutral, is the background and the borders.

Each scale was tuned against the map rather than on its own. The green was made less saturated so a route reads as part of the bush instead of a layer on top of it. A pohutukawa red came first as the accent, but it shared a hue with the tussock land and glared, so kowhai replaced it. The map style uses the same land and water tones as the theme, so the two stay a set.

Read only, because of the export

Mi Fitness has no public API, so the app can't sync with the band or let anyone add a walk. The only way out is Xiaomi's own data export. I sign in to my Xiaomi account, request a copy of the Mi Fitness data, and wait for a download link to arrive by email.

What arrives is a zip of dozens of CSVs covering everything the band has ever measured. Only two matter, a summary of each activity and a file of route links, and neither is easy to read. The track file labels every activity as a run, so the real type has to be joined in from the summary by timestamp. The routes are not in the CSVs at all, only links to GPX files, and those links expire after about 90 days.

I asked Claude to work through the export with me. It found the rows for our walks, pulled out the distance, time and steps, and wrote the scripts that fetch each GPX file before its link dies. The originals are kept on disk and the routes go into the database simplified. So a new walk is added by hand, from a fresh export, and the site itself only reads.