Vibe Coding Tutorial: Ship a Full-Stack App in 30 Minutes Without Writing Code

What Is Vibe Coding (One Paragraph)

Vibe coding means describing what you want in natural language and shipping the AI-generated code without reading it. Andrej Karpathy coined the term in February 2025, describing how he built entire projects by talking to Cursor Composer with Claude Sonnet, accepting whatever code it produced. The key distinction from normal AI-assisted development: you do not review the code. You prompt, run it, and if the app works, you move on. Simon Willison drew the line: if you reviewed the code, tested it, and can explain how it works, that is software development. Vibe coding specifically means shipping code you have not read.

Pick Your Tool

Vibe coding tools split into two categories. App builders generate complete applications from a conversation. IDE agents work inside an editor or terminal and are better suited for developers who review output.

For this tutorial, we use Replit because it requires zero local setup. No terminal, no package managers, no IDE. Everything runs in the browser. You get 1 million free tokens per month, which is enough to build and deploy a full-stack app.

The prompting patterns and workflow apply to every tool. If you prefer Cursor, Lovable, or Bolt, follow the same steps with your tool of choice.

The 30-Minute Tutorial: Build a Task Manager

We are building a task manager with a frontend, backend, database, and user authentication. Users can sign up, create tasks, mark them complete, and delete them. The UI is clean and minimal. This is a real full-stack app, not a static page.

Total time: 20-30 minutes depending on how specific your prompts are.

Step 1: Start a New Project

Go to replit.com and create an account. Click Create Repl and select Agent as your starting point. This gives you Replit's AI agent, which can plan, write code, install packages, and debug, all from your natural language instructions.

You should see a chat interface on the left and a code editor and preview panel on the right. The chat is where you will do all your work.

Step 2: Write Your First Prompt

This is the step that determines whether you ship in 30 minutes or spend 3 hours going in circles. A vague prompt produces a vague app. A specific prompt produces a working product.

Build me a task manager app.

Build a task manager web app with these requirements:

Tech stack: Next.js, Tailwind CSS, SQLite database
Authentication: Email/password signup and login
Features:
- Users can create tasks with a title and optional description
- Tasks show in a list, sorted by creation date (newest first)
- Users can mark tasks as complete (strikethrough style)
- Users can delete tasks
- Each user only sees their own tasks

UI: Clean, minimal design. White background, subtle gray borders,
blue accent color for buttons. Mobile responsive.

Start with the database schema and authentication,
then build the task CRUD, then the UI.

Notice the difference. The good prompt specifies the tech stack, the features, the UI style, the data model, and the build order. The AI does not have to guess any of this. Each decision you make explicitly is a decision the AI does not make randomly.

Step 3: Review the Plan

After you submit your prompt, the AI outlines the steps it will take. On Replit, this appears as a plan with numbered steps: set up the project structure, create the database schema, build the auth system, implement task CRUD, design the UI.

Read the plan before approving. If the AI chose a tech stack you did not specify, or if it is building features in an order that does not make sense, correct it now. Fixing a plan costs you 30 seconds. Fixing code after the AI built the wrong thing costs you 10 minutes or a full restart.

The plan looks good but change two things:
1. Use SQLite instead of PostgreSQL (simpler for this project)
2. Build authentication before the task features, not after

Step 4: Let It Build

Approve the plan and let the AI work. It writes files, installs npm packages, sets up the database, and generates the frontend. A live preview appears as it builds.

Do not interrupt mid-build. Interrupting while the AI is writing code across multiple files leads to half-finished states that are harder to fix than starting over. Let it complete the full build, then assess the result.

Once it finishes, click around the preview. Try to sign up, create a task, mark it complete, delete it. Note every thing that is broken or does not look right. You will fix them in the next step.

Step 5: Fix What's Wrong

Your first build will not be perfect. That is expected. Vibe coding is an iterative loop: prompt, build, test, fix, repeat.

The critical discipline here is one fix per prompt. Do not stack multiple changes into a single message. Each prompt should describe a single, testable change.

Fix the login error, also make the task list wider,
and add a dark mode toggle, and the delete button
should have a confirmation dialog.

When I click "Sign Up" with valid credentials, I get a blank
screen instead of being redirected to the task list. The browser
console shows "TypeError: Cannot read property 'id' of null".
Fix the signup flow so it redirects to the task list after
creating the account.

When you find a bug, include what you expected, what happened instead, and any error message you see. If the AI-generated fix does not work on the first try, paste the new error message and let it try again. Most bugs resolve within 2-3 iterations.

Step 6: Add Features One at a Time

Once the base app works, add features incrementally. Each feature gets its own prompt, its own test pass, and its own verification.

