Frame
Ground

Learn JavaScript frameworks by actually building

React, Next.js and more - in a real editor, in your browser. No setup, no video to scrub through. Write the code, run the tests, see it pass.

27challenges

3tracks

18challenges solved

55developers

FrameGround

All tests passed!
Terminal
pnpm test > frameground@1.0.0 test > vitest run
PASS./index.test.js
Renders Button
Renders Button(5ms)
Disabled when no user(5ms)
Updates counter (5ms)

Test Suites:1 passed,1 total
Tests:3 passed,3 total
Snapshots:0 total
Time:1s, estimated 2s
Ran all test suites.

Pick a track and start

Curated sequences of challenges that take you from the basics to the parts of a framework people actually get stuck on.

All tracks

How it works

  1. Read the brief

    Every challenge opens with the problem, the constraints, and the tests it has to satisfy - written the way a ticket would be.

  2. Write it in the editor

    A real workspace boots in your browser: file tree, Monaco, a terminal. Nothing to install, nothing to configure.

  3. Run the tests

    Jest or Vitest runs against your code and tells you exactly what broke. Pass, and the challenge is marked on your profile.

What's inside

Learning tracks

Curated sequences of challenges that build on each other, so you always know what to attempt next.

Challenges

Problems spanning every difficulty, written for the frameworks you actually ship with.

Real test runs

Jest and Vitest run against your code in the browser and tell you exactly which assertion broke.

Your profile

Every solve is recorded - track your streak, revisit past work, and publish your solutions.

Ready to write some code?

Sign in with GitHub, enroll in a track, and solve your first challenge in the next ten minutes.