A complete beginner's guide to vibe coding — from setting up your tools to deploying a real, live app.
Vibe coding is the practice of building software by describing what you want in plain English to an AI — and letting the AI write the actual code. You don't need to memorize syntax, know every framework, or spend years learning programming. You guide the AI with your intent, your taste, and your judgment.
The term was coined by AI researcher Andrej Karpathy. The idea: instead of fighting with code, you vibe with it — you stay in a creative flow, iterating quickly by talking to an AI like a collaborator.
Think of yourself as an architect. You don't lay every brick — you design the building, describe what you need, and your AI contractor builds it. Your job is to have vision, spot problems, and keep iterating until it's right.
For the first time in history, anyone with an idea can build software. A teacher can build a classroom tool. A small business owner can build a custom booking system. A designer can build their own portfolio app. The barrier is no longer "can I code?" — it's "can I describe what I want clearly?"
Vibe coding doesn't mean you never understand what's happening. The best vibe coders learn as they go — asking the AI to explain things, understanding the big picture, and building real intuition over time.
Google AI Studio (aistudio.google.com) is where you have your conversation with the AI to build your app. Describe what you want in plain English, and it generates the code files. But here's the thing — generating code is only half the journey. You also need to get that code:
That's exactly what this guide will teach you.
Before you can build anything, you need a few things set up. This section walks you through each one. The good news: you only have to do this once.
A GitHub account (stores your code), a Vercel account (publishes your app), and Node.js installed on your computer. You'll also want a code editor — VS Code is the most popular free option.
Before opening any tools, create a folder on your computer where your project will live. Put it somewhere easy to find — your Desktop or Documents folder works great.
Name it carefully: Use only English letters, numbers, and hyphens. No spaces, no special characters. Good: my-first-app. Bad: My First App!
VS Code is a free code editor made by Microsoft. You don't need it to build in AI Studio, but it's extremely useful for viewing your files, editing small things, and running terminal commands. Go to code.visualstudio.com and download it for your operating system.
Think of AI Studio as your architect's desk where you design and build. VS Code is like the site office — you visit it to check on things, make small tweaks, and manage files. Most of your time will be in AI Studio.
Node.js is the engine that runs your web app locally on your computer. You need it installed before you can preview or deploy anything. Go to nodejs.org and download the LTS version (the one labelled "Recommended for most users").
To confirm it installed correctly, open a terminal and type:
node --versionYou should see a version number like v20.11.0. If you see that, you're good.
The Vercel CLI lets you deploy your app from the terminal with a single command. Open your terminal (in VS Code: press Ctrl + `, or search "Terminal" on your computer) and run:
npm i -g vercelAI Studio is where you'll actually build your app by describing what you want. Go to aistudio.google.com, sign in with your Google account, and start a new project. Describe your app in plain English — AI Studio will generate the code files for you.
When your app is ready, AI Studio will let you export or download your project files. Save them into the project folder you created in Step 1.
Be specific when describing your app. Instead of "make a website," say "make a one-page website with a contact form, a heading that says my name, and a dark background." The more detail you give, the better the result.
Once your project files are in your folder, you can preview the app on your own computer before deploying it. Open a terminal, navigate to your project folder, and run:
npm run devThen open your browser and go to http://localhost:3000. You'll see your app running live. Every time you save a file, the browser updates automatically — this is called hot reload.
"Localhost" just means "this computer." Your app is running locally — visible only to you, not the internet yet. Think of it as a dress rehearsal before the real show.
API stands for Application Programming Interface. It sounds intimidating, but the idea is beautifully simple: an API is a way for two pieces of software to talk to each other.
Imagine a restaurant. You (the customer) don't walk into the kitchen and cook your own food. Instead, you tell a waiter what you want. The waiter goes to the kitchen, gets your food, and brings it back. The waiter is the API — a middleman that takes requests and returns results, without you needing to know how the kitchen works.
When your app needs to send an email, it doesn't manage mail servers itself. Instead, it calls Resend's API and says: "Hey Resend, please send this email to this address." Resend handles all the complexity and replies: "Done! Here's confirmation."
Every API call has a few key parts:
The URL you send your request to. Like https://api.resend.com/emails. Think of it as the restaurant's address.
What you're asking for — and any data you're sending along. Like your order to the waiter.
A secret password that proves you're allowed to use the API. You get this when you sign up for a service.
What the API sends back — usually data or a confirmation. Like your food arriving at the table.
API Keys are passwords. Never share them publicly, never put them directly in your code files, and never post them on the internet. This is one of the most common (and costly) beginner mistakes. We'll cover the safe way to handle them in the next section.
Now that you know API keys are secrets, here's how you actually keep them secret: environment variables.
An environment variable (or "env variable") is a value that lives outside your code — in the environment where your code runs. Your code can read it, but it's never written into the code files themselves. This means it never gets accidentally shared.
Think of your code as a recipe. The recipe says "add 1 tsp of SECRET_SPICE" — but it doesn't say what that spice is. The actual spice is written on a separate locked card that only the chef (your server) can see. The recipe is safe to share. The spice card stays private.
Env variables live in a file called .env (or .env.local) in your project folder. It looks like this:
# .env.local — this file stays on YOUR computer, never uploaded
NEXT_PUBLIC_SUPABASE_URL=https://yourproject.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6...
RESEND_API_KEY=re_abc123yourKeyHere
DATABASE_URL=postgresql://user:password@host/dbIn your code, instead of writing a secret directly, you write:
// ❌ WRONG — never do this
const apiKey = "re_abc123actualSecretKey";
// ✅ CORRECT — reference the variable name
const apiKey = process.env.RESEND_API_KEY;Your project will have a file called .gitignore. It tells GitHub: "Do NOT upload these files." Your .env.local file must always be in there.
# .gitignore
.env
.env.local
.env*.local
node_modules/When your app is live on Vercel, the .env.local file isn't there — it only exists on your computer. Instead, you enter your environment variables directly in Vercel's dashboard under Project Settings → Environment Variables. Vercel keeps them secure and injects them when your app runs.
Secrets go in .env.local on your machine, and in Vercel's Settings dashboard when deployed. They never go directly into your code.
GitHub is a website that stores your code online, tracks every change you've ever made, and lets you collaborate with others. Think of it as Google Drive — but specifically designed for code, with a powerful history of every edit.
Imagine writing a novel where every time you saved, you could add a note like "Chapter 3 — added villain backstory." One month later, you could scroll back through every single save and restore any version. That's what GitHub does for your code. It's a time machine with labels.
A folder on GitHub that holds all your project's files and their complete history. One project = one repo.
A saved snapshot of your code at a specific moment, with a message describing what changed. Like a "save point" in a video game.
Uploading your local commits from your computer to GitHub. Like syncing your files to the cloud.
A parallel version of your code where you can experiment safely without breaking the main version.
Here's the magic: Vercel watches your GitHub repo. Every time you push new code to GitHub, Vercel automatically sees it and re-deploys your app. You never have to manually upload files. Your workflow becomes:
Go to github.com and sign up. Choose a username you're comfortable with — it may appear in your app's URL at first.
In the top-right corner of GitHub, click the + button, then choose "New repository" from the dropdown.
Give your repo a name (e.g. my-first-app). Set it to Private. Do not check any of the "Initialize" options — leave them all blank. Then click "Create repository."
After creating the repo, GitHub shows a setup screen. Click the HTTPS tab and copy the URL — it looks like https://github.com/yourusername/my-first-app.git. You'll need this to connect your project.
git remote add origin https://github.com/yourusername/my-first-app.git
git branch -M main
git push -u origin mainOn the empty repo page, click "uploading an existing file" (the blue link in the setup instructions). Drag and drop all your project files in. Add a commit message like "initial upload" and click Commit changes.
After making changes to your code, return to your repo, upload the updated files, and commit again. Good commit messages — "add contact form" not "stuff" — will save you when something breaks.
Commit often. Commit every time you finish a meaningful chunk of work. Good commit messages — "add contact form" not "stuff" — will save you hours when something breaks.
Vercel is a hosting platform that takes your code from GitHub and publishes it to the internet — automatically, instantly, and for free. It gives your app a real URL that anyone in the world can visit.
GitHub is like your manuscript saved on your computer. Vercel is the printing press and bookstore combined — it takes that manuscript and puts it in front of the world. And every time you update the manuscript, the bookstore automatically updates its version.
Vercel handles all the hard infrastructure so you don't have to think about it:
yourapp.vercel.app URL instantlyyoursite.com) when you're readyGo to vercel.com and sign up. Use the "Continue with GitHub" option — this links your accounts together automatically.
Click "Add New → Project". Vercel will show your GitHub repos. Find your project and click "Import."
Before clicking Deploy, scroll down to "Environment Variables." Add each key-value pair from your .env.local file here. This is how your live app gets its secrets securely.
Hit the Deploy button. Vercel builds your app (usually 30–90 seconds) and gives you a live URL. Share it with the world. 🎉
Your default URL will be something like my-first-app-abc123.vercel.app. You can shorten it in Project Settings → Domains.
Every git push to your main branch automatically triggers a new deployment. Your live site updates within a minute of pushing code. No extra steps.
Important — watch for this during CLI deployment: The terminal may ask Enable Vercel Authentication? (y/N). You must type n and press Enter. If you accidentally select yes, your site will only be visible to you — not the public. If this happens, go to your Vercel project settings and disable authentication.
Supabase gives your app a real database — a place to permanently store and retrieve data. Users, posts, orders, settings — anything your app needs to remember lives here. It's like a giant, always-on spreadsheet your code can read and write to.
Your app without a database is like a whiteboard — it can show things while you're looking at it, but erases everything when you leave. Supabase is the filing cabinet behind the whiteboard. Information goes in, stays in, and can be retrieved any time by anyone, from anywhere.
Go to supabase.com and sign up. Click "New Project," name it, choose a region near your users, and set a strong database password (save it somewhere safe).
In your project, go to Settings → API. You'll find two keys: your Project URL and your anon public key. Copy both.
Add these to your local env file:
NEXT_PUBLIC_SUPABASE_URL=https://yourproject.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOi...In your Vercel project, go to Settings → Environment Variables and add both Supabase variables there too, so your live app can connect.
In Supabase, go to Table Editor → New Table. Give it a name and add your columns. Your AI assistant can generate the exact SQL to run in Supabase's SQL editor to set up tables for you — just describe what data you want to store.
Ask your AI: "Generate the Supabase SQL to create a table for [your use case]." It will write the exact commands. Paste them into Supabase's SQL Editor and click Run.
Resend is an email API that lets your app send real emails — welcome messages, password resets, notifications, receipts. You can't use your personal Gmail for this at scale, so Resend acts as a professional mail-sending service your code can call.
You wouldn't personally hand-deliver every letter your business sends. You'd use a postal service. Resend is that postal service for your app's emails — you hand it the message and the address, it handles delivery, tracking, and making sure it doesn't end up in spam.
Go to resend.com and sign up. The free tier lets you send 3,000 emails/month — more than enough to start.
In the dashboard, go to API Keys → Create API Key. Name it (e.g., "my-app-key"), click Create, and copy the key immediately — it's only shown once.
RESEND_API_KEY=re_yourKeyHere123Then add the same variable in Vercel's Settings → Environment Variables.
For production, go to Domains → Add Domain and follow the steps to verify your domain. This lets you send from [email protected]. For testing, Resend gives you a default sending address.
Important: The Resend API key should only be used on the server side of your app — never in code that runs in the browser. Your AI will know this, but it's worth understanding: RESEND_API_KEY (without NEXT_PUBLIC_) stays on the server only.
Here's something nobody tells beginners: every developer sees errors constantly. Errors are not a sign that you're doing something wrong — they're just the computer telling you something needs adjusting. With AI as your partner, errors become conversations, not roadblocks.
You are not here to learn to code. You are here to build something real. The AI handles the syntax. Your job is to describe, review, and iterate. Errors are just part of that conversation.
It built something different from what you wanted. Just say so: "That's not quite what I meant. What I actually want is ___" and re-explain. Be more specific this time.
In your terminal or browser. Don't panic — this is actually great information. Copy the entire error message and paste it into the AI chat with: "Fix this error." The AI knows exactly what it means.
No error message, but the behaviour is wrong. Describe what you expected vs. what's actually happening: "When I click the button, nothing happens. It should submit the form."
You'll see something like Continue? (y/N). The uppercase letter is always the default — pressing Enter selects it. If you're unsure, just press Enter and ask the AI afterwards if you chose correctly.
The browser's built-in developer tools are your debugging best friend. Right-click anywhere on your app's page and choose "Inspect" (or press F12). Click the Console tab — any errors your app is throwing will appear here in red.
When you see a red console error: select it, copy it, paste it into Cursor's AI chat with "fix this." Nine times out of ten, the AI solves it instantly.
The AI is your senior developer sitting next to you. You don't need to understand every error — you just need to show it to them. "Hey, I got this — can you fix it?" That's a completely valid workflow.
Once your app is working and you're ready to save your progress and update the live site, run these three commands in your terminal (or ask VS Code's terminal):
# Save your changes to GitHub
git add .
git commit -m "describe what you changed"
git push
# Then redeploy (if not auto-deploying)
vercel --prodMake this a habit every time you finish a meaningful change. Your live site will update within about 30 seconds.
You now know every piece. Here's how they connect in your live app:
Here is the exact order of operations for your first deployment:
Describe what you want, iterate, and get to a version you're happy with. Don't aim for perfect — aim for working.
Create your accounts, get your API keys, and set up any tables you need. You need the keys before you can configure anything else.
Add all your API keys to .env.local. Test that your app works locally with these keys.
Make sure .env.local is in your .gitignore. Then commit and push all your code files to your GitHub repo.
Import your GitHub repo in Vercel. Before you click Deploy, add every key from your .env.local into Vercel's Environment Variables settings.
Click Deploy. Wait for the build. Visit your live URL. Test every feature — forms, auth, emails. If something's broken, check your env vars first (this is almost always the cause).
Before you share your URL with anyone, go through every item below. Print this out or work through it on screen.
node --versionnpm i -g vercellocalhost:3000.gitignore includes .env.local and node_modules/main branch.env.local locallyRESEND_API_KEY added to .env.localIf you've made it through this checklist, your app is live on the internet. That's not a small thing. Most people who want to build something never do. You just did. Now keep going — iterate, add features, share it. The hardest deployment is always the first.