Prompt 1: "Add a search bar above the task list that
filters tasks by title as the user types."
→ Test it. Does search work? Does clearing the search
  show all tasks again?

Prompt 2: "Add task due dates. Show an optional date picker
when creating a task. Display overdue tasks in red."
→ Test it. Does the date picker work? Do overdue tasks
  turn red? Do tasks without dates still work?

Prompt 3: "Add a toggle to show/hide completed tasks.
Default to showing all tasks."
→ Test it. Does the toggle work? Does it persist across
  page refreshes?

This step-by-step approach is the difference between a vibe-coded app that works and one that collapses under its own complexity. Every tutorial that teaches vibe coding emphasizes this point: small, testable increments. The AI handles complexity better in narrow slices than in broad strokes.

Step 7: Deploy

On Replit, click Publish. The platform bundles your app, sets up hosting, configures SSL, and gives you a public URL. Your app is live in under a minute.

On other platforms:

• Lovable: One-click deploy to a hosted URL
• Bolt.new: Export to Netlify or download the code
• Cursor: Push to GitHub and connect to Vercel or Netlify
• v0: Export the React component and integrate into your project

Total elapsed time from account creation to deployed app: 20-30 minutes.

Real Examples of What People Have Built

Vibe coding has moved past the toy demo stage. People are shipping real products with real users and real revenue.

The pattern across these examples: the builders had a clear idea of what they wanted, used specific prompts, iterated quickly, and kept the scope manageable. None of them tried to build everything in one prompt.

Prompting Patterns That Work

After researching dozens of vibe coding guides and compiling tips from Supabase, Peter Yang, Replit, and experienced vibe coders, these are the patterns that consistently produce better output.

1. Structure your prompts in layers

Supabase recommends a three-layer structure: technical context (stack, framework, constraints), functional requirements (what it does from the user perspective), and architectural decisions (database schema, auth approach, state management). Each layer reduces ambiguity.

CONTEXT: Next.js 14 app with Tailwind CSS, Supabase for
auth and database. Mobile-first responsive design.

REQUIREMENTS: Users can upload a photo of a receipt.
The app extracts line items using OCR, categorizes each
expense (food, transport, utilities), and shows a monthly
spending breakdown as a bar chart.

ARCHITECTURE: Store receipts in Supabase Storage. Parse
with Tesseract.js. Categories stored in a lookup table.
Chart rendered with Recharts.

2. One prompt, one change

Every experienced vibe coder converges on this rule. When you stack multiple requests into a single prompt, the AI often gets the first one right and botches the rest. One change per prompt. Test after each change.

3. Include visual context

Peter Yang's top tip: a screenshot is worth a thousand words to an AI. When you want the AI to fix a UI bug or match a specific design, paste a screenshot into the chat. When you want it to build something that looks like an existing product, include a reference image. Most vibe coding tools support image inputs.

4. Ask the AI to plan before coding

Before a complex feature, prompt: "Outline your approach before writing any code." This forces the AI to explain what it will do, giving you a chance to catch over-engineering or wrong assumptions before any code is generated. Supabase calls this "separating planning from implementation."

5. Set explicit constraints

Research shows that explicit constraint lists improve output quality without extra iterations. Maximum file length, allowed libraries, naming conventions, error handling patterns. The more constraints you provide, the less the AI has to guess.

Constraints:
- No external state management libraries (use React state)
- Maximum 200 lines per file
- All API routes return JSON with { data, error } shape
- Use Tailwind only, no inline styles
- All forms must have loading states and error messages

6. Debug with error messages, not descriptions

When something breaks, do not say "the login is broken." Open the browser console (F12 or right-click and Inspect, then Console tab), copy the exact error message, and paste it into the chat. The error message contains the file, line number, and exception type. That is 10x more useful to the AI than your description of the symptom.

7. Checkpoint before risky changes

Before asking the AI to refactor something that is already working, make sure you can get back to the current state. On Replit, the AI creates automatic checkpoints. On Cursor or Claude Code, commit to git. If the refactor goes wrong, roll back instead of trying to fix forward.

When Vibe Coding Fails

Vibe coding has predictable failure modes. Understanding them prevents you from running into walls that waste hours.

Silent business logic errors

The most dangerous failure mode. The app runs without errors, but it does not do what you asked. A shopping cart that adds tax wrong. A scheduling app that ignores time zones. A form that saves data to the wrong table. These bugs are silent because no error message fires. The only way to catch them is to test every feature manually with realistic data.

Security vulnerabilities

45% of AI-generated code contains security flaws. A December 2025 study found 69 security vulnerabilities across 15 applications built with five vibe coding tools, including hardcoded credentials, SQL injection, cross-site scripting, and server-side request forgery in every tool tested. If your app handles user data, passwords, or payments, get a developer to review the security-critical paths before launching.

