CodingNic
Sign In Book Session
← Back to Courses
SKYWATCH: Build a Real-Time Flight Tracker
Advanced 6 Modules Self-Paced Learning

SKYWATCH: Build a Real-Time Flight Tracker

Build a full-stack, real-time ADS-B flight tracker from scratch, using Next.js, Fastify, Postgres, WebSockets, and a live map, module by module, from an empty repository to a fully-featured, tested application.

Let’s build SKYWATCH, a real-time flight tracker that pulls live aircraft positions onto a map, watches for emergency squawks, logs who’s flown over your house, and can play back anything it’s seen. Not a toy version. A real, working app, built from an empty repo to a finished product, one module at a time.

⚠️ Prerequisite: Comfortable with TypeScript and React. We move quickly through the basics and spend the time on the real-time parts instead.

Built with: Next.js · TypeScript · Fastify · PostgreSQL · Drizzle ORM · WebSockets · Zustand · Leaflet · Tailwind CSS

SKYWATCH dashboard with live aircraft, a detail panel, and nearby traffic

No “here’s a bug, now let’s fix it” module: the default watch region, the detection engine, the two different pub/sub mechanisms, all of it gets built correctly the first time, because that’s how the real app works.

By the end, you’ve got a complete real-time app: a schema with real database-level invariants, a background poller and detection engine, a WebSocket layer, a four-theme frontend, watch regions with history playback, and a full feature set on top, tested end to end.

What You'll Learn

✓ Model a Postgres schema with Drizzle, including database-level invariants (a partial unique index, a singleton check constraint) instead of trusting application code to enforce them
✓ Build a background poller and a false→true transition detection engine for emergency squawks and "who flew over my house" overflight tracking
✓ Push live data to the browser over WebSocket, using two different pub/sub mechanisms for two different reasons: an in-process EventEmitter for high-frequency positions, real Postgres LISTEN/NOTIFY for rare, small alerts
✓ Build a Next.js frontend on a CSS custom-property design-token system that scales from a two-state light/dark toggle to a four-theme system without touching a single component
✓ Manage multiple watch regions with an operator-configurable default, free-pan fallback for looking anywhere, aircraft trails, and DB-backed historical playback
✓ Layer on a full feature set: airport and weather overlays, an alert feed with sound and browser notifications, an overflight log, multi-region compare, snapshot sharing, and a real mobile layout
✓ Write automated tests for the highest-value logic in the app, and run a full end-to-end verification pass across a finished, multi-module system

Course Modules

Module 1: Project Setup & Data Layer 3 Topics Module 2: Backend Services 4 Topics Module 3: Frontend Core & Theming 4 Topics Module 4: Watch Regions & History 4 Topics Module 5: Feature Build-Out 6 Topics Module 6: Testing, Verification & Next Steps 4 Topics