BugLab
Learn to read broken Python: predict the result, find the bug, explain it, then fix it.
- Role
- Product, design, engineering and exercises
- Stack
- Next.js 16 · React 19 · TypeScript · Pyodide · CodeMirror 6 · Vitest · Playwright
The problem
Beginners are told to debug, but nobody teaches them to read code that is wrong. Most platforms ask you to write a solution; the skill that is missing is looking at ten lines and seeing why they do not do what they say.
The solution
Every exercise is a broken function with four steps: Predict what it returns, Locate the line, Explain the cause, Fix it and run the tests. Solving it reveals the name of the bug and why it happens. Python runs in the browser through Pyodide, so there is nothing to install and nothing sent anywhere.
What it does
- 20 exercises, each with a different kind of bug
- Four steps, in any order, with three hints before the solution opens
- A score out of 100 per exercise and a pytest-style progress record
- Mobile layout with a Read tab and a Work tab
- Tested: 177 unit tests, 87 end-to-end tests at desktop and phone widths, accessibility checks with axe
Decisions
Python in the browser
A server that runs student code is a security problem and a bill. Pyodide in a Web Worker removes both, and the exercise checks run on the student's machine.
A parser for the reading steps, Pyodide for the fixing step
Locating and explaining a bug do not need to run anything, so they use a parser and are instant. Only the Fix step starts Python.
Every claim in an exercise is checked
Three exercise descriptions once said things Python did not do. Now the content is verified against the real interpreter by tests.