Chess training web app with Stockfish running in WebAssembly, opening tutorials, game review, and live 5-tab analysis.
I wanted to build something that genuinely helps you get better at chess — not just play it, but understand why you're losing. So I built a training app with Stockfish running entirely in the browser via WebAssembly.
The core feature is live analysis across 5 tabs: Defence, Tactical, Threats, King Safety, and Positional. As you play or review a game, Stockfish evaluates every position in real time. Moves get classified: brilliant (!!), great (!), good, inaccuracy (?!), mistake (?), blunder (??). There's a best-line animation where arrows appear and pieces move at 1.5s intervals so you can study the engine's recommendation.
The opening tutorials walk you through named openings step by step, validating each move. There's a D3 force-directed graph that maps the opening tree so you can see how variations branch. Game history lets you review past games with full engine analysis.
The whole stack is React 19, TypeScript strict mode, Vite 7, shadcn/ui, Apollo Client with a Go/gqlgen backend, Storybook 9 for component development, and Vitest + Playwright for testing. Quality gates require zero TypeScript errors, zero ESLint warnings, and all tests passing.