Building & Deploying Web Apps: A Practical Guide

A streamlined approach to building and shipping web applications using VS Code, Claude Code, Vercel, and modern tooling—no Lovable required.

Optimized for flexibility, visibility, and low ongoing cost.

Part 1: The Stack & Flow

What I Use and Why

This is my stack for building web apps quickly without sacrificing control or code quality. Each tool has a specific job, and together they create a workflow that goes from idea to live production app in hours, not days.

The Core Stack:

VS Code + Claude Code

VS Code is the editor, Claude Code is the AI pair programmer that lives inside it. I use a Claude Pro or Max subscription to power it. The combination means I can describe what I want in plain English and get working code, then iterate rapidly. It's like having a senior developer who never gets tired and knows every framework.

Supabase

My database and backend. It's PostgreSQL under the hood, but it gives me auth, real-time subscriptions, storage, and edge functions without configuring servers. I set it up once per project, design my schema in SQL, and I'm done. No separate auth service, no separate storage solution, no separate API layer to build.

GitHub

Version control and the bridge between my local machine and production. Every project lives in a repo. Every commit is tracked. Every change has history.

Vercel

Where things get deployed. It connects directly to GitHub, watches my repo, and automatically deploys every push to main. It handles SSL, gives me a global CDN, manages environment variables, and creates preview URLs for every branch. No server configuration, no DevOps headaches.

GoDaddy

(or any DNS provider) is where I buy domains. Once I have a domain, I point it at Vercel with a few DNS records and I'm done.

I only do this when I want to control the URL for my prototype or application. This is the last step, the step that makes it feel "real".

The Flow: How I Actually Build

Step 1: Build It Locally

I create a new project directory, initialize it with my framework of choice (usually Next.js or Vite), and fire up Claude Code. From there, it's an iterative conversation with the AI:

  • "Build me a landing page with a hero section and pricing table"
  • "Add authentication with Supabase"
  • "Create a dashboard that shows user activity"

I test everything locally as I go. The dev server runs on localhost, and I can see changes in real-time. When something works, I commit it to git. When I'm ready for the next feature, I ask Claude Code to build it.

The key insight here: I'm not writing every line of code myself, but I'm directing the architecture. I decide what gets built and review what Claude Code produces. It's a collaboration.

Step 2: Set Up the Database

While building, I create a Supabase project, grab the API credentials, and add them to my .env.local file. I design my database schema using SQL in Supabase's editor—tables, relationships, indexes, Row Level Security policies.

Step 3: Push to GitHub

When the app works locally, I push my code to a GitHub repo. This is standard git workflow: initialize the repo if I haven't already, add a .gitignore to exclude sensitive files and dependencies, commit everything, and push to a new GitHub repository.

Step 4: Deploy on Vercel

I log into Vercel with my GitHub account, click "New Project," and select the repo I just pushed. Vercel auto-detects my framework, suggests build settings, and I add my environment variables (the Supabase credentials). Then I click deploy.

Three minutes later, my app is live on a *.vercel.app domain. Every subsequent push to main automatically triggers a new deployment.

Step 5: Add a Custom Domain

If I want a real domain (not just myapp.vercel.app), I buy one on GoDaddy, then add it in Vercel's domain settings. Vercel tells me exactly which DNS records to create. I copy those records into GoDaddy's DNS manager, wait 10-60 minutes for DNS propagation, and the site is live on my custom domain with automatic SSL.

What This Gives Me

I have complete control over my code. Unlike no-code or low-code tools, I can see every line, modify anything, and switch frameworks if I want. But I'm not writing boilerplate or fighting with deployment configurations.

I get professional infrastructure: global CDN, automatic SSL, preview deployments for testing, real-time database with built-in auth, and automatic scaling. The same infrastructure that big companies use, but without needing a DevOps team.

Most importantly, I ship fast. The bottleneck is no longer "how do I deploy this?" or "how do I set up auth?" It's just "what do I want to build?"

Part 2: The Nitty Gritty

This section provides step-by-step technical instructions for implementing the stack described above. Follow these when you're ready to actually set things up.

1. Build It

Initial Setup

Prerequisites:

  • VS Code installed
  • Node.js and npm/pnpm installed
  • Claude Pro or Max subscription
  • Git configured locally

Install Claude Code:

npm install -g @anthropic-ai/claude-code

# Or with pnpm
pnpm install -g @anthropic-ai/claude-code

Set up your project:

mkdir my-app && cd my-app

# Initialize your project (example with Next.js)
npx create-next-app@latest .

# Or with Vite for a lighter alternative
npm create vite@latest . -- --template react-ts

2. Set Up Your Database (Supabase)

Create Your Supabase Project

  1. Sign up at supabase.com
  2. Use GitHub login for seamless integration
  3. Create a new project and choose a database password
  4. Select your region (choose closest to your users)

Install Supabase client:

npm install @supabase/supabase-js

Create .env.local:

NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

3. Push to GitHub

Initialize Git Repository:

git init

# Make your first commit
git add .
git commit -m "Initial commit"

# Push to GitHub
git remote add origin https://github.com/yourusername/your-repo.git
git branch -M main
git push -u origin main

4. Deploy on Vercel

  1. Go to vercel.com and sign in with GitHub
  2. Click "Add New Project"
  3. Import your GitHub repository
  4. Vercel auto-detects your framework
  5. Add environment variables from your .env.local
  6. Click Deploy

Your app is now live at your-project.vercel.app!

5. Set Up Custom Domain

  1. Purchase domain on GoDaddy
  2. In Vercel: Settings → Domains → Add your domain
  3. Vercel provides DNS records to add
  4. Add records in GoDaddy's DNS manager
  5. Wait 10-60 minutes for DNS propagation

Vercel will automatically provision SSL certificates. Once verified, your site is live on your custom domain!

6. Ongoing Development

Every push to your main branch automatically triggers a Vercel deployment:

git add .
git commit -m "Add new feature"
git push

# Vercel automatically builds and deploys

Every pull request gets its own preview URL. Test changes before merging to production.

Summary: Your Stack in Action

Build: VS Code + Claude Code + Node.js

Database: Supabase (PostgreSQL + Auth + Storage)

Version Control: Git + GitHub

Hosting: Vercel (with automatic deployments)

Domain: GoDaddy (or any DNS provider)

This stack gives you:

  • ✅ AI-assisted development workflow
  • ✅ Powerful PostgreSQL database with real-time subscriptions
  • ✅ Automatic deployments on every push
  • ✅ Free SSL certificates
  • ✅ Global CDN
  • ✅ Preview URLs for every PR
  • ✅ Serverless functions out of the box
  • ✅ Professional deployment infrastructure

No Lovable required. Just clean, maintainable code you fully control.