Search for a command to run...
AI agents write more of the code every month. Someone still has to know good code when they see it. Build real React components from a spec, by hand, and let hidden tests judge.
How software gets built next, and why we existOpen now in the React track
1. Todo List
EasyBuild a todo list in App.tsx. Add, edit, delete and toggle each item.
export default function App() { const [todos, setTodos] = useState([]); const [text, setText] = useState(""); function add(e) { e.preventDefault(); if (!text.trim()) return; setTodos([...todos, { id: Date.now(), text }]); setText(""); } return ( <form onSubmit={add}> <input data-testid="todo-input" value={text} /> <button data-testid="add-button">Add</button> <ul> {todos.map((t) => ( <li data-testid="todo-item" data-done={t.done}>Todos
The same loop on every problem. It takes minutes to start and as long as it takes to get right.
Each problem lists its requirements and a data-testid contract. The tests find your elements by those ids, so the markup is yours to design.
Write the component in a real editor with no AI suggestions. The preview re-renders as you type, so you see every state you build.
<li data-testid="todo-item" data-done={t.done}> <button data-testid="toggle-button" onClick={() => toggle(t.id)}>Done</button>Run the suite in your browser. You see each test by name and its verdict, one cell per test, but never the test code.
Lists, forms, focus traps, async search. Each one is a component a product team needs, with tests that check the behaviour rather than the markup. Two are open today; the rest of the catalogue is on the way.
The job is moving from typing code to deciding what to build, directing agents and verifying what they ship. That only works if you can read code well enough to catch what’s wrong, and that skill fades quietly when you stop using it.
HookDrill trains both halves. Drills keep your hands sharp: a spec, an empty App.tsx, and tests that only care whether it works. Builder Lab, coming next, trains the rest: specs, agents and verification.
The React track is open now. A DSA track with the classic interview set is being built on the same editor and test runner.
Open today: Todo List, Playlist Builder, Accordion, Star Rating, Counter with Undo, Password Strength Meter, Shopping Cart, Countdown Timer, Tabs with Roving Focus, Sortable Data Table, Multi-step Form, Modal Focus Trap, Autocomplete Combobox, Virtualized List, Debounced Search, Toast Queue, File Explorer Tree, Infinite Feed, Kanban Board, Date Range Picker, Product Sort, Leaderboard Ranking, Natural Sort File List, Multi-column Sort.
Same rules: no AI, hidden tests, one cell per test.
First up: Two Sum, Valid Parentheses, Group Anagrams, Longest Substring Without Repeats, Merge Intervals.
Timed rounds of UI problems, scored by the same hidden tests. This is a preview of how contests and the leaderboard will look.
| # | Handle | Solved | Rating |
|---|---|---|---|
| 1 | tourist_ui | 412 | 2780 |
| 2 | rin.t | 396 | 2709 |
| 3 | mkovacs | 380 | 2638 |
| 4 | jdlr | 364 | 2618 |
| 5 | hanne | 368 | 2547 |
Start with Todo List: one component, six tests, nothing to lean on but what you know.