Hands-on Projects

Project Overview

This guide demonstrates building complete apps using only vibe coding. Every prompt used is shared as-is.

Project 1: Portfolio Site (30 min)

Goal: Non-developer builds and deploys a personal portfolio

Tech Stack: Next.js + Tailwind CSS + Vercel

CLAUDE.md (2 min)

# CLAUDE.md
 
## Project
Simple personal portfolio website for a designer.
 
## Stack
Next.js 15, Tailwind CSS, Vercel deployment
 
## Requirements
- Hero section (name, tagline, profile image)
- Project gallery (cards with image + description)
- About section (brief introduction)
- Contact section (email, GitHub, LinkedIn links)
- Dark/light mode toggle
- Fully responsive (mobile first)
 
## Design
- Minimal, lots of whitespace
- Font: system default
- Colors: neutral base + 1 accent color

Prompt Log

Prompt 1 — Project Setup (5 min)

Initialize a Next.js project with Tailwind CSS.
Build the portfolio site described in CLAUDE.md.
Single-page with hero, project gallery, about, and contact sections.

Prompt 2 — Update Content (3 min)

Change the project card content to:
Project 1: "Brand Renewal" - UI/UX Design, 2024
Project 2: "Mobile App Design" - Figma Prototype, 2024
Project 3: "Website Redesign" - Responsive Web, 2025

Prompt 3 — Dark Mode (3 min)

Add dark mode with next-themes. Put a toggle icon on the right side of the header.
Enable system preference auto-detection.

Prompt 4 — Style Adjustments (5 min)

Change the hero background to a gradient.
Light mode: white→light gray, dark mode: dark gray→black.
Add a subtle lift animation on project card hover.

Prompt 5 — Responsive Check (2 min)

Check how it looks on mobile and fix any issues.
Make sure project cards stack in a single column on mobile.

Prompt 6 — Deploy (5 min)

Set up for Vercel deployment. Project name: "my-portfolio".

Results

• Total prompts: 6
• Code written manually: 0 lines
• Time spent: ~25 minutes
• Deployment: Live on Vercel

Project 2: SaaS MVP (2 hours)

Goal: From idea to payment-ready MVP

Tech Stack: Next.js + Supabase + Stripe

Concept: "Daily Memo" — A simple journaling service where you write one memo per day

CLAUDE.md (5 min)

# CLAUDE.md
 
## Project
Daily Memo — simple daily journaling SaaS.
 
## Stack
- Next.js 15 (App Router, TypeScript)
- Supabase (Auth + Database)
- Stripe (payments, $5/month)
- Vercel (deployment)
- Tailwind CSS
 
## Pages
- / — Landing (non-authenticated)
- /login — Login/Signup (Supabase Auth)
- /app — Main app (write today's memo)
- /app/history — Past memos (monthly calendar)
- /app/settings — Settings + subscription management
- /pricing — Pricing page
 
## Business Rules
- Free: View last 7 days of memos only
- Pro ($5/month): Full history + monthly report
- One memo per day (1 record per date)
- 500 character limit
 
## Rules
- Server Components default, client only when needed
- RLS required — users access only their own data
- Stripe webhook server-side only
- Never hardcode environment variables

Key Prompt Highlights

Database Design (10 min)

Write Supabase SQL following the DB schema in CLAUDE.md.
Include RLS policies — users can only CRUD their own memos.

Authentication (15 min)

Implement email/password login with Supabase Auth.
Login page, middleware (protect authenticated pages), logout functionality.

Main App UI (20 min)

Build the daily memo page:
- Top: Today's date display
- Center: Text editor (500 char limit, remaining count shown)
- Bottom: Save button
- If today's memo exists, load in edit mode

Payment Integration (25 min)

Integrate Stripe payments:
1. /pricing page with Free/Pro comparison cards
2. "Start Pro" click → redirect to Stripe Checkout
3. Payment success → webhook updates subscriptions table
4. Only Pro users can access full history

Timeline

0:00 ~ 0:05  Write CLAUDE.md
0:05 ~ 0:15  DB schema + RLS
0:15 ~ 0:30  Auth (login/signup)
0:30 ~ 0:50  Main app (memo write/edit)
0:50 ~ 1:10  History page (calendar)
1:10 ~ 1:35  Payment integration (Stripe)
1:35 ~ 1:50  Landing + pricing pages
1:50 ~ 2:00  Deploy + final testing

Project 3: Chrome Extension (1 hour)

Goal: Build a tab management productivity tool

Tech Stack: Manifest V3 + TypeScript + React

Feature: "Tab Saver" — Save open tabs in groups and restore them later

Key Prompts

Initialize a Chrome extension project.
Vite + React + TypeScript setup, Manifest V3 format.

Build the popup UI:
- Top: Current open tab list (checkboxes to select)
- Middle: Group name input + "Save" button
- Bottom: Saved group list (click to restore, X to delete)

Implement save/load logic using Chrome Storage API.
Use chrome.tabs API to get current tabs and restore saved ones.

Common Lessons

Patterns for Vibe Coding Success

1. CLAUDE.md is half the battle — Best ROI for time invested
2. Start small and iterate — Don't try for perfection in one shot
3. Reserve review time — "It works" isn't the finish line; security/quality check is
4. Be specific in prompts — Vague instructions = vague results
5. When stuck, start fresh — Starting over beats wrestling with AI

Vibe Coding Suitability by Project Type