Vibe Coding in 2026 - Michael Visser

A no-fluff walkthrough of the modern AI-coding stack for people who've never opened a terminal in their life.

Why I'm writing this

A lot of people I talk to have an idea for an app. A small tool. A dashboard. A side project that solves an actual problem in their life or work. They poke around online, hear about "vibe coding," watch a YouTube video, and within ten minutes they're staring at six different signup screens, a terminal that won't stop yelling at them, and a vague sense that maybe they're not cut out for this.

You are cut out for this. The stack is beginner-friendly now in a way it wasn't five years ago. The reason most guides feel impossible is that they assume you already know the words. This one doesn't.

By the end, you'll have a working app (built mostly by AI, with you steering) that lives on the internet at a real URL. No prior coding experience required. The only thing I assume is that you can install software, follow instructions in order, and not panic the first time something goes wrong. It will go wrong. That's the job. We'll cover that.

A few notes before we start:

This is the toolkit, not a specific build. I'm not going to walk you through one cookie-cutter app. I'm going to set you up with the right tools, in the right order, so you can build whatever you actually want.
Most of this is free to start, with one real cost. GitHub, Convex, Clerk, and Vercel all have free tiers that are enough to build and ship a real working app. The one thing you'll probably pay for is the AI itself. Cursor and Claude Code both run about $20/month for real use, though each has a limited free option so you can test the waters first. Everything else, you can start on for nothing.
Read the whole thing once before you do anything. Seriously. The mental model matters. If you skip ahead and start clicking install buttons, you're going to get confused about why you're doing what you're doing.

Let's go.

The mental model: what each tool does, in plain English

Before we install anything, you need to understand the cast of characters. There are six. Each one does exactly one thing. If you understand what each one is for, the rest of the guide makes sense. If you don't, every step will feel arbitrary.

Here's the team you're hiring:

GitHub is where your code lives. Think of it as Google Drive for your project, except every change you make is tracked, so you can rewind if you break something. It's also how everything else in this stack talks to your project. You won't really "use" GitHub day-to-day, but nothing else works without it.

Cursor or Claude Code is your editor. This is where you actually do the work. Both of them have an AI built in that writes the code for you. You describe what you want in English, the AI writes it, and you review it. We'll cover both, and you can pick one.

Convex is the backend. Every app needs somewhere to store data: user accounts, posts, settings, whatever. Traditionally you'd need to set up a database server, write a bunch of plumbing, and pray it doesn't go down. Convex skips all of that. You write a function in plain code that says "save this thing," and Convex handles where it lives, how it's stored, and how it gets to your app.

Clerk handles login and signup. Building authentication from scratch is one of the most miserable experiences in software. People get hacked because they get it wrong. Clerk is a drop-in solution. You add a few lines of code and suddenly your app has signup, login, password reset, social login (Google, GitHub), and user profiles. You don't build any of it.

Vercel is where your app gets published. Once you've built something on your laptop, Vercel takes the code from GitHub and turns it into a real website at a real URL that anyone can visit. It also re-publishes automatically every time you make a change.

Claude (the AI) is your collaborator. Whether it's running inside Cursor or Claude Code, this is the model doing the actual writing. You're the director. The AI is the team.

That's it. Six things. Each one does one job. The reason this stack works for beginners is that none of these tools require you to understand the layer underneath them. You don't need to know what a database server is to use Convex. You don't need to know how OAuth works to use Clerk. You don't need to know what a build pipeline is to use Vercel.

You just need to know what each tool is for and which one to reach for when.

Order of operations (read this twice)

The single most common mistake beginners make is doing things out of order. Here's the order:

Create accounts on the services first. (No installs yet.)
Install the editor.
Connect the editor to the services.
Make your first project.
Run it, sign in, then make it do one tiny thing.
Deploy it.
Then start actually building your idea.

Steps 5 and 6 are the ones most guides skip. They walk you through setup, then drop you off at a blank screen and say "now build your dream app." That's how people quit. We're not going to do that.

Step 1: Create your accounts

Open these in browser tabs. Sign up for all of them. None of this requires a credit card unless noted. Use the same email for all of them. It makes connecting them later much easier.

GitHub

Go to github.com and sign up. Pick a username you don't hate, because it's going to show up in URLs.

After signing up, you'll be asked to verify your email. Do that. Then you're done with GitHub for now.

Vercel

Go to vercel.com and sign up. Importantly, sign up using your GitHub account (the "Continue with GitHub" button). This connects the two automatically, which saves you a step later.

Convex