The local fix problem

When you report a bug, the AI fixes it where the symptom appears, not where the root cause lives. It adds a null check instead of fixing the data that should never be null. It catches an exception instead of preventing it. Over time, local fixes accumulate into a codebase full of band-aids. The fix: when a bug keeps recurring, tell the AI "this is a symptom. Find and fix the root cause, not this specific error."

Context window exhaustion

Every prompt and response accumulates in the AI's context window. After 20-30 minutes of active prompting, the AI starts losing track of earlier instructions. Prompts that worked 10 minutes ago stop working. The fix: start a fresh session. On Replit, begin a new Agent session. On Cursor, use Cmd+L for a new chat. On Claude Code, run /clear.

Scope creep spiral

You built a working task manager in 30 minutes and now you want to add real-time collaboration, rich text editing, file attachments, notifications, and a mobile app. Each feature adds complexity that compounds with every other feature. The AI handles the first two additions fine. By the fifth, it is breaking things it already built. The fix: know when to stop vibe coding and start engineering. If the app needs more than 10-15 features, it needs architecture, not more prompts.

The Infrastructure That Makes Vibe Coding Possible

When you prompt an AI to build an app, three infrastructure layers do the real work. Most users never see them. They determine whether the experience is magical or miserable.

Fast apply models

When a vibe coding tool edits your project, the LLM does not rewrite the entire file. It generates a diff: "add this function after line 42, change this import, delete this block." A fast apply model takes that diff and merges it into your existing code deterministically. The speed of this merge step determines how fast the edit-preview cycle feels. Morph's fast apply model processes these merges at 10,500+ tokens per second, making the edit feel instantaneous. Without a fast apply layer, every edit requires regenerating the full file, which is slower, more expensive, and more error-prone.

Sandboxed execution

AI-generated code is untrusted by definition. You do not know what it does until it runs. Sandbox environments isolate each user's project in its own container, so a buggy or malicious piece of generated code cannot access your real system, other users' projects, or the host machine. Every serious vibe coding platform runs code in a sandbox. Replit, Bolt, and Lovable all use container-based isolation. The sandbox also enables live previews: the code runs in an isolated environment and streams the result back to your browser.

Code search and context

The AI needs to understand your existing code before it can modify it correctly. On a single-file project, this is trivial. On a project with 50+ files, the AI needs code search to find the relevant files, understand the data model, and trace how components connect. Without good code search, the AI generates code that ignores your existing patterns, duplicates logic that already exists, or breaks imports it did not know about. This is why the best vibe coding tools invest heavily in codebase indexing.

Frequently Asked Questions

What is vibe coding?

Vibe coding means describing what you want in plain English and letting an AI tool write the code without reviewing the output. The term was coined by Andrej Karpathy in February 2025. You prompt, run the result, and if it works, you move on.

Can I vibe code with no programming experience?

Yes. Tools like Replit, Lovable, and Bolt.new run entirely in the browser and require zero programming knowledge. 75% of Replit users never write code directly. The limiting factor is how clearly you can describe what you want, not whether you can write code.

What is the best tool for beginners?

Replit for zero-setup browser-based development. Lovable for non-technical founders building full-stack apps. Bolt.new for the fastest path to a throwaway prototype. All three have free tiers. See our full vibe coding tools comparison for details.

How long does it take to build a full-stack app?

A basic app with frontend, backend, database, and authentication takes 20-30 minutes with specific prompts. Bolt.new averages 28 minutes to a working prototype. More complex apps with multiple features take a few hours of iterative prompting.

What can go wrong?

Security vulnerabilities (45% of AI-generated code has flaws), silent business logic errors, accumulating technical debt, and context window exhaustion after long sessions. These are manageable for prototypes but dangerous for production. See our full breakdown of vibe coding risks.

What are the best prompting tips?

Be specific about the outcome, not the implementation. One change per prompt. Include screenshots for UI issues. Set explicit constraints (tech stack, file limits, naming conventions). Ask the AI to plan before coding. Debug with error messages, not descriptions.

Is vibe coding the same as using an AI coding assistant?

No. Vibe coding specifically means accepting code you have not reviewed. Using an AI coding assistant while reading and testing the output is standard AI-assisted development. Simon Willison: if you reviewed it, tested it, and can explain it, that is software development, not vibe coding.

Can I build a production app with vibe coding?

You can build a working app, but shipping it to production without code review is risky. The recommended approach: vibe code the prototype, then have a developer review security-critical paths before launch. Or use an agentic coding tool where AI output is reviewed before shipping.