Complex State Machines

Build applications with many intersecting states, like a custom video player or a browser game. Tests reducer logic, XState, and avoiding impossible states.

useReducer / XStateComplex state logicMedia APIsEvent handling

Choose Your Level

Pick the difficulty that matches where you are. You can come back and try a harder level later.

Beginner

Build a Custom Audio Player

Manage the intersecting states of HTML5 media elements.

2 to 3 hours 3 criteria

Start this level

Intermediate

Complex State with useReducer

Upgrade a messy cluster of `useState` hooks into a clean reducer.

3 to 5 hours 3 criteria

Start this level

Advanced

Finite State Machines (XState)

Use mathematical state machines to build bulletproof logic flows.

4 to 6 hours 3 criteria

Start this level