Your First Vibe-Coded App

Do not ask the AI to create the project structure. Use the official generator — it is faster, it is correct, and it gives the AI a familiar layout to work in.

$ npx create-next-app@latest habit-tracker$ cd habit-tracker$ npm run dev

Accept the defaults when it asks. Then open http://localhost:3000 in your browser — you should see a starter page. Leave this terminal running; it rebuilds the site every time you save.

Open the folderin your AI tool. Now write a prompt that says what you want, what it should look like, and what not to touch. Notice how much more this says than “make a habit tracker”:

Replace the contents of the home page with a simple habit tracker. It should:- let me type a habit name and add it to a list- show each habit with a checkbox for today- keep the list in React state (no database yet) Keep it to the existing home page file. Do not add any newdependencies. Use the styling approach already in the project.

Four things are doing the work there: the goal, the specific behaviours, the constraints, and the boundary of what may change. Drop any one of them and the reply gets noticeably worse.

The temptation is to accept and refresh. Resist it for sixty seconds and skim the diff, asking three questions:

1. 1
   Did it change only what I asked?

   New files or edits outside the home page mean the scope leaked.

2. 2
   Can I follow what it does?

   Not every line — but the shape. Where is the list stored? What happens when I click add?

3. 3
   Did it invent anything?

   A new dependency, an import from a file that does not exist, a hook you did not ask for.

Then save and look at the browser. It reloads by itself.

Now the part that actually teaches you something. Ask for one change at a time, and check the result after each one:

Add a delete button next to each habit. Show a count at the top: "3 of 5 done today". If the list is empty, show "No habits yet — add one above"instead of an empty list.

Three small prompts beat one large one, for a reason worth internalising early: when something breaks, you know exactly which change broke it. That is the entire argument for small diffs, and you just felt it rather than being told it.

It will. A white screen, or red text in the terminal. This is the normal state of building software, not evidence you did something wrong.

Copy the entire error — not your summary of it — and paste it back with what you were doing:

I added the delete button and now the page is blank.Here is the full error from the terminal: [paste the whole error here]

Every remaining chapter is a deeper look at one of those six things. If the app is ugly and the code is imperfect, that is fine — it runs, and you can explain what it does.