Module 4: Building Your First Real App
Hands-on

Module 4 Exercises — 2+ working features, code walkthrough


Time to build something with real structure. The skill checks lock in the key commands and the planning habit; the real-work challenge is scaffolding your own app.

Quick skill checks

One right answer each — paste Claude's output and grade yourself instantly.

Project setupAuto-graded

Scaffold a Next.js app

What command creates a brand-new Next.js project? Type the command you'd run.

The dev serverAuto-graded

Run it locally

Your app is scaffolded. What command starts the local development server so you can see it in your browser?

Plan before you buildAuto-graded

Turn an idea into a spec

Ask Claude to turn this idea into a one-page spec as JSON with exactly the keys name, pages, and features: "a habit tracker where I can add habits and tick them off each day." Paste Claude's JSON.

App idea: a habit tracker where I can add habits and tick them off each day.

Take it to your real work

No single right answer — this is where the value is. Use your own material.

Scope disciplineSelf-check

Write the one-page spec for YOUR app

Pick an app you actually want. Write a one-page spec: the problem, who it's for, the 3–5 core pages, and the must-have features (and an explicit 'not now' list to fight scope creep). Hand it to Claude and ask it to poke holes in the plan before building.

Win: You have a spec tight enough that Claude could start building from it — and you cut at least one feature to 'not now.'

Build loopSelf-check

Scaffold and build your first page

Have Claude scaffold the Next.js app and build your home page from the spec. Run it locally, look at it in the browser, and iterate twice on layout or wording.

Win: Your app runs at localhost and the home page reflects your spec after a couple of refinements.