Claude Code Tutorial: Build Your First App from the Terminal

Step-by-step tutorial: install Claude Code, set up a project, and build a full-stack todo app with Supabase.

• By vibecodemeta • 8 min read
claude-code tutorial terminal full-stack supabase

Claude Code is the vibe coder’s secret weapon. You describe what you want to build. It happens. No more context switching between IDE and browser. No more copy-pasting code snippets. Just you, your terminal, and an AI that codes.

This tutorial walks you through building a real full-stack app in under 2 hours. By the end, you’ll have a todo app with authentication, a database, and a deployed web interface. All from the terminal.

Let’s go.

Part 1: Install Claude Code

Claude Code is the CLI for building with Claude. It integrates with your terminal and lets you prompt your way to a finished app.

Step 1: Install Claude CLI

First, you need the Claude CLI installed. If you’re on macOS or Linux:

curl -sSL https://claude.ai/install | bash

Or if you use Homebrew:

brew install anthropic/claude/claude

For Windows, download the installer from the Anthropic website.

Step 2: Authenticate

Once installed, set up authentication:

claude login

This opens a browser window. Log in with your Anthropic account (or create one if you don’t have it). You’ll get an API token. The CLI saves it automatically.

Verify it worked:

claude --version

You should see a version number. Good.

Step 3: Set Up Your Workspace

Create a folder for your projects:

mkdir ~/projects/vibe-coding
cd ~/projects/vibe-coding

This is where all your projects will live.

Part 2: Create Your First Project

Step 4: Initialize a New Project

Tell Claude to set up a new Next.js project:

claude new todo-app --template nextjs

Claude scaffolds a Next.js project with all the boilerplate. It creates:

todo-app/
├── app/
│   ├── page.tsx
│   ├── layout.tsx
│   └── api/
├── public/
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── .env.local

Navigate into the project:

cd todo-app

Step 5: Write Your CLAUDE.md

This is the vibe coder’s blueprint. Create a file called CLAUDE.md in your project root:

touch CLAUDE.md

Open it and paste this:

# Todo App with Supabase

## Architecture

Stack:
- Next.js 14 with App Router
- React hooks for state management
- Supabase (PostgreSQL + Auth)
- Tailwind CSS v4
- shadcn/ui components for UI

## Data Model

Users table (Supabase Auth, auto-created)
- id (UUID)
- email (string)
- password (hashed by Supabase)

Todos table (custom table in Supabase)
- id (UUID, primary key)
- user_id (UUID, foreign key to auth.users)
- title (string, max 200 chars)
- description (string, optional)
- completed (boolean, default false)
- priority (enum: low, medium, high)
- due_date (timestamp, optional)
- created_at (timestamp, auto)
- updated_at (timestamp, auto)

## Pages & Routes

GET / - Landing page (signup/login if not authenticated)
GET /dashboard - Authenticated todo list
POST /api/auth/signup - Create account
POST /api/auth/login - Sign in
POST /api/todos - Create todo
PATCH /api/todos/[id] - Update todo
DELETE /api/todos/[id] - Delete todo
GET /api/todos - List user's todos

## Features

MVP:
- Sign up / Log in / Log out
- Create todo with title, description, priority, due date
- List all todos (sorted by due date, then priority)
- Toggle completed status (strikethrough, fade)
- Edit todo (modal form)
- Delete todo (with confirmation)
- Real-time updates (refetch on mutation)

Nice to have (Phase 2):
- Filter by status (All, Active, Completed)
- Sort options (due date, priority, created)
- Search todos
- Dark mode toggle
- Export todos as CSV

## Constraints

- No external UI libraries beyond Tailwind and shadcn
- Supabase free tier (auth + database)
- Deploy to Vercel
- Mobile responsive
- Keyboard shortcuts: Cmd+Shift+N (new todo), Esc (close modal)

## Success Criteria

- Sign up works, email confirmation if needed
- Create and list todos without page reload
- Edit persists to database
- Delete works with confirmation
- Responsive on mobile
- Performance: todos load under 1s
- No console errors
- Code is readable and commented

This blueprint tells Claude exactly what to build. It handles architecture decisions for you.

Step 6: Generate the App

Now tell Claude to build it:

claude run "Build the full todo app from CLAUDE.md. Start with Supabase setup, then the Next.js pages and API routes."

Claude starts working. It will:

  1. Create the database schema on Supabase
  2. Generate authentication routes
  3. Build the todo list UI
  4. Set up API endpoints
  5. Wire everything together

This takes 10-15 minutes. Let it run.

Part 3: Set Up Supabase

