How to Vibe Code Your First Web App

Build and deploy with Claude Code in minutes

Vibe coding is a new way to build software. Instead of writing every line yourself, you describe what you want and let AI do the heavy lifting. This guide will show you how to vibe code your first web app using Claude Code and deploy it instantly with itsalive.co.

What is Vibe Coding?

Vibe coding means describing what you want in plain English and letting an AI assistant write the code. You focus on the what, not the how. It's like having a skilled developer who can read your mind.

With Claude Code, you can:

What You'll Need

Installing Node.js

Node.js lets you run JavaScript tools like our deployment CLI. Here's how to install it:

Mac & Windows: Download the installer from nodejs.org and run it. Choose the LTS version.

Linux: Use your package manager:

# Ubuntu/Debian
sudo apt install nodejs npm

# Or use nvm (recommended)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install node

Verify it's installed by running node --version in your terminal.

Step 1: Set Up Your Project

Create a new folder and initialize it with itsalive:

mkdir my-first-app
cd my-first-app
npx itsalive-co

Pick a subdomain and verify your email. This sets up your deployment pipeline - every time you run npx itsalive-co, your app goes live.

Step 2: Start Claude Code

Open Claude Code in your project folder:

claude

You're now in a conversation with Claude. It can see your files and create new ones.

Step 3: Describe What You Want

Tell Claude what to build. Be specific about what you want, but don't worry about how to build it. Here are some example prompts:

A Personal Portfolio

> Build me a personal portfolio website. I want a hero section
> with my name "Alex Chen" and tagline "Full-stack developer".
> Add sections for my projects and a contact form. Make it
> dark mode with a modern, minimal design.

A Todo App

> Create a todo app where I can add tasks, mark them complete,
> and delete them. Save the tasks to the database so they
> persist when I refresh. Use a clean, simple design.

A Recipe Collection

> Build a recipe collection app. I want to be able to add
> recipes with a title, ingredients list, and instructions.
> Let me browse all my recipes and search by ingredient.
> Make it look like a cozy cookbook.

Step 4: Watch Claude Work

Claude will create the HTML, CSS, and JavaScript files for your app. It knows about itsalive.co's built-in features:

You'll see files appear in your project as Claude writes them.

Step 5: Deploy

Once Claude finishes, deploy your app:

npx itsalive-co

In seconds, you'll get a live URL. Open it in your browser and see your app running!

Step 6: Iterate

Your app is live, but maybe you want changes. Just tell Claude:

> Change the background color to dark blue
> Add a button to export my data
> Make the fonts bigger on mobile
> Add a loading spinner when saving

Then deploy again:

npx itsalive-co

This is the vibe coding loop: describe → deploy → refine → repeat.

Tips for Better Results

Be Specific

Instead of "make it look good", try "use a dark background with purple accents and rounded corners on the cards".

Describe the Experience

Tell Claude how users should interact: "when I click a task, it should expand to show details" or "the form should shake if there's an error".

Reference What Exists

If you want changes, reference what's already there: "make the header sticky" or "add a delete button next to each item".

Ask for Explanations

Want to learn? Ask Claude to explain: "explain how the database saving works" or "why did you use flexbox here?"

Example: Building a Habit Tracker

Here's a complete example session:

$ mkdir habits && cd habits
$ npx itsalive-co
? Subdomain: my-habits
? Email: me@example.com
✔ Verified!

$ claude
> Build me a habit tracker. I want to:
> - Add habits with a name and target frequency (daily/weekly)
> - Check off habits each day
> - See a streak counter for each habit
> - View a weekly summary
> Save everything to the database. Make it motivating
> with nice colors and maybe some confetti when I
> complete all habits for the day.

Claude creates index.html, styles.css, app.js...

> This is great! Can you add a dark mode toggle?

Claude updates the files...

$ npx itsalive-co
✔ Uploaded 3 files
✨ https://my-habits.itsalive.co

What's Next?

Now that you've built your first app, explore more:

Happy vibing!