Technical Requirements

Stack

• React 19 with TypeScript, rendered by TanStack Start (server-side rendering plus client hydration) on Vite.
• Routing with TanStack Router's file-based routes; every page is a real URL with its own head metadata.
• Tailwind CSS v4 configured in CSS, with shadcn/ui primitives available and lucide-react icons.
• CodeMirror 6 via @uiw/react-codemirror with the JavaScript language package.
• framer-motion for the celebration and diff animations.
• sonner for toasts.

Routes

• / home, /library, /series/$slug, /series/$slug/$chapter, /docs and /docs/$doc.
• Unknown series or chapter slugs throw a not-found and render the 404 page.

Content

All series, chapters, playground starters, diffs and seed comments live in TypeScript modules in the bundle. Chapter bodies use a minimal markup: headings, fenced code, callouts, lists, inline code and embed directives for playgrounds and diffs. There is no CMS and no fetch at runtime.

Sandbox

• Worker source is created from a Blob URL so it needs no build configuration.
• Inside the worker, fetch, XMLHttpRequest, WebSocket and importScripts are removed; there is no DOM.
• User code is wrapped in an async function receiving mx and a console shim; all output is posted back as structured events (bubble, status, log, done, error).
• mx.webhook.sign uses WebCrypto HMAC-SHA256 and returns lowercase hex.
• A watchdog on the main thread terminates the worker if done is not received within 6 seconds.

State

localStorage via a small external store and useSyncExternalStore, so all components re-render together on change. Server render uses empty state; the client hydrates and then reads storage.

Fonts

Inter (UI), Source Serif 4 (prose) and JetBrains Mono (code) loaded from Google Fonts with preconnect and display=swap.

Deploy

Published as an edge-rendered app. A custom domain such as ub3r.io is attached in project settings; no environment variables or secrets are required.