While Claude is coding, you need to set up Supabase (it’s free).

Step 7: Create a Supabase Project

  1. Go to https://supabase.com
  2. Sign up or log in
  3. Click “New Project”
  4. Name it “todo-app”
  5. Create a strong password (save it)
  6. Select a region (closest to you)
  7. Click “Create new project”

Wait for it to initialize (1-2 minutes).

Step 8: Get Your Connection Strings

Once your project is ready:

  1. Go to Settings > API
  2. Copy your Project URL
  3. Copy your anon public key
  4. Go to Settings > Database
  5. Copy the connection string

Step 9: Update .env.local

In your todo-app folder, open .env.local:

nano .env.local

Add these values:

NEXT_PUBLIC_SUPABASE_URL=your_project_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key_here
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key_here

Replace the values with your actual keys from Supabase.

Save the file (Ctrl+X, then Y, then Enter in nano).

Part 4: Test Locally

Step 10: Install Dependencies

npm install

This installs all packages (Next.js, React, Supabase client, Tailwind, etc.).

Step 11: Run the Dev Server

npm run dev

You should see:

▲ Next.js 14.0.0
- Local:        http://localhost:3000

Open http://localhost:3000 in your browser.

You should see the landing page with a signup form.

Step 12: Test the Full Flow

  1. Sign up: Enter an email and password. Click “Sign up”
  2. Check email: Supabase sends a confirmation link (or you can skip this in dev)
  3. Log in: Enter your credentials
  4. Dashboard: You see an empty todo list
  5. Create a todo: Click “New Todo”, fill in the form, click “Add”
  6. Toggle completed: Click the checkbox next to a todo
  7. Edit: Click the edit icon, change the title, save
  8. Delete: Click delete, confirm

If all that works, your app is alive.

Part 5: Deploy to Vercel

Step 13: Push to GitHub

First, initialize a git repo:

git init
git add .
git commit -m "Initial commit: todo app with Supabase"

Create a GitHub repository:

  1. Go to https://github.com/new
  2. Name it “todo-app”
  3. Click “Create repository”
  4. Follow the instructions to push your local code
git branch -M main
git remote add origin https://github.com/yourusername/todo-app.git
git push -u origin main

Step 14: Deploy on Vercel

  1. Go to https://vercel.com
  2. Sign up or log in (use GitHub)
  3. Click “New Project”
  4. Select your “todo-app” repository
  5. Vercel auto-detects it’s a Next.js project
  6. Click “Environment Variables”
  7. Add your Supabase credentials:
    • NEXT_PUBLIC_SUPABASE_URL
    • NEXT_PUBLIC_SUPABASE_ANON_KEY
    • SUPABASE_SERVICE_ROLE_KEY
  8. Click “Deploy”

Vercel builds and deploys. Takes 2-3 minutes.

You get a URL like: https://todo-app-xyz123.vercel.app

Your app is live.

Part 6: Iterate Fast

Making Changes

From here on, iteration is simple:

  1. Make a change to code locally:

    # Edit a component, API route, style, etc.

  2. Commit and push:

    git add .
git commit -m "Add filter by status"
git push

  3. Vercel auto-deploys (takes 1-2 minutes)

  4. See changes live

Prompt Your Way to Features

Want to add a feature? Use Claude Code:

claude run "Add a filter dropdown to show All, Active, Completed todos. Use Tailwind for styling."

Claude updates your code. You commit and push. Done.

What You’ve Built

Congratulations. You have:

  • A real web app with authentication
  • A PostgreSQL database hosted in the cloud
  • API routes that fetch and update data
  • A responsive UI
  • Deployed to the internet
  • Version control with git
  • Automatic deploys on every push

All from the terminal. All in one evening.

The Vibe Coding Difference

Traditional flow: IDE -> Browser -> Copy/paste -> Refresh -> Repeat

Vibe coding flow: Terminal -> Prompt -> Done

You’re thinking about the what, not the how. You’re shipping instead of tinkering.

This is the power of Claude Code.

Next Steps

Now that you have a working app:

  1. Add more features using Claude Code prompts
  2. Polish the UI with better components
  3. Optimize performance (add caching, pagination)
  4. Add more tables to your database
  5. Monetize it (charge for extra features, export, etc.)

Or pick a new idea from our 15 weekend projects and repeat this process.

The faster you ship, the faster you learn, the faster you iterate toward something that makes money.

Related: Learn better prompting techniques in our prompting guide, or explore more project ideas in our side projects list. Check out the /bootcamp for guided project walkthroughs.

Join the Discussion