Alarium — Live 3D Airspace Tracker
Overview
Alarium renders live aircraft over North America in 3D, at true altitude, on a basemap I built for it. It started from one hard limit. The community ADS-B feed it runs on allows about one request per second for the whole application, not per user, so client-side polling falls apart at the second visitor. That limit shaped the architecture before I drew a single screen: a server-side poller, a persistent process, and two services split across two hosts. It shaped the positioning too. The big trackers have thousands of receivers and satellite coverage, while Alarium has one feed, so instead of competing on data it competes on how the airspace looks and how it feels to use. I built it so the thin data is never the part you notice.
Highlights
- Treated altitude as real space instead of a number in a panel. Every aircraft carries a ground tether, so exaggerated height still reads honestly and stacked holding patterns stay legible.
- Wrote a dedicated interpolation engine so motion stays smooth at working zoom, roughly 3m of error at the 95th percentile. ADS-B arrives sparse, jittery, and out of order, and most trackers visibly snap between updates. This one holds steady.
- Generated the aircraft in code: seven low-poly airframe families plus a helicopter with animated rotors. Bank comes from the coordinated-turn equation and pitch from the flight-path angle, so the models move from real physics rather than hand animation.
- Verified routes instead of trusting them. Filed flight plans are often stale, so the live track is checked against the filed origin and destination and returns one of three answers: as filed, inverted, or conflict. I would rather show “unknown” than show something confident and wrong.
- Kept one source of truth for design. A TypeScript token package generates both the interface CSS variables and the Mapbox basemap, so the map and the UI cannot drift apart, and a test fails the build on any undefined variable or hardcoded hex.
- Shipped the whole thing myself: custom domain, TLS, origin policy, rate limiting, abuse controls, transactional email, and privacy-respecting analytics. It runs to about 13,800 lines of TypeScript and 242 tests.
Role
Solo project. I owned product strategy, the design system, interface design, and the full build through to production infrastructure.
Notes
The one rule I held to on the basemap was that the map is the ground and the aircraft are the subject. The style I started from drew a cruising jet at almost the same tone as the highway under it, so it basically vanished. I pulled the roads back into structure, saved the accent color for runways, and gave the coastline its own stroke so two near-black fills could still separate. The whole thing reads more like an instrument than a consumer map, down to a boot sequence that sweeps like an air-traffic-control radar once every eleven seconds. A real antenna turns every six to twelve seconds, and anything faster just looks like a loading spinner. Late in the build I ran an adversarial review of my own code and found three real bugs that 127 passing tests had missed. Each piece was correct on its own, and the trouble was only in how they came together. The worst one mispredicted every turn for about four seconds, and fixing it made prediction roughly seventy times more accurate and cut bandwidth by 20%, since better predictions need fewer corrections. It stays a work in progress on purpose. It covers only North America, aircraft without ADS-B transponders never appear, and the single-machine poller is a deliberate weak point, because splitting it across machines would divide the rate limit that shaped the whole project.
Tools
TypeScript 7 (strict), Vitest, pnpm workspaces, Vercel, Fly.io, Mapbox Studio, Resend, Matomo, Oxanium / Inter / JetBrains Mono
Framework
Next.js 16, React 19, Turbo
Library
deck.gl 9.3, Mapbox GL JS 3.27, ws, Zod
Alarium — Live 3D Airspace Tracker
Overview
Alarium renders live aircraft over North America in 3D, at true altitude, on a basemap I built for it. It started from one hard limit. The community ADS-B feed it runs on allows about one request per second for the whole application, not per user, so client-side polling falls apart at the second visitor. That limit shaped the architecture before I drew a single screen: a server-side poller, a persistent process, and two services split across two hosts. It shaped the positioning too. The big trackers have thousands of receivers and satellite coverage, while Alarium has one feed, so instead of competing on data it competes on how the airspace looks and how it feels to use. I built it so the thin data is never the part you notice.
Highlights
- Treated altitude as real space instead of a number in a panel. Every aircraft carries a ground tether, so exaggerated height still reads honestly and stacked holding patterns stay legible.
- Wrote a dedicated interpolation engine so motion stays smooth at working zoom, roughly 3m of error at the 95th percentile. ADS-B arrives sparse, jittery, and out of order, and most trackers visibly snap between updates. This one holds steady.
- Generated the aircraft in code: seven low-poly airframe families plus a helicopter with animated rotors. Bank comes from the coordinated-turn equation and pitch from the flight-path angle, so the models move from real physics rather than hand animation.
- Verified routes instead of trusting them. Filed flight plans are often stale, so the live track is checked against the filed origin and destination and returns one of three answers: as filed, inverted, or conflict. I would rather show “unknown” than show something confident and wrong.
- Kept one source of truth for design. A TypeScript token package generates both the interface CSS variables and the Mapbox basemap, so the map and the UI cannot drift apart, and a test fails the build on any undefined variable or hardcoded hex.
- Shipped the whole thing myself: custom domain, TLS, origin policy, rate limiting, abuse controls, transactional email, and privacy-respecting analytics. It runs to about 13,800 lines of TypeScript and 242 tests.
Role
Solo project. I owned product strategy, the design system, interface design, and the full build through to production infrastructure.
Notes
The one rule I held to on the basemap was that the map is the ground and the aircraft are the subject. The style I started from drew a cruising jet at almost the same tone as the highway under it, so it basically vanished. I pulled the roads back into structure, saved the accent color for runways, and gave the coastline its own stroke so two near-black fills could still separate. The whole thing reads more like an instrument than a consumer map, down to a boot sequence that sweeps like an air-traffic-control radar once every eleven seconds. A real antenna turns every six to twelve seconds, and anything faster just looks like a loading spinner. Late in the build I ran an adversarial review of my own code and found three real bugs that 127 passing tests had missed. Each piece was correct on its own, and the trouble was only in how they came together. The worst one mispredicted every turn for about four seconds, and fixing it made prediction roughly seventy times more accurate and cut bandwidth by 20%, since better predictions need fewer corrections. It stays a work in progress on purpose. It covers only North America, aircraft without ADS-B transponders never appear, and the single-machine poller is a deliberate weak point, because splitting it across machines would divide the rate limit that shaped the whole project.
Tools
TypeScript 7 (strict), Vitest, pnpm workspaces, Vercel, Fly.io, Mapbox Studio, Resend, Matomo, Oxanium / Inter / JetBrains Mono
Framework
Next.js 16, React 19, Turbo
Library
deck.gl 9.3, Mapbox GL JS 3.27, ws, Zod
