3D Flight Tracker

Globe showing real-time aircraft positions, built with React 19 and React Three Fiber. Generated with Claude Code

Features

• Live aircraft positions from adsb.lol, updated every 2 minutes
• Click any plane to see its route and details
• Hover to highlight, click to select
• No API keys required

Stack

Rendering	Three.js + React Three Fiber
Helpers	@react-three/drei
State	Zustand
Build	Vite + TypeScript

Getting started

npm install
npm run dev

Open http://localhost:5173.

Commands

npm run dev      # Start dev server
npm run build    # Type-check + production build
npm run lint     # ESLint
npm run preview  # Preview production build

Architecture

src/
  components/
    Scene.tsx        # R3F Canvas + lights + controls
    Globe.tsx        # Earth sphere with texture
    FlightLayer.tsx  # InstancedMesh renderer + hover/select logic
    FlightLabel.tsx  # World-space HTML label for selected plane
    RouteLine.tsx    # Great-circle arc + airport markers
    HUD.tsx          # 2D overlay (stats + selected flight info)
  hooks/
    useFlightData.ts # Polls adsb.lol, deduplicates, normalises
    useRouteData.ts  # Fetches route on flight selection
  utils/
    coordinates.ts   # lat/lon → Three.js Vector3, heading quaternion
  store.ts           # Zustand store (flights, selection, route)
  types.ts           # Flight, Airport, FlightRoute interfaces

API proxies

Both APIs are proxied through Vite to avoid CORS issues (see vite.config.ts):

• /api/adsb/* → https://api.adsb.lol/*
• /api/adsbdb/* → https://api.adsbdb.com/*

No API keys required.