React · Next.js · frontend track · graded by real DOM tests

Learn React like a production team.Real DOM tests. Real hook bugs. No videos.

Three courses that take a developer from components and state to Server Components and shipping on Next.js. Every exercise is graded by real component tests asserting on the rendered DOM — so “it works” is never a vibe. Built for people burned by video tutorials.

react-1 · effects · stale closure@testing-library/react
// The count in the document title lags one click behind.
// The grader renders <Counter />, clicks it, and asserts on the real DOM.
function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Clicked ${count} times`;
  }, []); // <- stale: this effect never sees the new count

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}
✓ Counter — updates the rendered count on click (18 ms) · 1 passed
REACT 1

Foundations

Components, JSX, state, forms and effects — plus debugging drills on the classic hook bugs: the stale closure, the race-conditioned search, the infinite effect loop. All graded by real DOM assertions.

REACT 2

The Production Layer

Data fetching and caching done right, deliberate state architecture, a flagship re-render performance module with render-count drills, and real testing and accessibility.

REACT 3

Framework & Ship

The Next.js App Router mental models — Server vs Client Components, streaming, hydration, server actions, auth — then error reporting, Web Vitals and a production SaaS capstone.

01

The DOM decides, not vibes

Your components run against real Testing Library-style tests on the rendered DOM. Pass/fail is deterministic — the AI never grades you.

02

It adapts to you

Struggle on a concept and the game diagnoses why and builds targeted practice. Already know useState? It moves you up instead of making you sit through it.

03

Ship real frontends

Capstones like a filterable data-table dashboard and Coursefolio, a production SaaS frontend, with a senior-engineer code review — the answer to tutorial hell. Ship a portfolio, not just streaks.

Your first passing component test is minutes away.

Start the React track — free

Free tier is genuinely free — every banked exercise is playable. We gate AI help and fresh generation, never the content.