Frontend Playground

Guided practicals for the Modern Front-End Engineering book.

The Playground contains the guided practical work for the book. The runnable source code will live in a separate companion repository; this site contains the instructions, verification criteria, and links back to the relevant chapters.

Practical work

Practical	Related chapter	Focus
01 - Browser Observation (optional virtualization)	1	Browser work and measured virtualization
02 - Accessible Composite Listbox	2	Semantics, keyboard interaction, and accessibility
03 - Intrinsic, Container-Aware Dashboard	3	Modern CSS layout
04 - Typed, Abortable Event Hub	4	JavaScript events and cancellation
05 - Runtime-Validated Data Boundary	5	TypeScript and runtime validation
06 - Compound Headless Tabs	6	Component architecture
07 - Reactive Computed Graph	7	Reactivity and derived state
08 - URL-Driven Catalogue State	8	Routing and application state
09 - Cached Administrative API Client	9	APIs, caching, and failure states
10 - Offline Outbox and Recovery	10	Offline persistence and recovery
11 - Rendering Topology Comparison	11	CSR, SSR, and SSG trade-offs
12 - Modern Front-End Toolchain	12	Module graphs and code splitting
13 - Secure Front-End Application Boundary	13	Security boundaries and safe sinks
14 - Design-System Package and Ownership Map	14	Design systems and ownership
15 - Measured Virtualized Performance	15	Performance investigation
16 - Resilient UI Integration Suite	16	Integration testing
17 - Delivery, Observability, and Rollback Loop	17	Delivery and operations
18 - Make and Defend an Architecture Decision	18	ADRs and technical decision-making

Companion code

The companion repository will contain the runnable Vite and TypeScript projects, checkpoints, tests, and reference implementations. This repository deliberately keeps those implementation files separate from the book and its practical instructions.