Skip to content
GrowthVector.io

Getting Started

What Vibe Coding Is

What is Vibe Coding?

On February 2, 2025, Andrej Karpathy (founding member of OpenAI, former Director of AI at Tesla) posted a casual tweet describing a new way of building software: "fully give in to the vibes, embrace exponentials, and forget that the code even exists." That tweet hit 4.5 million views and launched a global movement. By November 2025, Collins Dictionary named "vibe coding" its Word of the Year.Y Combinator reported that 25% of its Winter 2025 batch had codebases that were 95% AI-generated.Then in February 2026, Karpathy declared vibe coding "passé" and coined "agentic engineering" as its successor term, signaling the practice had matured from novelty into a structured discipline.

The Three-Layer Spectrum

Pure Vibe Coding

Zero code reading. You accept all AI-generated changes, paste error messages without comment, and treat the AI as a black box. This is Karpathy's original definition and the version most critics target.

Simon Willison: "If an LLM wrote every line of your code, but you've reviewed, tested, and understood it all, that's not vibe coding. That's using an LLM as a typing assistant."

High Risk

Assisted Coding

AI generates, you review at a high level, test manually, and make judgment calls. This is where most productive non-technical builders actually operate. In practice, experienced reviewers reject or refine a large share of AI suggestions rather than accepting them wholesale.

Where Most Builders Are

AI-Accelerated Development

Experienced developers using AI to multiply their output. The human owns the architecture, quality, and correctness. AI handles implementation.

Addy Osmani (Chrome engineering lead): "Vibe coding = YOLO. Agentic engineering = AI does the implementation, human owns the architecture."

Lowest Risk

What You Can Build

What You Can Build vs. What Fails

Works Well

  • Landing pages with static content, forms, and basic animations
  • CRUD apps (create, read, update, delete) with standard database operations
  • Personal tools like fridge content analyzers, podcast transcribers, habit trackers
  • Data dashboards pulling from APIs or databases to display charts and tables
  • Browser games with simple mechanics (Pieter Levels built a flight simulator prototype in 3 hours)
  • Admin panels for managing users, content, or internal data
  • SaaS MVPs with basic authentication, payments, and 3-5 core features

Consistently Fails

  • Real-time collaboration (chat, live updates, presence indicators) requires carefully coordinated state management that AI can't reliably produce
  • Complex fintech logic involving multi-step calculations, compliance rules, and edge cases
  • Novel algorithms that require original problem-solving beyond pattern matching
  • Physics simulations (Al Sweigart found LLMs failed at pinball physics, circular mazes, and snow globe effects with no fix possible through re-prompting)
  • Apps exceeding the context window where the AI loses track of the full codebase, creating contradictions and duplicate components

The Spiral of Death

Once your project enters this pattern, more prompting makes it worse. Recognize the warning signs early and either roll back to a working commit or restructure your approach.

  • Same bug, different face: You fix one issue and it reappears as a new variant. Each fix introduces a fresh regression.
  • Whole-project modifications: Simple changes (like updating a button color) require edits across multiple files because the code structure has become tangled.
  • AI rewrites its own code: The AI suggests completely rewriting logic it generated an hour ago, indicating it lost context or the architecture was never sound.
  • Debugging exceeds building: You spend more time pasting error messages and chasing fixes than actually adding features.

Real Success Stories

Creator Buddy

Alex Finn built an AI tool for analyzing X posts. Non-technical founder, used Claude Code + Next.js + Supabase. 2,639 hours over 10 months.

$300K ARR

TrendFeed

Sebastian Volkis built an AI content discovery platform. Prototype in 4 days with Next.js, GPT-4, Claude, Replit. $12K revenue in first four weeks.

~$12K in 4 weeks

Fly (Flight Sim)

Pieter Levels built a multiplayer browser flight simulator. Initial prototype in 3 hours using Cursor AI + Three.js. Went viral after Elon Musk shared it, and Levels reported roughly $1M annualized revenue within about 17 days.

~$1M ARR (self-reported)

Vibed Agents

Paulius deployed autonomous AI agents using Claude Code + MCP. Couldn't git commit 9 months before launch. Now has 30K+ users across 10+ apps.

~$9K MRR (self-reported)

Lumoo

AI fashion platform built entirely on Lovable. Reached significant traction within 9 months of launch.

€800K ARR

ShiftNex

