Inspiration

Have you ever tried to host an event or guide a friend to your house, only to spend hours on the phone saying, "Where are you? Okay, wait at the junction, I'll come pick you up!"?

In my community, whenever we had a local gathering or a church crusade, we literally had to nail physical wooden signs onto trees and posts from the main junction all the way to the venue just so visitors wouldn't get lost. I thought to myself: We live in a digital age. Why are we still relying on wooden signs and confusing voice calls to guide people? There has to be a better way. That's why I built Trace.


What it does

Trace replaces physical signs and confusing verbal directions with digital breadcrumbs. You simply walk a route once on your phone, dropping media-rich "moments" — photos of landmarks, voice notes, or text instructions — along the path.

Once done, you get a single shareable link. When your friends open it on their phones, they enter Replay Mode — a real-time guided walkthrough. As they walk, Trace tracks their location, zooms the map, and surfaces your notes and voice messages at the exact spot they were left. If they're far away, a built-in simulation mode lets them preview the full walkthrough virtually from anywhere in the world.


How we built it

  • Frontend: Next.js 16 (React 19) styled with Tailwind CSS for a premium, clean design
  • Mapping: Mapbox GL with react-map-gl for smooth 2D and 3D perspective mapping
  • Backend: Supabase Database and Storage for real-time trace retrieval and media handling
  • Telemetry: Custom React hooks streaming device geolocation through a Kalman Filter to eliminate GPS drift and map shaking
  • Path Polishing: Mapbox Map Matching API combined with Chaikin smoothing and Douglas-Peucker algorithms to snap coordinates cleanly onto real walking paths

Challenges we ran into

The Leaflet to Mapbox Pivot — Started with custom maps, moved to Leaflet, then researched and adopted Mapbox GL for its superior 3D perspective and mapping accuracy.

The Desktop GPS Problem — Spent hours debugging why recording wasn't working, only to discover that desktop computers have no hardware GPS chip. This forced me to build a full mock simulation system so the app could be tested and demonstrated from any device.

Fighting Erratic GPS Lines — Raw GPS drift meant lines jumped through buildings and walls. I had to research telemetry smoothing and implement a custom Kalman Filter to clean up coordinates in real time.


Accomplishments that we're proud of

  • A seamless guided replay experience that locks and unlocks markers based on the follower's real-time proximity
  • A full simulation mode so anyone can preview a trace from anywhere in the world
  • Path smoothing that makes routes look polished and professional, aligned to real roads rather than raw jagged lines
  • A visually premium UI with micro-interactions, responsive sideovers, and custom toast indicators

What we learned

I started this with just an idea and very little knowledge of mapping or telemetry. Building Trace taught me how to work with geospatial coordinates in real time, how to apply mathematical filtering to improve raw hardware accuracy, and how to handle background media uploads without blocking the UI — things I'll carry into everything I build next.


What's next for Trace

  • Audio-guided trail tours — Record voice waypoints along any route and as someone walks it, audio plays automatically when they arrive at that exact spot. Like a museum audio guide but for the real world.
  • Live condition reports — Walkers drop quick condition markers ("muddy ahead", "road closed") that appear as temporary badges for everyone following the same route. Low effort, high utility.
  • Group mode — Friends following the same trace see each other's live location dots on the map. Waypoints one person unlocks, unlock for everyone. A solo walk becomes a shared experience.
  • Seasonal waypoints — Moments that only unlock during certain months or conditions. "The view is best in harmattan." Gives people a reason to return to the same trace across different seasons.
  • Discover nearby traces — A radar view showing traces recorded near your current location with distance and estimated walk time. Open Trace anywhere and find something worth following right now.

Built With

  • bun
  • geolocation-api
  • kalman-filter
  • mapbox-gl
  • next.js
  • react
  • supabase
  • tailwindcss
  • typescript
Share this project:

Updates