lofi air traffic control

Listen to live air traffic control radio mixed with lofi hip hop beats. Inspired by lofiatc.com.

Architecture

Built with vtrr (Val Town React Router) — SSR + client-side hydration, twind for styling.

Rendering mermaid diagram...

File Structure

index.tsx                 — HTTP entry, createApp, ATC proxy, /source
routes.tsx                — React Router route definitions (client-safe)
airports.ts               — 140+ airports with LiveATC mount points
tracks.ts                 — Lofi music tracks + shuffle util
routes/
  App.tsx                 — Root layout with gradient background
  Landing.tsx             — Airport search + random button
  Landing.loader.ts       — Server: redirects / to random airport
  Player.tsx              — Player UI (play/stop, volumes, track skip)
  Player.loader.ts        — Server: validates ICAO, returns airport data

Key Features

140+ airports worldwide with LiveATC feeds
Server-side ATC stream proxy (avoids mixed-content issues)
Auto-reconnect on stream errors with exponential backoff
Keyboard shortcuts: space (play), arrows (volume), n (skip), esc (back)
SSR — pages render on the server, hydrate on the client
Randomized tracks — lofi playlist shuffled on each session