Learn with Beans

Overview

A twelve-week, self-paced TypeScript course built around the idea that reading about types does not teach them. Each week pairs one lesson with one competition, and the comp is a real hands-on build behind a gate that will not let you fake it. The gate runs the actual TypeScript compiler in the browser, type-checks what you wrote against the week’s constraints, and only opens when the code genuinely satisfies them. No multiple choice, no answer key to peek at. Lessons are MDX, the season map tracks progress, and a Backyard Interviews section archives the explanations that came out of real questions.

What I did

Solo build, design through deploy. Wrote the twelve lessons and twelve gated comps, then built the grading engine that makes them work: the TypeScript compiler and a virtual file system running client-side, so submissions are checked for real rather than string-matched. Self-hosted Monaco instead of pulling it from a CDN, and kept it and the compiler behind a lazy boundary so the multi-megabyte editor payload never touches a lesson page. Backed the whole thing with an invariant test suite that proves every comp’s reference solution passes its own gate and every starter file fails it, which is what stops a broken gate from shipping. Ships as a fully static export.

Stack

• Next.js 15 (static export) · React 19 · TypeScript · Tailwind v4
• MDX lessons with rehype-pretty-code · Shiki syntax highlighting
• In-browser type checking via the TypeScript compiler + @typescript/vfs
• Self-hosted Monaco editor, lazy-loaded off the critical path
• Vitest invariant suite · Vercel

Results

• 100 Performance on mobile PageSpeed, at 10ms total blocking time and zero layout shift. The build carries roughly 13MB of Monaco and TypeScript compiler, and none of it loads on a lesson page. The editor payload only arrives when you open a gate, so it never touches the critical path.
• 100 Best Practices, 100 SEO, 96 Accessibility