Dev Hub
A learn-to-code app built from a Claude Design handoff: 24 interactive page archetypes across Learn, Practice, Reference and Meta — a CLI lesson, Git branching and rebase visualizers, Big-O charts, an algorithm visualizer, quiz mode, flashcards, a terminal-simulator mission, a regex lab and more. Every progress figure the designs faked is now real: quiz scores, SM-2 flashcard scheduling, milestones, streaks and time-on-page live in a dependency-free localStorage store. Ported to React 19 and TypeScript on Vite, routes split into lazy chunks, and checked by Playwright-driven route, responsive, interaction and accessibility audits.
Case study
Problem
A set of HTML/CSS design prototypes for a learning app had to become a real, shippable product — with progress, streaks and review schedules that were hardcoded in the mockups made true.
Approach
Recreated the 24 prototype pages in React 19 and TypeScript on Vite, backed them with a dependency-free localStorage progress store (quiz history, SM-2 flashcard scheduling, milestones, time-on-page streaks), split each page into a lazy route chunk behind an error boundary, and wrote Playwright audits for routes, responsiveness, interactions and accessibility.
Outcome
Live on GitHub Pages as a client-rendered app with no backend to run or pay for.
What it does
24 page archetypes
Lessons, deep-dives, storyboards, quizzes, flashcards, visualizers, labs and a progress dashboard, all on one design system and filterable from a single gallery.Progress that is actually real
Quiz scores, SM-2 spaced-repetition scheduling, milestones, streaks and per-day activity persist in a small localStorage store — no server, no account.Audited, not just built
Playwright scripts drive every route to verify interactions, responsive layouts and WCAG contrast, names and keyboard focus; routes load as lazy chunks behind an error boundary.