Go to convex.dev and click Log in — the same screen handles new accounts too. Use the "Continue with GitHub" option. Convex's free tier is enough to build and run a real working app indefinitely. You only pay if your app starts getting real traffic.

Clerk

Go to clerk.com and sign up. Free tier covers up to 50,000 monthly retained users, which is more than you will need for a long, long time.

Anthropic (for Claude)

Go to claude.com and sign up if you haven't. If you're going to use Claude Code, you'll need a paid Claude plan (Pro is $20/month billed monthly, or $17/month billed annually — either covers it and also gives you Claude on the web), or API credits from the Anthropic console. If you're going to use Cursor, you don't strictly need this, because Cursor includes its own AI access in its subscription.

That's all the accounts. Don't close the tabs yet. You'll need them in a few minutes.

Step 2: Pick your editor (Cursor vs. Claude Code)

This is the one real choice you have to make. Both are excellent. They work differently. Pick one based on how your brain works.

Cursor

What it is: A code editor that looks and feels like a regular editor (it's based on VS Code, the most popular editor in the world), with an AI sidebar and inline AI features built in. You type your request in a chat panel, the AI suggests changes, you approve them.

Best for: People who want to see their code while it's being written. Visual learners. People who like having a clear "before and after" view of every change.

Cost: Free Hobby tier exists. Pro is $20/month billed monthly (or $16/month billed annually) and is what most people actually use day-to-day. The free tier is fine for a weekend of building, but you'll burn through it fast if you're building something real.

Get it: Go to cursor.com, download for your operating system, install like any normal app.

Claude Code

What it is: A command-line tool. Instead of clicking buttons in an editor, you type instructions to Claude in a terminal window, and Claude does the work: reading your files, writing new ones, running commands. It's more like having a junior developer you're chatting with than using an editor.

Best for: People who don't mind a terminal. People who like the feeling of "I describe the goal, the AI handles the steps." People who want the most powerful agent experience available.

Cost: Requires either a Claude Pro ($20/month billed monthly, or $17/month billed annually) or Claude Max subscription, or API credits. Pro is plenty for getting started.

Get it: Install is one command, covered in Step 3 below. (The current installer doesn't even need Node.js anymore.) Full docs: code.claude.com/docs.

My honest take

If you've never used a terminal, start with Cursor. The visual feedback loop is gentler. You can always switch later, and a lot of people end up using both.

If you're at all comfortable in a terminal, or want the absolute strongest agent experience, try Claude Code. It's wild what it can do unsupervised.

You don't need both. Pick one and commit.

Step 3: Install the foundations

Whichever editor you picked, you need a couple of things installed on your computer first. These are the building blocks your editor and the AI use to actually do work.

Node.js

What it is: A runtime that lets your computer run modern web code. Almost every tool in the modern web stack needs it, including Convex and the app you're about to build. You don't have to learn it. You just have to install it.

First, check whether you already have it. Open your terminal:

Mac: press Cmd+Space, type "Terminal," hit enter.
Windows: click Start, type "PowerShell," hit enter.

In that window, type this and press enter:

node --version

If you get a number back like v24.something, you already have Node. Skip to the next section.

If you get something like "command not found" or "not recognized," you need to install it. Here's how.

Mac and Windows (the simple way): Go to nodejs.org and click Download Node.js®. The page will show you some terminal commands first — scroll past those to the section that says "Or get a prebuilt Node.js® for…" and click the installer button (.pkg on Mac, .msi on Windows). That's the LTS version (version 24 as of this writing — LTS stands for "long-term support," which is the stable one you want). Run the installer. Click through every default option without changing anything. When it finishes, close your terminal, open a fresh one, and run node --version again. You should now see a version number.

If you're on a Mac and already use Homebrew: you can run brew install node instead. If you don't know what Homebrew is, ignore this line and use the installer above.

If you get stuck, the official download page with instructions for every system is at nodejs.org/en/download.

Git (only if you don't already have it)

What it is: The system that GitHub is built on. It tracks changes to your code.

Check first. In your terminal, type git --version. If you get a version number, you're done, skip ahead.

If you don't have it:

Mac: type xcode-select --install in Terminal and follow the prompts. (Git usually comes pre-installed on Mac, so you may never need this.)
Windows: go to git-scm.com, download the installer, and click through the defaults.

Your editor

If you picked Cursor: download and install from cursor.com like any normal app.

If you picked Claude Code: it now installs with a single command, and it no longer needs Node.js for itself (your project still uses Node, which is why you installed it above).

Mac or Linux: open your terminal and run:

curl -fsSL https://claude.ai/install.sh | bash

Windows: open PowerShell and run:

irm https://claude.ai/install.ps1 | iex

Both of these are Anthropic's official installers, served straight from claude.ai. Then close your terminal, open a fresh one, and run claude. It'll walk you through logging in with your Claude account. Full instructions live at code.claude.com/docs.

(You may still see older guides telling you to install with npm install -g @anthropic-ai/claude-code. That method was deprecated in early 2026. Use the command above instead.)

Step 4: Make your first project

Here's where most guides get tedious. We're going to keep it simple by using a starter template that has Convex and Clerk pre-wired together. You don't have to set up the plumbing yourself.

Open your terminal. Navigate to wherever you want your projects to live. (If you don't know what "navigate" means, just run cd ~/Documents to put yourself in your Documents folder.)

Then run:

npm create convex@latest

This kicks off an interactive prompt. It'll ask you a few questions:

Project name: Whatever you want. Use lowercase, no spaces. my-first-app is fine.
Choose a client: Pick React (Vite).
Choose user authentication solution: Pick Clerk.
Install packages: Yes.

When it finishes, you'll have a folder with your project in it. Open that folder in your editor:

In Cursor: File → Open Folder → pick the new folder.
In Claude Code: cd into the folder in your terminal, then run claude.

Connect Convex

Inside your project folder, run:

npx convex dev

The first time you run this, it'll open your browser, ask you to log in to Convex, and create a project for you. Just click through. When it's done, leave the terminal running. This is the live connection between your code and your Convex backend. Open a new terminal window for everything else from here on.

Connect Clerk

This is the one part with a few moving pieces, so go slow. The good news: if you picked the Clerk option when you ran the setup, most of the wiring is already done for you, and your project's README spells out the exact steps. Here's what's happening so it makes sense.

In your Clerk dashboard, create a new application and choose how you want people to sign in (email, Google, whatever you like). Clerk gives you a publishable key that starts with pk_. Copy it.

Find the file named .env.local in your project folder (create one if it's not there) and add your key. For a Vite project it looks like this:

VITE_CLERK_PUBLISHABLE_KEY=pk_test_yourkeyhere

Then connect Clerk to Convex. In the Clerk dashboard, find the Convex integration and activate it. That reveals a "Frontend API URL." Convex uses this to trust the logins Clerk hands it. Your README (and Convex's own setup screen) will tell you exactly where this value goes, which is usually a file called convex/auth.config.ts plus a matching setting on your Convex dashboard.

If that last paragraph felt like a lot, this is the perfect moment to lean on your AI. Paste your README into the chat and say: "Walk me through connecting Clerk to Convex step by step. I've already created my Clerk app and copied my publishable key." It'll guide you through the specific clicks.

(Exact variable names vary by template, which is why the README is your source of truth here, not this guide.)

That's the setup done. Next, let's actually look at what you built.

Step 5: Run it and sign in

Before you build anything, let's see what you already have.

You should still have npx convex dev running in its own terminal from the last step. That's your backend. Now start the front end. In your second terminal window, inside your project folder, run:

npm run dev

This starts your app on your own computer. The terminal will print an address, usually http://localhost:5173. Open that in your browser.

Here's the part most people don't expect: because you picked the Clerk template, your app already has a working sign-in built in. You didn't write it. It came in the box.

Click the sign-in button, create an account with your email, and sign in. If you land back on the app as a signed-in user, your database and your authentication are both working, and you haven't written a line of code yet.

If the sign-in throws an error, it almost always means the Clerk-to-Convex connection from the last step isn't finished. Jump back to "Connect Clerk," or paste the error into your AI and let it walk you through the fix.

Step 6: Make it do something

This is the step everyone skips, and it's the most important one. Don't try to build your whole app yet. Build one tiny thing end to end so you understand the loop.

Open your editor's chat panel (Cursor) or start typing in the terminal (Claude Code). Try this prompt:

Add a button to the home page that says "Click me." When a signed-in user clicks it, save the current timestamp to Convex and show a list of all the timestamps below the button. Only show the button to signed-in users.

Hit enter and watch what happens. The AI will:

Find your home page file.
Add the button.
Create a Convex function to save the timestamp.
Create another to fetch the list.
Wire it all up and gate it behind the login you already have.

Save (most editors auto-save, or hit Cmd/Ctrl+S) and refresh your browser.

Click the button. See a timestamp appear. Click it again. See another one. Sign out, and watch the button disappear.

That's the whole loop. You stored data in a real database, read it back, displayed it, and protected it behind a real login. The fact that it's a button with timestamps doesn't matter. You've now done the same thing every app does.

If something didn't work, that's fine. Skip down to the "When it breaks" section.

Step 7: Deploy it

Time to put it on the internet.

This part is almost embarrassingly easy with Vercel. Here's how:

Push your code to GitHub. In your editor, look for a "Source Control" panel (Cursor has one in the sidebar). It'll prompt you to publish your project to GitHub. Click yes. Choose to make it private if you don't want strangers reading your code.
Go to vercel.com and import the project. Click "Add New Project," find your repo in the list, click Import.
Add your environment variables. Vercel will ask if you have any. You do. Open your .env.local file, copy each line, and paste them into Vercel's environment variables form.
Connect Convex to your deployment. Convex needs to publish a production version of your backend whenever Vercel builds your app. The clean way: in your Convex dashboard, generate a production deploy key, add it to Vercel as an environment variable called CONVEX_DEPLOY_KEY, and set your Vercel build command to npx convex deploy --cmd 'npm run build'. Convex's "Deploying to Vercel" guide walks through this in about two minutes, and your template README likely has the exact values. If you get stuck, paste the README into your AI and ask it to walk you through the Vercel setup.
Click Deploy.

Two or three minutes later, you'll get a real URL. Visit it. Your app is live. You can text it to a friend.

One important heads-up about authentication on the live URL: Clerk does not support the default .vercel.app subdomain for production. Your app will load, but the login button will fail. To fix it, you need a custom domain: buy one (Vercel sells them, or use any registrar), add it to your Vercel project under Settings → Domains, and add it in your Clerk dashboard under Domains. Your template README or a quick AI prompt ("How do I add a custom domain to my Clerk + Vercel app?") will walk you through it in about five minutes.

From now on, every time you push a change to GitHub, Vercel re-deploys automatically. You don't have to think about it.

When it breaks (because it will)

Here's the truth nobody tells you: things break constantly. The difference between people who finish projects and people who don't isn't talent. It's how they react when something doesn't work. Most beginners hit an error, panic, and assume they're bad at this. They're not. They're just doing the normal thing.

Here's what to do.

Read the error message

Sounds obvious. Most people don't. The error is usually telling you exactly what's wrong. Slow down and read it.

Show it to the AI

This is the superpower. Copy the entire error (every line of red text) and paste it into your editor's chat. Add: "I'm getting this error. What's wrong and how do I fix it?"

The AI will, more often than not, just fix it. Sometimes it'll need you to tell it what you were trying to do when the error happened. Sometimes it'll guess wrong and you'll need to say "that didn't work, here's what happened next." Treat it like a back-and-forth with a friend who knows the answer but needs context.

When the AI keeps suggesting the same broken fix

This happens. The AI gets stuck in a loop. When it does, do one of these:

Open a fresh chat. Sometimes the previous context is poisoning the suggestions.
Tell it explicitly what didn't work: "You suggested X. I tried it. Here's what happened. Try a different approach."
Step away. Seriously. Close the laptop. Come back in an hour. You'll see the answer.

When you've changed too much and don't know what broke

Use Git to rewind. In your editor's source control panel, you can see every change you've made since the last save point. You can undo them. If you've completely tangled yourself up, your AI can use Git to roll back to an earlier version. Just ask: "Roll my project back to the last commit."

This is why GitHub matters. It's your safety net. You can always go back.

What to build first

People often ask me what they should build. Here's my opinion:

Don't build your dream app first. Build something small and ugly that solves a real annoyance in your week. A tracker. A list. A form that emails you when someone fills it out. A dashboard that shows you one number you care about.

The reason: your dream app probably has fifteen features. You'll get stuck on feature three and quit. A small ugly thing has one feature, you'll finish it, and finishing teaches you more than any tutorial.

Once you've shipped one tiny thing, the next one will be twice as easy. By the third, you'll start to understand what's actually possible. Then build the dream app.

While your first deploy runs, make yourself a drink

Every project deserves a proper send-off. While Vercel is doing its thing, make homemade Sprite.

I finally made it from scratch and now the canned stuff tastes like a distant memory. Fresh lemon, fresh lime, real sugar, and sparkling water just hit on a whole different level. Be honest — the only reason the drive-thru Sprite feels elite is the fountain mix ratio, not the label.

The magic here is a zested simple syrup. Instead of dissolving plain sugar in water, you rub lemon and lime zest directly into the sugar first. The oils from the skin infuse into the granules before a drop of water touches them, and the result is a syrup that tastes like citrus the way citrus actually smells — bright, a little floral, nothing like a bottle of concentrate.

function homemadeSpriteSimpleRecipe() {
  return {
    name: 'Homemade Sprite',
    syrup: {
      ingredients: [
        { ingredient: 'Zest of 3 lemons', amount: '' },
        { ingredient: 'Zest of 6 limes', amount: '' },
        { ingredient: 'Sugar', amount: '1 cup' },
        { ingredient: 'Boiling water', amount: '~1 cup' },
      ],
      instructions: [
        'Place sugar in a medium bowl.',
        'Rub lemon and lime zest into the sugar with your hands until fragrant and fully incorporated.',
        'Pour in boiling water and whisk until the sugar dissolves.',
        'Strain through a fine sieve to remove the zest. Let cool.',
      ],
    },
    toServe: {
      ingredients: [
        { ingredient: 'Lemon-lime syrup', amount: '¼ cup (or to taste)' },
        { ingredient: 'Fresh lime juice', amount: '½ lime' },
        { ingredient: 'Sparkling water', amount: 'to top, chilled' },
        { ingredient: 'Ice', amount: 'as needed' },
      ],
      instructions: [
        'Fill a glass with ice.',
        'Add syrup and fresh lime juice.',
        'Top with sparkling water and stir gently.',
      ],
    },
    note: 'Homemade Sprite loses fizz quickly — it cannot trap CO₂ the way a sealed can does. Drink it fresh. That is not a bug; that is the point.',
  }
}

console.log(homemadeSpriteSimpleRecipe())

Once you have a jar of that syrup in the fridge, it starts calling to you. It is too good to only use for sparkling water. So the next logical step is to build a drink around it — something with a little more backbone. Enter Lemon Lime Bitters.

Four dashes of Angostura take the sweetness somewhere more interesting. The equal split of fresh lemon and lime juice keeps everything bright without tipping into sour. The syrup ties it all together. It is not a cocktail, which means anyone at the table can have one, but it drinks like something you ordered at a bar that actually cares.

function lemonLimeBitters(syrup) {
  return {
    name: 'Lemon Lime Bitters',
    base: syrup.name,
    ingredients: [
      { ingredient: 'Fresh lemon juice', amount: '1 oz' },
      { ingredient: 'Fresh lime juice', amount: '1 oz' },
      { ingredient: `${syrup.name} syrup`, amount: '1½ oz' },
      { ingredient: 'Angostura bitters', amount: '4 dashes' },
      { ingredient: 'Club soda', amount: 'to top' },
      { ingredient: 'Ice', amount: 'as needed' },
    ],
    instructions: [
      'Combine lemon juice, lime juice, syrup, and bitters in a glass.',
      'Add ice and stir to combine.',
      'Top with club soda and stir gently until incorporated.',
    ],
  }
}

const syrup = homemadeSpriteSimpleRecipe()
console.log(lemonLimeBitters(syrup))

Make the syrup once on a Sunday afternoon and it keeps in the fridge for two weeks. You will find yourself reaching for it more than you expect — sparkling water when you need something simple, Lemon Lime Bitters when you want something worth talking about.

The canned stuff will keep collecting dust.

A short list of things that will save you

A few hard-won lessons:

Commit your code often. Every time something works, save it to GitHub. (In Cursor's source control panel, type a quick message like "added the button" and click commit, then sync.) This way, when you break things later (and you will), you can always rewind.
One feature at a time. Don't ask the AI to "build a whole user dashboard with charts and exports and notifications." Ask it to build the dashboard with one chart. Then add the second chart. Then add the export. Big asks confuse the AI and confuse you.
Read what the AI did. You don't have to understand every line, but skim it. Get a feel for what's happening. Over time you'll start to notice patterns and recognize what good code looks like for your project.
When you're confused, ask the AI to explain it like you're new. "I'm new to this. Walk me through what this code is doing in plain English." It'll happily teach you.
Don't paste in API keys or passwords in the chat. Treat your .env.local file as private. Never paste secrets into a public chat or commit them to GitHub. (GitHub will actually warn you if you try.)

The real point

The reason this works isn't that AI has magically replaced developers. It's that the modern stack (Convex for the backend, Clerk for auth, Vercel for hosting, Cursor or Claude Code as the editor) has made the gap between "I have an idea" and "I have a working app" smaller than it has ever been. The AI just makes it faster to cross.

You don't need permission to build something. You don't need a dev team. You don't need a computer science degree. You need an idea you care about, a free afternoon, and the patience to learn one tool at a time.

The first project will feel slow. The second will feel like cheating. By the fifth, you'll wonder why you ever thought this was hard.

Go build something.