Frontend Core & Theming

This module gets a real, live screen on the page: the Next.js app shell, the CSS design-token system every later component reads from, the Zustand store holding live aircraft, the first Leaflet map, and the rest of the dashboard around it, search, aircraft count, the selected-aircraft detail panel, and the flight list. It closes by taking the two-state light/dark toggle built earlier in the module and growing it into a full four-theme system.

Why This Matters

Every module after this one adds a feature to this screen, a new map layer, a new panel, a new control. None of that has anywhere to attach until this module exists: a working map showing live positions, a store other components can read from, and a token-driven theme system that makes “does this new feature respect dark mode” not even a question you have to ask, because nothing in this codebase hardcodes a color.

What You’ll Learn

• Bootstrapping the Next.js App Router shell and a CSS custom-property design-token system, instead of scattering dark: variants through every component
• A Zustand store for live aircraft state, and why selector-based subscriptions matter once the poller is pushing updates every few seconds
• Consuming the Module 2 WebSocket feed from the browser, with reconnect-with-backoff
• Rendering the first live Leaflet map, then building the rest of the dashboard shell around it: search, the selected-aircraft detail panel, and the flight list
• Growing a two-state theme toggle into a four-theme system (light, dark, amber, blue) without touching a single component that isn’t the toggle itself

Outcome

By the end of this module, you’ll have a complete, working dashboard: a live map with glowing aircraft markers, a header with search and live counts, a detail panel for whatever’s selected, a scrollable flight list, and four working themes, all built on a token system that makes the fourth theme no harder to add than the second one was.

Let’s get started.