frontend
Frontend Architecture
How to structure a real frontend app: where data lives, how to load it, and how to keep a growing codebase from turning into a mess.
Start track →Start from zero
Before the senior material: what frontend architecture even is, and the handful of words the rest of the track assumes you already know.State shape
How to design client-side state shape — local vs global, colocation, derived state, and normalization tradeoffs.Data fetching: server vs client, waterfalls, RSC, and SWR cache
Where data fetching happens decides LCP. Server fetch collapses the critical path to one round-trip; client fetch after JS adds 2-4 sequential trips. Waterfalls are silent killers — Promise.all, RSC, and TanStack Query cache cure them.Forms a11y
Accessible form patterns: semantic HTML, ARIA labels, focus management, error messaging, and keyboard navigation.Tokens
Design tokens as the single source of truth for color, spacing, and typography across components and themes.Monorepo
Monorepo tooling tradeoffs — Turborepo, Nx, and changesets — and when shared packages justify the overhead.Code splitting
Route-level and component-level code splitting, lazy loading, and preload strategies that keep Time-to-Interactive low.Build pipelines
Frontend build pipelines: bundler internals, tree shaking, module federation, and CI/CD integration.Putting it together
Capstone: applying state, forms, tokens, monorepo, splitting, and build knowledge to a production frontend architecture.Build with this track
Guided projects that exercise what you learn here.
Collaborative cursors
Show every connected user's live cursor and selection in a shared document, conflict-free, over WebSocket.
Command palette
A ⌘K command palette with fuzzy ranking, async action sources, and complete keyboard control (arrows, Enter, Escape, scoping) — the interaction layer every power-user tool needs.
A Next.js app to production
Build a multi-tenant content app on the App Router — then run it: lock down auth and secrets, layer the caches, decide every edge-vs-node call, and work the incident when one tenant poisons a shared ISR page.
Offline PWA sync
Offline-first notes PWA: a local write queue (IndexedDB) that syncs on reconnect with last-writer-wins conflict resolution, a service worker for asset caching, and background sync for missed flushes.
Personal portfolio page
Build a one-page site about you with plain HTML, CSS, and a sprinkle of JavaScript — no framework, no build step, just files you can open in a browser. By the end you'll have something real to show, and you'll actually understand every line of it because you wrote it yourself.
React feature at scale
Ship one real production React feature — a live collaborative activity dashboard — then operate it: optimistic edits, streaming updates, a frame budget, full a11y, and an incident drill when a render storm freezes the tab.
Signals mini
Build a ~100-line reactive signals library (signal/computed/effect) with automatic dependency tracking and glitch-free batched updates — the same model that powers Solid, Preact Signals, and Vue 3.
Trie autocomplete engine
Build a prefix tree that powers ranked autocomplete — insert words with weights, walk every prefix in O(prefix length + results), and handle tie-breaking deterministically without a database.
Virtual data grid
Render and smooth-scroll 100k rows at 60fps with windowing/virtualization, sticky headers, and full keyboard navigation — no library, just math.
Backend Architecture
How a server handles a request from start to finish — and how to make it reliable: background work, safe retries, and clean shutdowns.