Our own product · Developer education
Whetstone: Engineering Lessons with In-Browser Coding Challenges
A practice app that turns 16 engineering topics into 83 short lessons, with quizzes, timed drills and 47 coding challenges graded by real tests in the browser.
- Industry
- Developer education
- Timeline
- Jun 2026 to present
- Year
- 2026
- Platforms
- Web
Results at a glance
The challenge
- Study material for senior engineering topics is scattered across docs, posts and videos that disagree, and the library version a behavior depends on is rarely named, so it is easy to learn something that is no longer true.
- Reading about code is not practice. Exercises had to run real code, in the browser, with tests that catch the obvious wrong fix as well as a missing one.
- One person was writing every lesson. AI can draft lessons quickly, but AI-written lessons are often confidently wrong, and dozens of them had to stay correct as libraries change.
- The same lesson had to work for reading on a phone in a few spare minutes and for timed recall practice before an interview.
- With no backend, the browser holds all progress, and a public site still had to be fast, accessible and readable by search engines.
About the project
Whetstone is a study app for software engineers, public on the web. Its 83 lessons are grouped into 16 tracks, from JavaScript fundamentals and React to databases, web security, systems design and infrastructure. Each lesson states what you will be able to do after it, explains the idea through examples at three levels, then tests it with quizzes, fill-in-the-blanks, predict-the-output snippets and, where the skill is code, a challenge that runs and is graded in the browser. The lessons are plain files written by AI agents through the project's own authoring commands, fact-checked by a separate reviewer agent that re-ran their code against pinned library versions, and checked by a schema, a validator and the challenge graders on every deploy. There is no account and no backend: progress stays in the browser.
What we delivered
Scope
- Product design
- Content schema and validation
- In-browser code grading
- AI authoring workflow
- Accessibility
- Technical SEO
- Security headers
- Automated testing
What it does
16 tracks, 83 lessons
From JavaScript and TypeScript fundamentals, React and TanStack to HTTP, NestJS, databases, testing, web security, Git, systems design and infrastructure. Each lesson opens with 2 to 5 things you will be able to do after it and ends with the official docs it was checked against: 711 sources across the 83 lessons.
Readings at three levels
Simple, medium and complex examples of the same idea, one at a time, so a reader can start easy and go deeper.
Practice with explanations
590 multiple-choice questions and 333 fill-in-the-blank prompts, graded automatically (a typed answer matches whatever its case, spacing or quote style), and 220 predict-the-output snippets that show the answer to compare against. Every item explains why, so a wrong answer still teaches.
Coding challenges in the browser
47 challenges with an editor, a live preview, hints and a Run tests button, graded by their own tests (320 across all challenges). Nothing to install.
Browse or Drill
Browse is untimed, with readings and answers visible, for reading on a phone. Drill hides the readings, times the attempt, scores it and keeps your best and recent results.
Progress without an account
Progress bars per track and lesson and a "continue where you left off" card, saved only in the browser. No sign-up and no analytics.
An interest filter
Pick the topics you care about and the matching tracks move to the front, using a checked list of tags.
Lessons written and checked by AI agents
Lessons are plain files. The project's lesson-writing commands have one AI agent draft a unit and a separate reviewer agent re-run its code samples against pinned library versions. A schema, a validator and the challenge graders run on every deploy, and a failing check blocks it.
Our approach
Every lesson lists the official docs it was checked against and names the version in its text. A docs-backed review of the first three tracks found 47 claims to fix; 46 were fixed and 1 was rejected with a reason.
Challenges run in Sandpack, an in-browser code runner, against tests written for each one. A check proves every starter fails and every solution passes, and the reviewer tries the obvious shortcut on each grader so it can't pass.
Lessons are plain files with a strict schema. One AI agent drafts each unit through the project's authoring commands, a separate reviewer agent re-runs its code samples against pinned versions, and the validator and graders run on every deploy, so a broken lesson can't ship.
Each lesson has two modes: Browse shows readings and answers untimed; Drill hides the readings, times the attempt and keeps the best and recent scores.
Every page is generated ahead of time and progress is saved in the browser. The code runner loads only when it scrolls near view, and accessibility, search metadata and a content security policy were added and measured on the live site.
The outcome
- The content phase merged on 2026-10-17 took the app from 3 tracks, 14 lessons and 10 challenges to 16 tracks, 83 lessons and 47 challenges: 590 quiz questions, 333 fill-in-the-blank prompts and 220 predict-the-output snippets in all.
- All 47 challenges pass their starter-fails, solution-passes check in the real in-browser runner against the live site, and headlessly on every deploy (320 tests in all).
- Accessibility went from 96 to 100 on the live home page, and accessibility, best practices and SEO all score 100 on each of the 4 page types measured (home, a track, a challenge lesson, a reference-card lesson).
- Challenge pages load 48% less script (453 to 235 KB), because the code runner now loads only when it scrolls near view.
- Google PageSpeed Insights scores the live home page 99 for mobile performance (best of 3 tests) and 100 on desktop (1 test), in October 2026.
- Every lesson cites the official docs it was checked against: 711 sources across 83 lessons. A docs-backed review of the first three tracks found 47 claims to fix: 46 fixed, 1 rejected with a reason.
- 143 automated tests, a content validator and the challenge graders run on every Vercel build, and a failing check blocks the production deploy.
- Built with an AI coding assistant: lessons drafted and reviewed by separate AI agents, and the content rules checked automatically on every deploy.
Built with
Next.js
React
TypeScript
Tailwind CSS
shadcn/ui- Sandpack
Zod- Zustand
Vitest- Playwright
Vercel
More projects like this
Have a project like this in mind?
Tell us what you're building. We'll show you how we'd approach it and what it would take, the same way we did for our own product.