Paths/Frontend Engineer/State & Data Fetching / Client State
Build a Small Shared Store
Not every piece of state needs a library. Write the small store the cart needs - state, subscribe and update.
Validator
⏱ 0:00
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- Directory ~/frontend/src/store exists○
- File ~/frontend/src/store/cart.ts exists○
- The store exposes the state and a subscribe function○
- The store exposes an action that updates the state○
02Walkthrough
1 of 3 revealed- 01
Write the store
The state is private, the actions are public. Everything that changes the state goes through an action.
echo 'export interface CartState {\n readonly items: readonly string[];\n readonly totalCents: number;\n}\n\nlet state: CartState = { items: [], totalCents: 0 };\nconst listeners = new Set<(next: CartState) => void>();' > ~/frontend/src/store/cart.ts - 2 locked · each failed submit reveals one
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list