2.3: Build & Iterate

What is a Development Server?

A development server runs your code locally so you can see it as a website.

Key things to know:

It only works on your computer (not public)
It lets you test and iterate before going live
It must keep running while you’re viewing the site
Stop it with Ctrl+C in the terminal

What is Localhost?

localhost means your own computer acting as a server.

When you see:

localhost:3000

This means port 3000 on your machine.

The :3000 is just a port number—like different doors into your computer. Different apps use different ports to avoid conflicts.

Important: This is NOT a real URL. Nobody else can access it. You’ll get a real URL when you deploy in lesson 2.5.

What is Plan Mode?

Plan mode is a Claude Code feature where Claude shows you the plan before executing.

How to use it:

Toggle with Shift+Tab
Good for big tasks where you want to review first
You approve the plan, then Claude builds

For complex builds, this lets you ask questions and make adjustments before any code is written.

Why Iteration Matters

The first version is never perfect.

This is normal and expected.

Professional development is always:

build → review → refine → repeat

The difference with AI: Iterations take seconds instead of days. So don’t settle—keep refining until you love it.

The Screenshot Trick

This technique will change how you communicate with Claude Code.

Ctrl+V (not Cmd+V on Mac!) pastes images directly into Claude Code.

This is powerful for iteration:

Take a screenshot of what’s wrong
Circle the problem or point at it
Paste it and describe what you want different

Why this works: Visual feedback is faster than describing problems in words. Instead of typing “the button on the right side seems misaligned,” you screenshot it, draw an arrow, and say “move this up 10px.”

Screenshot tips

Use your OS screenshot tool to capture specific regions
Annotate with arrows or circles to highlight issues
Combine screenshots with brief descriptions
Screenshot the browser window, not your entire screen

The Build Process

Step 1: Start the build

Tell Claude:

Build the quiz app based on REQUIREMENTS.md

Claude reads your requirements and creates the app.

Step 2: Start the dev server

Start the development server

Your browser opens to localhost:3000 showing your app.

Step 3: Review and iterate

Look at what Claude built. Something not right?

Screenshot the issue
Paste with Ctrl+V
Describe the change

[pasted screenshot]
Make this button bigger and move it to the center

Step 4: Repeat until done

Keep iterating until you’re satisfied. Each round should get closer to your vision.

Troubleshooting

”npm: command not found”

Node.js isn’t installed.

Fix: Download from nodejs.org, install it, then restart your terminal.

”Port 3000 already in use”

Another app is using that port.

Fix: Either:

Close other terminal windows running servers
Ask Claude to use a different port

Browser didn’t open

Fix: Manually go to http://localhost:3000

Blank page

Fix:

Check terminal for errors (red text)
Open browser console: F12 → Console tab → look for red errors

Changes not showing

Fix:

Did you refresh the browser?
Is the dev server still running?

Style looks wrong

Fix: Clear browser cache:

Mac: Cmd+Shift+R
Windows: Ctrl+Shift+R

Or try an incognito/private window.

The Iteration Mindset

The right amount of iteration is whatever it takes to ship something you’re proud of.

With AI, iteration is cheap. Use this to your advantage:

Try wild ideas – Easy to undo
Experiment with alternatives – “Show me this in blue instead”
Say “actually, let’s try something different” – No sunk cost

This is the new way to build.

Common Iteration Requests

Make the font bigger on mobile

Add more space between these sections

Change the background color to a light gray

Make this animation smoother

Add a loading spinner while calculating results

Ready to build? Run start 2-3 to create your quiz app.