Build Something Real

Seven labs, one habit: decide the architecture before you type. A reducer-driven todo app, a dashboard that survives a dead endpoint, a particle system on delta time, a physics playground behind a swappable adapter, a reactive store built from Proxy traps, a working test runner, and a search box that wins the race.

What you will be able to do

  • Drive a whole UI through one pure reducer, and explain why returning the same object matters
  • Design the loading, error, empty, aborted and stale states before you write the happy path
  • Cap concurrency, retry with backoff, and cancel work you no longer want
  • Animate on delta time and recycle objects instead of allocating them every frame
  • Integrate a third-party engine behind an adapter you own, and tear it down completely
  • Build reactivity from a Proxy: track on get, notify on set, batch in one microtask
  • Write a test runner from closures, throws and awaits, then trust the tools built the same way
  • Debounce input, abort superseded requests, and drop stale responses with a sequence guard
  • Finish each lab with a list of upgrades you can ship yourself

Lessons

  1. Todo App with a State Machine — Every change is an action. One pure function turns state plus action into the next state, and the screen is just a picture of whatever that function last returned. (26 min)
  2. Async Dashboard — Loading, error, empty, aborted and stale are states you design. Concurrency is a scheduling decision you make on purpose, not a side effect of where you put the awaits. (30 min)
  3. Canvas Particle System — A frame is not a unit of time. Multiply every change by the seconds the last frame actually took, and your animation looks the same on a 30 Hz laptop and a 144 Hz monitor. (26 min)
  4. Physics Playground with Matter.js — Integrating a library is renaming things you already understand. Build the small version first, then put the real engine behind an adapter with the same shape, and own the teardown. (28 min)
  5. Reactive Store with Proxy — A Proxy is an interception layer, not a copy. Reading a key while an effect runs subscribes that effect to that key, and writing the key notifies exactly those subscribers. (30 min)
  6. Mini Test Framework — Registration fills an array. Assertions throw. The runner catches and awaits. Every test framework you have used is those three sentences with more features bolted on. (24 min)
  7. Debounced Search with Cancellation — Three separate problems live in one search box: too many requests, requests you no longer want, and responses that arrive out of order. Each one needs its own fix. (26 min)