Lessons

1What production FE ownership means55 min read

Reframe from ticket-shipper to surface owner: eight production dimensions, ownership receipt, failure at 100k users, interview format map, staff archetypes, and the senior scoring rubric for the whole track.

  • →Frontend Production Ownership
Read lesson
2React + Next.js core and interview questions65 min read

Deep React mental model (render/commit, Fiber, keys, hooks, effects, concurrent, React 19) and Next App Router realities (RSC vs client, revalidate layers, hydration, streaming, PPR) plus a 42-question multi-sentence interview battery.

  • →React and Next.js Foundations
Read lesson
3Component architecture and state design55 min read

Decompose surfaces cleanly and place state in four buckets — server cache, URL, local UI, global UI — with prop contracts, composition, fetch/invalidation patterns, and failure-mode tables seniors defend in interviews.

  • →Frontend Architecture
Read lesson
4Rendering, performance, Core Web Vitals55 min read

Own LCP, INP, and CLS with field-first diagnosis, the rendering menu (CSR/SSR/SSG/ISR/RSC/PPR), bundle and image strategy, RUM budgets, and interview-ready decision drills.

  • →Web Performance
Read lesson
5Accessibility and design-system stewardship55 min read

Treat accessibility as architecture: WCAG 2.2 criteria FE owns, keyboard-first design, semantic HTML before ARIA, combobox/dialog patterns, and design systems as products with tokens, deprecation, and gates.

  • →Accessible Design Systems
Read lesson
6FE system design I — chat & realtime dashboards58 min read

Full RADIO frontend system-design skeletons for chat (optimistic send, virtualization, scroll anchoring, reconnect) and realtime dashboards (SSE/WS, downsampling, backpressure) with interview timing and NFRs.

  • →Realtime Frontend Systems
Read lesson
7FE system design II — collab editors, feeds, autocomplete58 min read

Full RADIO frontend system design for collaborative editors (CRDT/OT, undo, reconnect), infinite feeds (cursors, CLS-safe injection), and autocomplete (debounce, abort, stale races, ARIA combobox).

  • →Realtime Frontend Systems
Read lesson
8AI in the UI + machine coding + capstone58 min read

Streaming AI UI patterns (protocols, batched tokens, conversation state, cancel/regenerate, citations, tool safety), machine-coding time-box strategy, and a self-scored FE system-design capstone mock with full rubric.

  • →Frontend Production Ownership
  • →Realtime Frontend Systems
  • →Accessible Design Systems
Read lesson

Skills in this course

  1. 01Frontend Production OwnershipOwn requirements, failure modes, rollout, measurement, and support beyond code.
  2. 02React and Next.js FoundationsExplain rendering, state, effects, server boundaries, data, and hydration.
  3. 03Frontend ArchitecturePlace state and data boundaries in cohesive, testable components.
  4. 04Web PerformanceDiagnose and improve LCP, INP, CLS, bundle, and runtime costs.
  5. 05Accessible Design SystemsBuild semantic, keyboard-safe interfaces and reusable accessible components.
  6. 06Realtime Frontend SystemsDesign resilient chat, dashboard, collaboration, feed, and AI streaming surfaces.