Building Sky Spy: Real-time Aircraft Tracking in the Browser

Have you ever looked up at a plane drawing a white line across the sky and wondered,"Where is that going?" Sky Spy is an interactive web experiment built to answer exactly that question. In this deep dive, I'll walk through how I built a real-time flight tracker using Next.js, React, and live ADSB data.

The Magic of ADS-B

Modern aviation relies on a technology called ADS-B (Automatic Dependent Surveillance–Broadcast). Aircraft continuously broadcast their GPS location, altitude, heading, and speed over unencrypted radio frequencies (1090 MHz). Anyone with a cheap SDR (Software Defined Radio) antenna can pick up these signals.

For Sky Spy, I tap into community-aggregated ADS-B networks. When you load the page, the browser requests your rough geolocation, and then we query a public endpoint for all aircraft within a specific radius.

Building the Tactical UI

I wanted Sky Spy to feel like a piece of vintage tactical hardware. Instead of a standard Google Map with airplane icons on it, the interface mimics a CRT radar screen.

We use CSS techniques like repeating linear gradients for scanlines, slight blurs to simulate phosphor glow, and a custom font (often monospace or a specialized digital typeface) to give that retro-futuristic feel.

.scanline {
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0.03) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 100% 4px;
}

The Math of the Sky

The hardest part of the experiment wasn't fetching the data—it was translating latitude and longitude into relative screen coordinates.

Since the user is at the center of the radar, we calculate the Haversine distance and bearing between the user and the plane. We then map that distance to the pixel radius of our radar circle. The result is a genuinely accurate spatial representation of the sky above you. If a blip is at the top right of the radar, you can physically look northeast and see the plane.

Performance and Polish

Polling an API every 5 seconds and animating dozens of radar blips can be expensive on mobile batteries. We rely heavily on Framer Motion to animate the positions of the planes smoothly between data updates. By letting the animation library handle the interpolation, the planes glide across the radar rather than jumping from point to point.

The result is a tiny, self-contained app that connects the digital world to the physical one. Next time you hear a jet engine rumbling overhead, you know where to look.