SenseiA personal trainer for React and TypeScript, with a compiler, a bundler and a test runner in one browser tab. A lesson only counts when every hidden test passes with zero type errors.
I've spent 10+ years building production websites, and I wanted to move from front-end web developer to front-end engineer. That meant getting fluent in typed React.
I learned React from The Road to React, which ran its exercises in a live code editor, so you knew right away if your code worked. I wanted that same loop for TypeScript and React, built around how I actually learn. Every good student needs a patient sensei, so I built one and named it after the most patient one I know of.
Fluent in typed React, not just familiar with it.The goal the whole trainer is built around.
Every lesson runs the same five steps. Here is lesson 3, unions and narrowing, run against its real hidden tests.
// idle, OR success with data, OR error with a message. // Never two at once. export type RequestState = // TODO never; export function describeRequest(state: RequestState): string { switch (state.status) { // TODO: one case per member default: return assertNever(state); } }
export type RequestState = | { status: "idle" } | { status: "success"; data: string[] } | { status: "error"; message: string }; export function describeRequest(state: RequestState): string { switch (state.status) { case "idle": return "Waiting to start"; case "success": return `Loaded ${state.data.length} item${state.data.length === 1 ? "" : "s"}`; case "error": return `Failed: ${state.message}`; default: return assertNever(state); } }
Hints reveal one at a time, each more specific than the last. "Show solution" exists, but a lesson you watched is not a lesson you learned: reset it and redo it a day later.
Fifteen lessons in a deliberate order, with an interview grading every few lessons.
Nothing gets retired. The discriminated union from lesson 3 comes back for request state in lesson 10, reducer actions in 11 and component props in 15, and each lesson shows what it builds on as chips you can click back to.
The spec I wrote before the first line of code, and what I added after using it.
same loop as The Road to React, but the compiler gets a vote
Running a bundler, a test runner and a compiler inside one browser tab broke in ways that weren't obvious. Each fix is commented at the site in the code.
Sandpack provider stuck in "idle"
Sandpack registers its bundler clients in a mount effect, and React's StrictMode mounts twice. That left the provider idle and deaf to its clients. The app runs without StrictMode, with a comment saying why.
preview replaced by a test report
A client in test mode stops rendering your app. The preview and the test runner each get their own Sandpack provider.
hidden iframe, throttled timers
Browsers throttle timers in a display: none iframe. Inactive panels hide with opacity instead, so tests keep running out of sight.
rebuild, test, rebuild, test...
Inline objects passed to Sandpack looked new on every render, and a finished test run set state, which rebuilt the sandbox, which ran the tests again. Memoising the files, setup and options broke the loop.
vite: command not found
The project folder is "React:Typescript Sensei", and PATH is colon separated, so npm's usual trick split it in two. The scripts call node ./node_modules/... directly.
endless bounce; quitting killed Chrome's network
A shell script in an .app never tells macOS it finished launching, so it's a stay-open AppleScript applet. Stopping the server uses lsof -sTCP:LISTEN, so it kills the listener and not every browser connected to the port.
React + TypeScriptThe app is written in the thing it teaches.
ViteFast dev server; the Dock app just starts it and opens a window.
MonacoThe VS Code editor, running the real TypeScript compiler in a web worker with React's actual type files. That's where the squiggles come from.
SandpackBundles your code for the live preview and runs the Jest-style hidden tests in the browser.
One file per lessonBrief, starter, hidden tests, solution, hints and "builds on" in one typed object. Adding a lesson is copying one.
localStorageProgress, points and half-written code survive a closed tab. No accounts, no server.
AppleScript launcherA double-click Dock app with loading bars, so I never open a terminal to study.
Claude CodeA study tool I built for myself. I wrote the spec and was its first student; Claude wrote most of the code, because typed React is what I was learning.A personal tool with one student: me. No usage numbers, no users to count. Here is what it holds.
Each point is $1 I pay myself: $101 for finishing all 15 lessons, $50 for all five checkpoints, and $5 for every day with 25 active minutes. Along the way: 6 non-obvious bugs, each fixed and commented in the code where it happens.
Diagrams over more code. After a full day at a screen, a drawing of a storage chest beat another code sample. I'd also worked through The Road to React on Educative, so I started out knowing what I liked and what was missing. The live editor and the interview checkpoints came straight from it.
I'd make it work fully offline. The editor and type checker run locally, but the preview and tests use CodeSandbox's hosted bundler, so no internet means no green ticks. I'd also add a check that runs every lesson's solution against its own hidden tests, so a broken lesson can't ship.
More belts: a testing track where I write the tests instead of passing them, an accessibility track, and Next.js with server components, the stack I ship with. All three use the same one-file-per-lesson shape.