Healthcare staffing platform built on Lovable. Achieved product-market fit rapidly in the healthcare vertical.

€1M ARR in 5 Months

Ignyt Labs

Prajwal Tomar systematized an agency shipping MVPs in 21 days using Dribbble + Lovable + Cursor + Claude Code.

45+ MVPs Shipped

Invoice Micro-SaaS

Illustrative pattern (not a specific verified company): a builder ships an invoice tool with Claude + Stripe in 72 hours for about $80 in AI costs and lands paying customers early.

Illustrative

Survivorship Bias Warning

For every success story above, many more builders burned through credits and abandoned their projects. Revenue claims in the Substack/X ecosystem are difficult to independently verify. Many "non-technical" founders had adjacent skills (product management, design, data analysis) that made them effective prompt engineers. Treat these stories as possibility, not probability.

Literacy & Terminal

Conceptual Software Literacy

You don't need to write code to build with AI, but you do need to understand these six concepts. Without them, you won't be able to describe what you want or debug what goes wrong.

Client vs. Server

The client is what runs in the user's browser (the "frontend"). The server is a separate computer that runs your backend code, processes business logic, and communicates with databases. When someone visits your site, their browser (client) sends requests to the server for data.

Frontend vs. Backend vs. Database

Frontend is what users see and interact with: buttons, pages, and forms. Backend is the logic that runs behind the scenes: processing payments, verifying passwords, sending emails. The database is where all persistent data lives: user accounts, posts, products, and orders.

APIs

APIs are messengers between systems. Your frontend asks the API "give me this user's posts," the API talks to the backend and database, then returns the result. When you integrate Stripe or Supabase into your app, you are communicating through their APIs.

Authentication vs. Authorization

Authentication verifies who you are (login with email and password). Authorization determines what you can do (admin vs. regular user permissions). AI frequently confuses these two concepts, so always specify both explicitly in your prompts.

State Management

State is how your app remembers things while a user interacts with it: items in a shopping cart, which tab is selected, data typed into a form. Poor state management is where most vibe-coded apps break down, causing lost data and inconsistent UI.

Environment Variables

Secret settings (API keys, database URLs) stored outside your code in .env files. They keep secrets out of your codebase and let you use different configurations for development vs. production. Never commit these files to Git.

Essential Terminal Commands

Navigation
pwdPrint your current directory (where am I?)
lsList files in current folder. Use ls -la to show hidden files.
cdChange directory. cd .. goes up one level.
mkdirCreate a new folder.
touchCreate an empty file.
rmDelete a file. rm -rf foldername deletes folders. No undo.
cpCopy files or folders.
mvMove or rename files.
Package Management
npm installDownload all packages listed in package.json.
npm run devStart the development server (usually at localhost:3000).
npm run buildCreate a production-ready build of your project.
pip installInstall Python packages.
npxRun a package without installing it globally (e.g. npx create-next-app).
Git (Your Parachute)
git initStart tracking a project with Git.
git cloneDownload a copy of a remote repository.
git statusSee which files have been changed.
git add .Stage all changes for the next commit.
git commit -mSave staged changes with a description.
git pushUpload commits to GitHub or another remote.
git pullDownload and merge changes from the remote.
git diffSee exactly what lines changed.
git checkoutSwitch branches or revert specific files.
git branchList, create, or delete branches.
git stashTemporarily save uncommitted changes.
git logView commit history. Add --oneline for a compact view.
Process and Environment
Ctrl+CStop a running process (like a dev server).
catDisplay the contents of a file in the terminal.
echoPrint text or variable values to the terminal.
whichFind where a program is installed on your system.
clearClean the terminal screen.

Pro Tips: Press Tab to auto-complete file and folder names. Press Up Arrow to cycle through previous commands. Never type the $ you see in tutorials, it just means "type this in the terminal."

Environment, Files & Errors

Setting Up Your Dev Environment

Why nvm (Not a Direct Node Install)

Different projects require different Node.js versions. Without nvm, switching means uninstalling and reinstalling. Direct installs also cause the "EACCES permission denied" error because they write to system directories.

nvm installs everything in your home directory, so there are no permission issues. You can switch versions instantly with nvm use 20 and lock project versions via .nvmrc files.

# Install nvm (macOS/Linux/WSL)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.5/install.sh | bash
# Restart terminal, then:
nvm install --lts

Why pyenv (Not System Python)

