Your First Vibe Coding Project

What You'll Build

By the end of this tutorial, you'll have a working todo app with:

Add, edit, and delete tasks
Mark tasks as complete
Filter by status (all, active, completed)
Clean, modern design
Responsive mobile layout

The best part? You'll describe what you want in plain English, and AI builds it for you.

Step 1: Set Up Bolt.new

Head to Bolt.new and sign in with your Google account. You'll see a clean interface with a chat box—this is where the magic happens.

Bolt.new is a vibe coding platform that lets you build web applications by describing them conversationally. It uses Claude Sonnet 3.5 to generate code, preview it live, and iterate based on your feedback.

Step 2: Your First Prompt

Instead of writing code, you'll write a clear description of what you want. Here's a good starting prompt:

"Create a modern todo list app with the following features:
- Add new tasks with an input field and button
- Display tasks in a clean list
- Each task has a checkbox to mark complete
- Completed tasks get a strikethrough style
- Delete button for each task
- Filter buttons: All, Active, Completed
- Use a minimal, modern design with Tailwind CSS
- Make it responsive for mobile"

Notice how specific this prompt is. Good vibe coding prompts describe both functionality and style clearly.

Step 3: Watch the Magic

After hitting send, Bolt.new will:

Generate the code - You'll see React components, HTML, CSS being created in real-time
Show a live preview - The right side displays your working app immediately
Explain what it built - The AI describes the structure and key features

In about 30-60 seconds, you'll have a functional todo app. Try it out! Add tasks, mark them complete, test the filters.

Step 4: Iterate and Improve

The real power of vibe coding is how easy it is to make changes. Just describe what you want differently:

Example iteration prompts:

"Add a dark mode toggle"
"Make the add button green and larger"
"Add a counter showing how many tasks are left"
"Change the font to something more playful"
"Add a 'Clear completed' button at the bottom"

Each change happens in seconds. The AI understands context from your previous conversation, so you don't need to repeat everything.

Real Example: Adding Persistence

Right now, your tasks disappear when you refresh. Let's fix that:

"Save the tasks to localStorage so they persist when I refresh the page"

Bolt.new will update the code to use browser storage. Refresh the page—your tasks are still there!

Understanding the Code (Optional)

You don't need to understand the code to use vibe coding, but peeking at it helps you learn. Click the code view in Bolt.new to see:

Component structure - How React organizes the UI
State management - How data flows through the app
Styling patterns - Tailwind CSS utility classes
Event handlers - What happens when you click buttons

Over time, you'll start recognizing patterns and can make smarter requests.

Common Mistakes to Avoid

❌ Vague prompts

Bad: "Make a todo app"

Good: "Make a todo app with checkboxes, delete buttons, and filters for all/active/completed"

❌ Too many changes at once

Make one or two changes per prompt. This makes it easier to catch issues and understand what changed.

❌ Not testing before iterating

After each change, click around and test the app. Find issues early before they compound.

Next Project Ideas

Once you're comfortable with the todo app, try these beginner-friendly projects:

Expense tracker - Track daily spending with categories
Recipe organizer - Save and search your favorite recipes
Habit tracker - Build streaks for daily habits
Simple calculator - Practice with buttons and state
Quote generator - Display random inspirational quotes

Troubleshooting

Preview isn't updating

Try refreshing the preview pane or restarting Bolt.new. Sometimes the connection hiccups.

AI misunderstood my request

Rephrase more specifically. Include examples of what you mean. You can say "No, I meant..." and clarify.

Feature broke after an update

Use Bolt.new's version history to roll back. Or tell the AI: "The delete button stopped working after the last change, please fix it"

Going Beyond Bolt.new

Bolt.new is perfect for learning and prototypes, but you might want more control or custom features. Check out Reinventing.AI for done-for-you AI solutions that can turn your vibe-coded ideas into production apps.

For more advanced vibe coding workflows, explore platforms like v0.dev by Vercel or Replit's AI features.