All projects
Case study · 01
FREN

Product · Sports · Mapping

L’Infinie de la Chaize

L’Infinie de la Chaize is a backyard ultra in Noirmoutier, designed as a complete personal project rather than a simple sporting event — from the physical invitation to live runner tracking.

Status
Personal project — 2026 · Event on September 19, 2026
My role
Design and development of the entire experience: identity, website, live tracking, trailer, event materials, and game mechanics.
Stack
Next.js · TypeScript · GPS · Webhooks · Mapping · Product design
01

A race designed as a living product

01

Identity & invitation

The project starts from a complete visual identity — logo, graphic world — carried over onto a physical invitation. The front announces the event; the back points to the website via a QR code, the first step of the digital journey.

Logo of L’Infinie de la Chaize: a lighthouse and a pier.
Front of the physical invitation for L’Infinie de la Chaize.
Back of the invitation, access fields left blank for publication.
Anonymized back: the real credentials are not shown.

02

Invitation website

A state machine drives the entry sequence into a custom terminal, before moving on to the presentation and the runner sign-up form. The journey starts at the invitation’s QR code and carries the project’s visual identity through into the interface.

Next.js 16React 19TypeScriptTailwind CSSFramer Motion
Entry screen of the site, custom terminal with the “Initialize sequence” button.
Endpoint of the QR code → website journey.
Site homepage showing the countdown before the start and the course coordinates.

03

Live tracking

Each GPS position originates from Traccar Client on the runner’s phone and reaches a webhook endpoint that authenticates and validates the payload before writing it to local storage; an internal telemetry API feeds a MapLibre dashboard refreshed by regular polling.

Next.jsMapLibre GLTraccar ClientAPI routesPolling
  • Automatic dropout detection on signal loss, with resumption and manual override available
  • Tested end to end (authentication, validation, receipt, and display of a real GPS position) and in the field with a real GPS device before the event
Live tracking dashboard, dark theme, course map and runner status.
Internal dashboard, dark theme.
The same live tracking dashboard in light theme.
Internal dashboard, light theme.

04

Trailer

The official trailer was generated as an animated web experience rather than edited traditionally: a MapLibre map is driven and then captured via Playwright in a headless browser, before final encoding with ffmpeg.

MapLibrePlaywrightffmpeg
Animated map of the race’s official route, used in the trailer.
Trailer intro screen.
“Protocol initialization — L-INF // 2026.”
Trailer title screen.
“Team Kar(l)’dio.”

05

On the ground & materials

The project’s identity carries through to the event’s physical materials, here the t-shirt worn by the runners.

L’Infinie de la Chaize t-shirt, front with the logo.
L’Infinie de la Chaize t-shirt, illustrated back depicting the course and its obstacles.
Back design by a graphic-designer friend.

06

In-between games

Beyond the race itself, an additional game layer offers individual missions and collective dynamics between runners, designed to create narrative and cooperation without ever overshadowing the sporting event. Safety, participant consent, and absolute priority to the race shape every rule; missions, protocols, and organizer documents remain private.

07

Under the hood, validation, and limits

Live tracking, the website, and the trailer share the same identity and the same mapping rather than three separate treatments. The system is built and tested: authentication, validation, and receipt of a real GPS position are covered by an automated end-to-end test, complemented by a field test with a real device before the event.

  • Local JSON storage rather than a database, sufficient at the scale of a group of runners
  • Regular polling rather than real-time infrastructure — a level of complexity proportionate to the size of the race
  • Dashboard and storage stay local: an ngrok tunnel exposes only the entry point needed to receive GPS positions, not the full tracking interface — no permanent public infrastructure to maintain
  • Invitation website and trailer generator without automated test coverage, unlike live tracking

Next project

NAVBOX