macOS and Linux ship with a system Python that other OS tools depend on. Modifying it can break your computer. pyenv gives you isolated Python versions per project, just like nvm does for Node.

# Install pyenv on macOS
brew install pyenv pyenv-virtualenv

macOS Setup

Install Homebrew first. It's the standard package manager for macOS and a prerequisite for most development tools. The built-in Terminal.app works fine. iTerm2 is nicer but optional.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Windows Setup (WSL2, Not PowerShell)

The entire web development ecosystem assumes Unix commands. Use WSL2, which gives you a real Linux environment inside Windows. Store project files in WSL (~/projects/), not on the Windows drive, for performance. Install Windows Terminal from the Microsoft Store.

# Run from Administrator PowerShell
wsl --install
# This installs WSL2 + Ubuntu

Linux Setup

Use apt as your package manager. Always run sudo apt update first to refresh package lists, then install the essentials.

sudo apt update
sudo apt install git curl build-essential

What Every File Means

When you open an AI-generated project for the first time, you'll see files and folders you didn't create. Here's what each one does and whether you should touch it.

package.json

Your project's ID card. Lists all dependencies (libraries your app uses), scripts (shortcuts like npm run dev), and project metadata. This is the first file to check when joining any project.

node_modules/

Contains all downloaded packages. Never edit it, never commit it to Git. If something breaks, delete this entire folder and run npm install to regenerate it from scratch.

package-lock.json

Records the exact version of every installed package for reproducibility. Always commit this file. It ensures that everyone working on the project gets identical dependencies.

.gitignore

Tells Git which files to skip when committing. Typically includes node_modules/, .env.local, .next/, and .DS_Store. Anything auto-generated or secret belongs here.

.env / .env.local

Stores secret API keys and database URLs. Never commit these to Git. Bots actively scan GitHub for exposed keys and will find them within minutes. Always add these files to .gitignore.

tsconfig.json

Configures TypeScript compiler settings: strict mode, path aliases, module resolution. Rarely needs manual editing for new projects. AI tools generate sensible defaults.

next.config.js

Configures Next.js: image domains, redirects, environment variable exposure, and build settings. You may need to edit this when adding external image sources or custom headers.

src/app/ Directory

Each folder becomes a URL route. app/page.tsx is your homepage. app/about/page.tsx maps to /about. The app/api/ folder contains server-side API endpoints.

components/ and public/

components/ holds reusable UI pieces (buttons, headers, modals) shared across pages. public/ stores static files (images, fonts, favicon) accessible directly at root URLs like /logo.png.

Common Error Messages

These eight errors account for the majority of beginner frustration. Each one has a straightforward fix.

command not found: node

Meaning: Node.js isn't installed, or your terminal can't locate it.

Fix: If using nvm, run nvm install --lts then restart your terminal. If nvm itself isn't found, re-run the nvm install script.

EACCES: permission denied

Meaning: You're trying to write to a system-level directory that requires admin access.

Fix: Install Node.js through nvm instead of directly. nvm installs to your home directory, avoiding permission conflicts entirely.

Module not found: Can't resolve 'xxx'

Meaning: A package isn't installed, or the import path contains a typo. Paths are case-sensitive.

Fix: Run npm install. Verify the import path spelling and casing. If still broken, delete node_modules/ and reinstall.

EADDRINUSE :::3000

Meaning: Another process is already using port 3000. Usually a dev server from a previous session.

Fix: Check other terminal tabs and press Ctrl+C to stop old servers. On macOS/Linux, run lsof -i :3000 then kill -9 PID.

ERESOLVE could not resolve

Meaning: Two or more packages require conflicting versions of a shared dependency.

Fix: Run npm install --legacy-peer-deps to bypass strict version matching. This is safe for most projects.

.env file not found

Meaning: Your app expects secret configuration that hasn't been set up yet.

Fix: Look for a .env.example file. Copy it with cp .env.example .env.local, fill in your actual API keys, and restart the dev server.

CORS error

Meaning: Your frontend is being blocked from calling an API on a different domain. This is a browser security feature.

Fix: This must be fixed on the server side, not the client. Use Next.js API routes as a proxy, or configure CORS headers on your backend server to allow requests from your frontend domain.

git push rejected

Meaning: The remote repository has commits that your local branch doesn't have yet.

Fix: Run git pull origin main first to download remote changes. Resolve any merge conflicts if prompted, then push again.