🔥 TypeForge

Sharpen your TypeScript, ten minutes a day.

A daily hands-on coding workout for the AI era. When the assistant writes all your code, your own hands get rusty — TypeForge gives them ten minutes of real practice: implement a function, hunt a bug, or fix the types, all by hand in a real editor. Pass the hidden tests to advance. Your streak and progress live in your browser, so tomorrow picks up where you left off.

No account. No database. No backend. It runs entirely in the browser and deploys as a static site anywhere.

Features

• Monaco editor — the same editor as VS Code, with full TypeScript IntelliSense.
• Real validation — your code is compiled and run against hidden tests in a sandboxed Web Worker. Green means both the tests pass and the types are clean.
• Three challenge kinds — implement (write it), debug (fix the bug), and fix-types (make it compile).
• Two ways in — browse by difficulty (Novice / Intermediate / Advanced) or by topic (generics, async, narrowing, closures, …).
• Daily streak + progress — saved to localStorage, no sign-in required.
• 20 challenges to start, and adding more is a one-file drop-in (see below).

Tech stack

Next.js 16 (App Router, static export) · React 19 · TypeScript 6 · Monaco Editor · Tailwind CSS 4 · pnpm.

Local development

pnpm install
pnpm dev      # http://localhost:3000

Other scripts:

pnpm build      # static export to ./out
pnpm typecheck  # tsc --noEmit

The Monaco editor and the in-browser TypeScript compiler are loaded from a public CDN at runtime, so the playground needs an internet connection the first time it runs.

Adding a challenge

Challenges are plain data. To add one:

1. Create src/challenges/<your-id>.ts exporting a default Challenge (copy any existing file as a template — e.g. src/challenges/sum-array.ts).
2. Add one import + one array entry in src/challenges/index.ts.

That's it. Difficulty and topic tracks rebuild themselves from the challenge pool.

A challenge defines a prompt, starterCode, hidden tests (using the global test() / expect() helpers from the harness), a reference solution, and hints. For fix-types challenges, the starter intentionally doesn't compile; type correctness is graded via the editor's TypeScript diagnostics.

Deployment

The app is a fully static export (output: "export" in next.config.ts) — pnpm build emits a static ./out folder. Host it anywhere.

Cloudflare Pages

• Build command: pnpm build
• Build output directory: out
• No environment variables required.

GitHub Pages (automated)

This repo ships a GitHub Actions workflow at .github/workflows/deploy.yml that builds and deploys on every push to main. To enable it:

1. Push the repo to GitHub with the name typeforge (the workflow sets NEXT_PUBLIC_BASE_PATH=/typeforge so the project site resolves at https://<you>.github.io/typeforge/).
2. In Settings → Pages, set Source to GitHub Actions.
3. Push to main — the site deploys automatically.

Using a different repo name, a user/org site, or a custom domain (served from the root)? Change NEXT_PUBLIC_BASE_PATH in the workflow to /<your-repo>, or remove it entirely for root-served sites.

Anything else

out/ is just static files — Netlify, Vercel, S3, or npx serve out all work.

How validation works

On Run:

1. The editor's TypeScript worker reports type diagnostics for your code.
2. A sandboxed Web Worker transpiles your TypeScript and runs it against the challenge's hidden tests, capturing pass/fail, console output, and errors.
3. A challenge is solved when every test passes and there are zero type errors.

The worker is isolated from the page, so an accidental infinite loop can't freeze the UI — runs are capped with a timeout.

---

Built for daily practice. Ten minutes. By hand.