Build the first screen with fake data

You are going to build the whole screen before you build the database. This is on purpose, and it is how experienced teams do it too. Get the thing you can see right first. Then swap the fake data for real data underneath it, without touching the screen.

Everything running (Lesson 6, “Stopping and coming back”): the dev server in Terminal 1, Claude Code in Terminal 2 in manual mode, browser on localhost:3000.

Step 1: Describe the screen, in plan mode

Shift + Tab into plan mode. Then paste the whole thing:

Build the client tracker screen on the home page. For now, use fake data held in memory in the browser; there is no database yet. Do not install any new packages.

A client has: name (required), company, email, status, and notes. Status is one of: Lead, Active, Paused, Closed.

The screen has:
1. A heading "Client Tracker" and a count like "6 clients".
2. A list of clients. Each row shows name, company, email, a colored status pill (Lead gray, Active green, Paused amber, Closed red), and the first line of notes. Rows are sorted by name.
3. An "Add client" button that opens a form with the five fields. Name is required; show a message if it is empty. Status defaults to Lead. Saving adds the client to the list and closes the form.
4. Each row has an Edit button that opens the same form pre-filled, and a Delete button that asks "Delete this client?" before removing.
5. An empty state when there are no clients: "No clients yet. Add your first one."

Start with six made-up clients so the list is not empty.

Keep it simple and clean. Readable on a phone. Use the Tailwind setup that is already in the project.

Before writing anything, tell me the plan: which files you will create or change, and how the pieces fit together. Explain it for a non-developer.

Read the plan. You are checking three things:

It is only touching files in the app folder (and maybe a new components folder). Nothing about databases, packages, or configuration.
It mentions all five parts of the screen.
It says the data is temporary, in memory, and will vanish on refresh. That is what you asked for.

If all three are true, approve the plan with manually approve edits. If it wants to install a package or add a database, say no and repeat: “No new packages, no database yet. Fake data in memory.”

Step 2: Look at it like a customer

When Claude says it is done, go to the browser. Do not read code. Use the app.

Are there six clients, sorted by name?
Click Add client. Leave the name blank, click save. Does it complain?
Fill it in, save. Is the new client in the list, in the right sorted position?
Click Edit on someone. Change their status. Does the pill change color?
Click Delete. Does it ask first? Does the row go away? Does the count go down?
Delete everyone. Do you see the empty state?
Make the browser window narrow, like a phone. Is it still usable?
Refresh the page. Everything is back to the six fake clients. That is correct; it is fake data.

Write down what is wrong. There is usually something.

Step 3: Fix one thing at a time

For each thing on your list, one prompt. Examples of the shape:

The status pill colors are all the same gray. Lead should be gray, Active green, Paused amber, Closed red.

When I save a new client, the form stays open. It should close after saving.

On a narrow screen the email overlaps the status pill. Stack the fields vertically below 640px wide.

Look after each one. Do not batch them. If a fix breaks something else, tell it exactly that: “That fixed the pill colors but now the Edit button is gone. Put it back.”

The three-round rule from Lesson 4 applies. If the same problem survives three attempts, stop. Ask “Explain in plain English why this keeps failing,” read it, and if it is not obvious, commit what works and ask a person.

Step 4: Ask what it decided for you

List every decision you made that I did not ask for: component structure, how the data is stored, anything you guessed about behavior. One line each.

You will get a list. Some of it will be things like “I put the form in a separate component” (fine) and “I made email optional” (fine, you said only name is required). Occasionally there is something like “I added a search box” that you did not ask for. Decide whether you want it. It is your app.

Step 5: Commit

Commit everything with the message "Client tracker screen with in-memory data" and push to GitHub.

Check github.com. The commit is there.

What you should notice

You did not write a line of code. You wrote a specific description, read a plan, tested like a user, and corrected one thing at a time. That is what a product manager does with a developer.

You also did not get a database, on purpose. The screen survives the next three lessons untouched, because you separated “what it looks like” from “where the data lives.”

Check your work

All five parts of the screen work: list, add, edit, delete, empty state.
Name is required and the form says so.
Status pills have four different colors.
It is usable on a phone-width window.
You refreshed and got the six fake clients back (expected).
Committed and pushed.

If something went wrong

The page is blank or shows an error overlay. Copy the error text from the overlay or Terminal 1 into Claude Code: “The page shows this error. Fix it.”

Claude built a database anyway. Ask: “Remove the database code and any packages you installed. Fake data in memory only.” Then check git status through Claude (“what files have changed?”) and make sure it is back to just app files.

It looks nothing like I described. Your prompt was probably fine; the plan-reading step was skipped. Ask Claude Code to “throw away every change since the last commit and take me back to it.” This deletes everything you did since that commit, which is what you want here. Then /clear and run Step 1 again, actually reading the plan this time.

It works but it is ugly. That is fine for now. One prompt: “Make this look clean and professional: more whitespace, a subtle border on each row, a readable font size.” Then move on. You can polish forever; do not.

Lesson 8 starts the database. Not by installing one on your laptop. By running one in a sealed box with Docker Compose, which you can start, stop, and throw away with one command.