Vibe Coding for Non-Engineers (2) — Your First Project, From Idea to App

Part 1 covered what vibe coding is and why now. This post shows what one hour actually looks like — step by step.

The goal: a personal Todo app running in your browser, in one hour. You won't write a line of code yourself.

Minutes 0–5 — Environment

Open a terminal and run (works on Mac, Linux, and Windows WSL):

# If you don't have Node.js yet (one-time)
# Mac: brew install node
# Windows: download from nodejs.org
 
# Install Claude Code
npm install -g @anthropic-ai/claude-code
 
# Make a project folder
mkdir my-todo-app
cd my-todo-app
 
# Start Claude Code
claude

When you type claude, it greets you. That's it. Now the conversation begins.

Minutes 5–15 — Pick the project

Three rules for a good first project:

1. Something you'll actually use (motivation)
2. Something visible (satisfaction)
3. Five to ten features, max (scope)

Candidates: a personal Todo list, a workout tracker, a vocabulary app, an expense tracker, a reading log.

We'll do the Todo app — simplest, results show fastest.

Send Claude the first message:

"I want to build a Todo app that runs on my computer. A web page in the browser. Data should be saved on my computer. Design clean and minimal. Use Next.js and Tailwind. Where do we start?"

Key — you don't need to know what "Next.js" or "Tailwind" mean to type them. Claude handles the rest.

Minutes 15–30 — First working version

Claude will respond with something like:

1. "I'll initialize a Next.js project."
2. Runs a command (npx create-next-app@latest .).
3. Creates the main page code.
4. "Now run npm run dev to start it."

Your job — do exactly what it says. You don't need to read the code yet.

When you run npm run dev, it tells you to open http://localhost:3000. Open it. There's an empty Todo screen.

Minutes 30–45 — Features

Once the basics work — add, delete, check off Todos — request features one at a time.

Request 1 — Persistence

"Right now Todos disappear on refresh. Save them to my browser's localStorage so they persist."

Claude rewrites the code. Refresh and check.

Request 2 — Categories

"Each Todo should have a category — Work, Personal, Workout — and a different color per category."

Request 3 — Due dates

"Add a due date to each Todo. If today is the due date, mark it red."

Request 4 — Dark mode

"Add a dark-mode toggle."

After each request — go to the browser, verify it works. If it doesn't, tell Claude immediately: "this part is broken," "I'd prefer it to behave this way."

Minutes 45–55 — Polish

Once features are in, the last layer is look:

"Make it Apple-style overall. System font, rounded corners, minimal palette, gentle hover lift on items."

Claude rewrites the CSS. You see it instantly.

To add icons:

"Add small check icons next to each Todo. Use the lucide-react library."

Minutes 55–60 — Ship to the internet (optional)

Running on your laptop is enough — but if you want a URL anyone can open:

"I want to deploy this to Vercel. Walk me through it."

Claude:

1. Walks you through pushing to GitHub.
2. Walks you through linking GitHub to Vercel.
3. Tells you the URL.

In five minutes you have https://my-todo-app-xxx.vercel.app. Share it.

What you learned in one hour

You:

• ✅ Built a working web app
• ✅ Wrote zero lines of code yourself
• ✅ Deployed it to the internet
• ✅ Will be faster next time

Is it OK that you can't read code yet? For now, yes. The next post addresses where that breaks.

Five conversation patterns

A good vibe-coding conversation tends to have this shape:

1. Start — the big picture

"I want to build X. Should have Y and Z. Design like [reference site]."

2. Small change

"Make this text larger and the color gray."

3. Bug report

"When I press the button, the console shows 'TypeError: ...' Fix it."

4. Intent clarification

"The desktop is fine, but it breaks on mobile. Make mobile work."

5. New direction

"This approach feels overcomplicated. Is there a simpler way?"

In your first thirty conversations, you'll use all five. Then it's habit.

Five common pitfalls

1. Starting too big. Todo app — fine. "Instagram for X" — not yet.
2. Skipping verification. Verify each step in the browser before requesting more.
3. Vague error reports. "It doesn't work" loses time. "Error: Cannot find module 'next'" gets fixed instantly.
4. Reading Claude's reply, not running the commands. When it gives you a command, run it.
5. Not using Git. When something breaks, you can't undo. Next post covers this.

Next

Part 3 — Long-term: principles non-engineers should know covers:

• The limits of "I don't read code"
• Security and maintenance traps
• When to bring in a real engineer
• The compounding power of small tools

After your first hour, you're already ahead of 99% of people who said "I'm not a developer."

Decide your next project now.