Frontend Core & Theming

This module is where SKYWATCH stops being a backend with no face and becomes a screen you can actually look at: the Next.js app shell, the CSS design-token system every component reads from, the Zustand store holding live aircraft, the first Leaflet map, and the dashboard shell around it, search, aircraft count, the selected-aircraft detail panel, the flight list. It closes by directing the AI assistant to grow a two-state light/dark toggle into a full four-theme system. Same screen as the original course, same live map, same four themes, but every piece of it starts as a prompt you write and an output you review, not code you type yourself.

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, and none of it stays clean if this module’s foundation is wrong. An AI assistant asked to “build a dashboard with dark mode” will happily reach for Tailwind’s dark: variant on every component, because that’s the pattern it’s seen most. It compiles, it looks right, and it quietly becomes a wall you hit the moment a third theme shows up, because now every one of those components needs a second variant hand-added. Catching that choice here, before forty components exist, is the entire point of directing this module instead of just accepting whatever comes back first.

What You’ll Learn

• Directing an AI assistant to bootstrap the Next.js App Router shell and a CSS custom-property design-token system, and recognizing the moment it reaches for dark: variants instead
• Prompting a Zustand store for live aircraft state, and catching a selector subscribed to the whole store instead of the narrow slice a component actually reads
• Reviewing an AI-generated WebSocket hook for real reconnect-with-backoff, not a fixed-delay retry that hammers the server the moment it drops
• Directing the first live Leaflet map and the rest of the dashboard shell, search, the detail panel, the flight list, and catching a map that gets torn down and rebuilt on every render
• Prompting the two-state theme toggle into a four-theme system, and confirming the AI extended the token system instead of touching a component it had no business touching

Outcome

By the end of this module, you’ll have the same working dashboard as the original course: a live map with glowing aircraft markers, a header with search and live counts, a detail panel, a scrollable flight list, and four working themes, all built by an AI assistant you directed and checked at every step. Nothing in this codebase hardcodes a color, and you’ll know exactly why, because you’re the one who caught the AI trying to.

Let’s get started.