Ocean Race Europe
A live fleet tracker built for racing around coastlines, not just across a finish line.
- Role
- Frontend Lead
- Discipline
- Fleet Tracking
- Year
- 2025
- Focus
- Next.js, TypeScript
(Overview)
I led development of the official live fleet tracker for The Ocean Race Europe 2025 - map, live boat tracking, and race-state UI for a coastal championship where straight-line distance to the finish isn’t enough.
Fans, teams, and press needed a live tracker - but race order on a coastal course can’t be a straight-line distance to a single finish. Who is first has to come from the course itself.
I built the Next.js product shell and a checkpoint system that ranks boats along the real course: polygon gates, distance to finish (DTF), distance to leader (DTL), anti-skip rules, and CMS overrides when race control needed a manual fix.
Shipped PredictWind’s public tracker for Europe 2025 - the first event in a partnership covering Atlantic 2026 and TOR 2027. Leaderboard followed race rules live; embedded on TNT Sports and Eurosport, with live data feeding broadcast graphics.
- Next.js
- TypeScript
- TailwindCSS
- tRPC
- Sanity
- nuqs
(By the numbers)
(Brief)
Mission context
Ocean Race Europe 2025: seven foiling IMOCAs, ~4,500 nm from Kiel to Boka Bay. PredictWind was Official Tracking and Weather Services Supplier; Europe was the public debut of a multi-event platform.
(Film)
Race trailer
Campaign film for the six-week European race. The tracker had to make the fleet followable live.
(Architecture)
System layers
Next.js shell, CDN map, and a checkpoint system that ranks boats on a real coastal course.
- Next.js shell
- Leaderboard, timeslider, telemetry, and embed chrome
- Map bridge
- CDN map kept in sync with the shell via typed postMessage
- Checkpoint system
- Course gates, DTF/DTL, finish detection, anti-skip, CMS overrides
- CMS / APIs
- Sanity teams/legs/media and tRPC tracks, routes, telemetry
(Product surface)
What fans could do
- 01
Race order
Checkpoint-based leaderboard with DTF, DTL, finish times, and race-control overrides.
- 02
Conditions & telemetry
Wind, currents, and temperature layers plus boat telemetry and predicted routes.
- 03
Timeline
Playhead, live interval, Sanity leg bounds, and shareable leg deep links.
- 04
Partner embeds
Team and media chrome plus iframe snippets for third-party sites.
(Product)
Tracker UI
Full-viewport map with fleet leaderboard, telemetry, weather layers, and a scrubbable race timeline.
Mobile
Leaderboard and scrubber sit in a bottom sheet so the map stays full-bleed on phone.
(Hard problems)
Constraints that shaped the build
A single finish line can’t rank boats racing around land
Checkpoint polygons along the course. Racing boats sort by DTF (or CMS override); finished boats by finish time. Anti-skip rules stop tracks jumping gates.
Map engine is a separate origin
Thin postMessage contract for date, leg, team selection, and media
Partners need white-label embeds
Embedded routes, iframe snippet, and themable telemetry cards
(Impact)
What I shipped
- 01
Built a checkpoint system that ranks boats on a real coastal course - not a fake straight-line race.
- 02
Shipped the public Europe 2025 tracker, first event in a multi-year Ocean Race partnership.
- 03
Got the product onto TNT Sports and Eurosport, with live data feeding broadcast graphics.
