1~
2**Vibecoding** is a new software development paradigm where the programmer guides an AI agent through natural language instructions, letting the artificial intelligence write the actual code. The term was coined by Andrej Karpathy (OpenAI co-founder and former Director of AI at Tesla) in a famous tweet from February 2025: _"There's a new kind of coding I call vibecoding, where you fully give in to the vibes, embrace the exponentials, and forget that the code even exists."_
3~
4In this article, we'll see how to build a complete, working demo using **Claude Code** as an AI agent, **Supabase** as a backend (database, authentication, API), and **Vercel** for deployment  -  all leveraging exclusively the **free tiers** of these services.
5~
6## 1. What Is Vibecoding and Why It's Revolutionary
7~
8Vibecoding represents a fundamental paradigm shift in software development. Instead of writing code line by line, the developer:
9~
101. **Describes** what they want in natural language.
112. **The AI agent** generates the complete code.
123. **The developer** reviews, tests, and iterates.
13~
14### Why It Works
15~
16- **Speed**: a project that would take days can be built in hours.
17- **Accessibility**: even non-expert developers can build working products.
18- **Rapid iteration**: you can test ideas and pivot much faster.
19- **Product focus**: you concentrate on the _what_ instead of the _how_.
20~
21```mermaid
22flowchart LR
23    A[Idea] --> B[Natural language prompt]
24    B --> C[Claude Code generates code]
25    C --> D[Review and test]
26    D --> E[Iteration]
27    E --> B
28    D --> F[Deploy to Vercel]
29```
30~
31### When to Use Vibecoding
32~
33Vibecoding is perfect for:
34~
35- **Demos and MVPs**: quickly building a prototype to validate an idea.
36- **Hackathons**: creating a working product in just a few hours.
37- **Side projects**: exploring new technologies without investing weeks.
38- **Proof of Concept**: demonstrating technical feasibility to stakeholders or investors.
39~
40> **Warning:** Vibecoding is excellent for demos and prototypes. For production-grade applications with high security and scalability requirements, a thorough review of the generated code is still essential.
41~
42## 2. The Tech Stack: Claude Code + Supabase + Vercel
43~
44### Claude Code
45~
46Claude Code is Anthropic's AI coding agent. It works directly in your terminal and can:
47~
48- Read and understand the entire codebase.
49- Create, modify, and delete files.
50- Execute terminal commands.
51- Interact with APIs and external services.
52- Manage versioning with Git.
53- Autonomously iterate on errors and bugs.
54~
55```bash
56# Install Claude Code
57npm install -g @anthropic-ai/claude-code
58~
59# Start in a project directory
60cd my-project
61claude
62```
63~
64### Supabase (Free Tier)
65~
66Supabase is an open-source Firebase alternative that offers:
67~
68- **PostgreSQL Database**: a complete relational database.
69- **Authentication**: login with email, Google, GitHub, etc.
70- **REST and Realtime APIs**: automatically generated from your schema.
71- **Storage**: for files and images.
72- **Edge Functions**: serverless functions.
73~
74The free tier includes:
75~
76| Resource | Free Limit |
77|----------|-----------|
78| Database | 500 MB |
79| Storage | 1 GB |
80| Bandwidth | 5 GB |
81| Edge Function invocations | 500K/month |
82| Authenticated users | Unlimited |
83| Projects | 2 active projects |
84~
85### Vercel (Free Tier)
86~
87Vercel is the perfect deployment platform for Next.js applications:
88~
89- **Automatic deployment** from GitHub.
90- **Preview deployments** for every branch and PR.
91- **Global CDN** for optimal performance.
92- **Serverless Functions** included.
93- **Basic analytics** for free.
94~
95The free tier includes:
96~
97| Resource | Free Limit |
98|----------|-----------|
99| Bandwidth | 100 GB/month |
100| Serverless Function execution | 100 GB-hours/month |
101| Builds | 6,000 minutes/month |
102| Projects | Unlimited |
103| Deployments | Unlimited |
104~
105## 3. Initial Setup: Preparing the Environment
106~
107### Prerequisites
108~
109Before starting, make sure you have:
110~
111- **Node.js 18+** installed.
112- **Git** configured.
113- A **GitHub** account.
114- A **Supabase** account (free at [supabase.com](https://supabase.com)).
115- A **Vercel** account (free at [vercel.com](https://vercel.com)).
116- **Claude Code** installed (`npm install -g @anthropic-ai/claude-code`).
117~
118### Step 1: Create the Project
119~
120Open the terminal and start Claude Code:
121~
122```bash
123mkdir my-demo-app && cd my-demo-app
124claude
125```
126~
127Now you can start giving Claude Code instructions in natural language:
128~
129```
130You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
131and shadcn/ui. Also initialize a Git repository.
132```
133~
134Claude Code will automatically execute:
135~
136```bash
137npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
138npx shadcn@latest init
139git init && git add . && git commit -m "Initial commit"
140```
141~
142### Step 2: Configure Supabase
143~
1441. Go to [supabase.com](https://supabase.com) and create a new project.
1452. Note the **Project URL** and **anon key** from Settings > API.
1463. Go back to the terminal with Claude Code:
147~
148```
149You: Add Supabase to the project. Create a .env.local file with the variables
150NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
151Supabase client with SSR support for Next.js App Router.
152```
153~
154Claude Code will create the complete configuration:
155~
156```typescript
157// src/lib/supabase/client.ts
158import { createBrowserClient } from '@supabase/ssr';
159~
160export function createClient() {
161  return createBrowserClient(
162    process.env.NEXT_PUBLIC_SUPABASE_URL!,
163    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
164  );
165}
166```
167~
168```typescript
169// src/lib/supabase/server.ts
170import { createServerClient } from '@supabase/ssr';
171import { cookies } from 'next/headers';
172~
173export async function createClient() {
174  const cookieStore = await cookies();
175~
176  return createServerClient(
177    process.env.NEXT_PUBLIC_SUPABASE_URL!,
178    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
179    {
180      cookies: {
181        getAll() {
182          return cookieStore.getAll();
183        },
184        setAll(cookiesToSet) {
185          cookiesToSet.forEach(({ name, value, options }) =>
186            cookieStore.set(name, value, options)
187          );
188        },
189      },
190    }
191  );
192}
193```
194~
195## 4. Building the Demo: A Task Management App
196~
197Let's build a concrete demo: a **task management app** with authentication, full CRUD, and a modern interface.
198~
199### Define the Database Schema
200~
201Give Claude Code instructions to create the schema:
202~
203```
204You: Create a SQL migration for Supabase with the following tables:
205~
2061. profiles: id (uuid, FK to auth.users), username (text), avatar_url (text),
207   created_at
2082. projects: id (uuid), name (text), description (text), owner_id (uuid, FK
209   to profiles), created_at
2103. tasks: id (uuid), title (text), description (text), status (enum:
211   todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid,
212   FK to projects), assigned_to (uuid, FK to profiles), due_date (timestamp),
213   created_at, updated_at
214~
215Enable Row Level Security on all tables and create appropriate policies.
216```
217~
218Claude Code will generate a complete migration:
219~
220```sql
221-- Create enum types
222CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
223CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');
224~
225-- Profiles table
226CREATE TABLE profiles (
227  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
228  username TEXT UNIQUE,
229  avatar_url TEXT,
230  created_at TIMESTAMPTZ DEFAULT NOW()
231);
232~
233-- Projects table
234CREATE TABLE projects (
235  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
236  name TEXT NOT NULL,
237  description TEXT,
238  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
239  created_at TIMESTAMPTZ DEFAULT NOW()
240);
241~
242-- Tasks table
243CREATE TABLE tasks (
244  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
245  title TEXT NOT NULL,
246  description TEXT,
247  status task_status DEFAULT 'todo',
248  priority task_priority DEFAULT 'medium',
249  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
250  assigned_to UUID REFERENCES profiles(id),
251  due_date TIMESTAMPTZ,
252  created_at TIMESTAMPTZ DEFAULT NOW(),
253  updated_at TIMESTAMPTZ DEFAULT NOW()
254);
255~
256-- Enable RLS
257ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
258ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
259ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
260~
261-- Profiles policies
262CREATE POLICY "Users can view own profile"
263  ON profiles FOR SELECT USING (auth.uid() = id);
264CREATE POLICY "Users can update own profile"
265  ON profiles FOR UPDATE USING (auth.uid() = id);
266~
267-- Projects policies
268CREATE POLICY "Users can view own projects"
269  ON projects FOR SELECT USING (auth.uid() = owner_id);
270CREATE POLICY "Users can create projects"
271  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
272CREATE POLICY "Users can update own projects"
273  ON projects FOR UPDATE USING (auth.uid() = owner_id);
274CREATE POLICY "Users can delete own projects"
275  ON projects FOR DELETE USING (auth.uid() = owner_id);
276~
277-- Tasks policies
278CREATE POLICY "Users can view tasks in their projects"
279  ON tasks FOR SELECT USING (
280    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
281  );
282CREATE POLICY "Users can create tasks in their projects"
283  ON tasks FOR INSERT WITH CHECK (
284    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
285  );
286CREATE POLICY "Users can update tasks in their projects"
287  ON tasks FOR UPDATE USING (
288    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
289  );
290CREATE POLICY "Users can delete tasks in their projects"
291  ON tasks FOR DELETE USING (
292    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
293  );
294```
295~
296You can run this migration directly from the Supabase dashboard (SQL Editor) or via the CLI.
297~
298### Generate TypeScript Types
299~
300```
301You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts
302```
303~
304```bash
305npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts
306```
307~
308### Build the User Interface
309~
310Now comes the most powerful part of vibecoding. Give Claude Code high-level instructions:
311~
312```
313You: Create a dashboard page for the task management app with:
314~
3151. Sidebar with navigation between projects
3162. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3173. Modal to create/edit tasks
3184. Header with user avatar and logout
3195. Modern design with shadcn/ui and Tailwind
320~
321Use data from Supabase with React Server Components where possible
322and Client Components only where interactivity is needed.
323```
324~
325Claude Code will build the entire interface, component by component.
326~
327### Add Authentication
328~
329```
330You: Add a complete authentication system with:
331~
3321. Login page with email/password and GitHub login
3332. Registration page
3343. Middleware to protect authenticated routes
3354. Automatic redirect for unauthenticated users
3365. Automatic profile creation after registration
337```
338~
339Claude Code will configure Next.js middleware and auth pages:
340~
341```typescript
342// src/middleware.ts
343import { createServerClient } from '@supabase/ssr';
344import { NextResponse, type NextRequest } from 'next/server';
345~
346export async function middleware(request: NextRequest) {
347  let supabaseResponse = NextResponse.next({ request });
348~
349  const supabase = createServerClient(
350    process.env.NEXT_PUBLIC_SUPABASE_URL!,
351    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
352    {
353      cookies: {
354        getAll() {
355          return request.cookies.getAll();
356        },
357        setAll(cookiesToSet) {
358          cookiesToSet.forEach(({ name, value }) =>
359            request.cookies.set(name, value)
360          );
361          supabaseResponse = NextResponse.next({ request });
362          cookiesToSet.forEach(({ name, value, options }) =>
363            supabaseResponse.cookies.set(name, value, options)
364          );
365        },
366      },
367    }
368  );
369~
370  const { data: { user } } = await supabase.auth.getUser();
371~
372  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
373    const url = request.nextUrl.clone();
374    url.pathname = '/auth/login';
375    return NextResponse.redirect(url);
376  }
377~
378  return supabaseResponse;
379}
380~
381export const config = {
382  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
383};
384```
385~
386## 5. Advanced Vibecoding Patterns
387~
388### Iterative Prompting
389~
390The secret to effective vibecoding is **iteration**. Don't try to describe everything in a single prompt. Proceed in steps:
391~
392```
393Step 1: "Create the base layout with header and sidebar"
394Step 2: "Add the project list in the sidebar with a button to create new ones"
395Step 3: "Create the Kanban view in the main area"
396Step 4: "Add drag & drop between columns"
397Step 5: "Implement the modal to create new tasks"
398Step 6: "Add toast notifications for user feedback"
399```
400~
401> **Tip:** The more specific and contextualized the prompt, the better the result. Claude Code has access to the entire codebase, so it can integrate new features coherently.
402~
403### Error Handling
404~
405When something doesn't work (and it will), you can simply say:
406~
407```
408You: I'm getting this error in the console: "TypeError: Cannot read property
409'map' of undefined" in the TaskList component. Fix it.
410```
411~
412Claude Code will analyze the code, identify the problem, and fix it.
413~
414### Refactoring with AI
415~
416```
417You: The Dashboard component has become too large. Split it into smaller,
418reusable components while maintaining the same functionality.
419```
420~
421### Testing
422~
423```
424You: Add tests with Vitest for utility functions and Playwright tests for
425the authentication and task creation flow.
426```
427~
428## 6. Deploy to Vercel: From Code to the World
429~
430### Step 1: Push to GitHub
431~
432```
433You: Create an appropriate .gitignore, commit everything, and push to a new
434GitHub repository called "my-demo-app".
435```
436~
437```bash
438git add .
439git commit -m "feat: complete task management demo"
440gh repo create my-demo-app --public --push --source=.
441```
442~
443### Step 2: Connect Vercel
444~
4451. Go to [vercel.com](https://vercel.com) and click "Add New Project."
4462. Import the GitHub repository you just created.
4473. Add environment variables:
448   - `NEXT_PUBLIC_SUPABASE_URL`
449   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
4504. Click "Deploy."
451~
452```mermaid
453flowchart LR
454    A[GitHub Push] --> B[Vercel Build]
455    B --> C[Automatic Deploy]
456    C --> D[Public URL]
457    D --> E[Global CDN]
458```
459~
460### Step 3: Configure a Custom Domain (Optional)
461~
462Vercel provides a free URL like `my-demo-app.vercel.app`. For a custom domain:
463~
464```
465You: Add the configuration for a custom domain in vercel.json
466```
467~
468### Preview Deployments
469~
470Every time you open a Pull Request on GitHub, Vercel will automatically create a **preview deployment** with a unique URL. Perfect for showing changes before merging.
471~
472## 7. Optimizations for Your Demo
473~
474### Performance
475~
476```
477You: Optimize the app's performance:
4781. Add loading states with Suspense and skeletons
4792. Implement caching with Next.js unstable_cache
4803. Optimize images with next/image
4814. Add SEO metadata for each page
482```
483~
484### Realtime with Supabase
485~
486A feature that always impresses in demos is **realtime**:
487~
488```
489You: Add realtime synchronization for tasks using Supabase Realtime.
490When a user updates a task, all other users should see the change
491in real time without refreshing.
492```
493~
494```typescript
495'use client';
496~
497import { useEffect, useState } from 'react';
498import { createClient } from '@/lib/supabase/client';
499import type { Task } from '@/types/database';
500~
501export function useRealtimeTasks(projectId: string) {
502  const [tasks, setTasks] = useState<Task[]>([]);
503  const supabase = createClient();
504~
505  useEffect(() => {
506    const channel = supabase
507      .channel('tasks-changes')
508      .on(
509        'postgres_changes',
510        {
511          event: '*',
512          schema: 'public',
513          table: 'tasks',
514          filter: `project_id=eq.${projectId}`,
515        },
516        (payload) => {
517          if (payload.eventType === 'INSERT') {
518            setTasks((prev) => [...prev, payload.new as Task]);
519          } else if (payload.eventType === 'UPDATE') {
520            setTasks((prev) =>
521              prev.map((t) =>
522                t.id === payload.new.id ? (payload.new as Task) : t
523              )
524            );
525          } else if (payload.eventType === 'DELETE') {
526            setTasks((prev) =>
527              prev.filter((t) => t.id !== payload.old.id)
528            );
529          }
530        }
531      )
532      .subscribe();
533~
534    return () => {
535      supabase.removeChannel(channel);
536    };
537  }, [projectId, supabase]);
538~
539  return tasks;
540}
541```
542~
543### Dark Mode
544~
545```
546You: Add dark mode support with a toggle in the header.
547Use Tailwind dark classes and save the preference in localStorage.
548```
549~
550## 8. Best Practices for Effective Vibecoding
551~
552### 1. Be Specific in Your Prompts
553~
554```
555❌ "Make a nice page"
556✅ "Create a landing page with a hero section with a purple-blue gradient,
557   a features section with 3 cards with icons, and an orange CTA button"
558```
559~
560### 2. Provide Context
561~
562```
563❌ "Add authentication"
564✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App
565   Router with TypeScript. I want email/password login and OAuth with GitHub.
566   Use the SSR pattern with @supabase/ssr"
567```
568~
569### 3. Iterate in Small Steps
570~
571Don't try to build everything in a single prompt. Proceed incrementally:
572~
5731. Base layout
5742. One feature at a time
5753. Styling and polish
5764. Error handling
5775. Testing
578~
579### 4. Review the Generated Code
580~
581Vibecoding doesn't mean not reading the code. Always review:
582~
583- **Security**: RLS policies, input validation, data sanitization.
584- **Performance**: N+1 queries, unnecessarily client-side components.
585- **Best practices**: project structure, naming conventions.
586~
587### 5. Use Git Strategically
588~
589```
590You: Commit the changes with a descriptive message after each completed feature.
591```
592~
593This lets you revert if something goes wrong.
594~
595## 9. Costs: Is It Really All Free?
596~
597Here's a cost breakdown for each service:
598~
599| Service | Free Plan | When You Pay |
600|---------|-----------|-------------|
601| **Claude Code** | Requires an Anthropic plan (starting at $20/month) or API key | Immediately, but the value is enormous |
602| **Supabase** | Generous free tier (2 projects, 500MB DB) | Beyond free tier limits |
603| **Vercel** | Free tier for personal projects | For teams or commercial use |
604| **GitHub** | Free for public and private repos | Enterprise features |
605~
606> **Note:** Claude Code requires a subscription or API credits, but the return on investment in terms of development speed is extraordinary. For a demo or MVP, the total cost is in the range of $20.
607~
608### Free AI Alternatives
609~
610If you want to keep costs at absolute zero, you can use:
611~
612- **Cursor** (free tier with limitations).
613- **GitHub Copilot** (free for students and open source).
614- **Codeium/Windsurf** (generous free tier).
615~
616## 10. From Demo to Product: Next Steps
617~
618Once your demo is live, here's how to proceed:
619~
620```mermaid
621flowchart TD
622    A[Live Demo] --> B{User Feedback}
623    B --> C[Product Iteration]
624    C --> D[Product-Market Fit]
625    D --> E[Scaling]
626    E --> F[Supabase Pro Plan]
627    E --> G[Vercel Pro Plan]
628    E --> H[Custom Domain]
629```
630~
6311. **Collect feedback**: share the demo with potential users and gather opinions.
6322. **Iterate quickly**: use vibecoding to implement requested changes.
6333. **Monitor metrics**: Vercel Analytics and Supabase Dashboard give you essential data.
6344. **Scale when needed**: upgrade to paid plans only when you've validated demand.
635~
636~
637## Conclusion
638~
639Vibecoding with Claude Code, Supabase, and Vercel represents a powerful combination for building demos and MVPs in record time. What used to take weeks of development can now be accomplished in just a few hours, with a surprisingly high level of quality.
640~
641The key is approaching vibecoding with the right mindset: it's not about "not knowing how to code" but about **amplifying your capabilities** with AI tools. The more you know about the underlying technologies (React, SQL, authentication, deployment), the more effective you'll be at guiding the AI agent toward the desired result.
642~
643The future of software development is here, and the cost of getting started has never been lower. Create your demo, validate it with real users, and build the next great product.
644~
645> **Checklist for your first demo:**
646>
647> - [x] Claude Code installed and configured
648> - [x] Supabase project created with database schema
649> - [x] Next.js project initialized with shadcn/ui
650> - [x] Authentication configured
651> - [x] Full CRUD implemented
652> - [x] Modern and responsive UI
653> - [x] Deployed to Vercel
654> - [x] Shareable URL ready for feedback
655~