Paano Gumawa ng Demo gamit ang Claude Code: Vibecoding gamit ang Supabase at Vercel

Ang Vibecoding ay isang bagong paradigm sa software development kung saan ang programmer ay gumagabay sa isang AI agent sa pamamagitan ng natural language na mga instruksyon, hinahayaan ang artificial intelligence na sumulat ng aktwal na code. Ang termino ay nilikha ni Andrej Karpathy (co-founder ng OpenAI at dating Director of AI sa Tesla) sa isang sikat na tweet noong Pebrero 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."

Sa artikulong ito, makikita natin kung paano gumawa ng isang kumpletong, gumaganang demo gamit ang Claude Code bilang AI agent, Supabase bilang backend (database, authentication, API), at Vercel para sa deployment - lahat na gumagamit eksklusibo ng libreng tier ng mga serbisyong ito.

1. Ano ang Vibecoding at Bakit Ito Rebolusyonaryo

Ang Vibecoding ay kumakatawan sa isang pundamental na paradigm shift sa software development. Sa halip na magsulat ng code line by line:

1. Inilalarawan ng developer kung ano ang gusto nila sa natural language.
2. Ang AI agent ang bumubuo ng kumpletong code.
3. Ang developer ang nagrerepaso, nagtetest, at nag-iiterate.

Bakit Ito Gumagana

• Bilis: isang proyektong aabot ng mga araw ay maaaring gawin sa ilang oras.
• Accessibility: kahit hindi ekspertong mga developer ay makakagawa ng gumaganang mga produkto.
• Mabilis na iteration: maaari kang sumubok ng mga ideya at mag-pivot nang mas mabilis.
• Focus sa produkto: nagko-concentrate ka sa ano sa halip na paano.

Kailan Gamitin ang Vibecoding

Ang Vibecoding ay perpekto para sa:

• Mga Demo at MVP: mabilis na pagbuo ng prototype para i-validate ang isang ideya.
• Mga Hackathon: paggawa ng gumaganang produkto sa ilang oras lang.
• Mga Side project: pag-explore ng mga bagong teknolohiya nang hindi nag-iinvest ng mga linggo.
• Proof of Concept: pagpapakita ng technical feasibility sa mga stakeholder o investor.

Babala: Ang Vibecoding ay mahusay para sa mga demo at prototype. Para sa production-grade na mga application na may mataas na seguridad at scalability na mga kinakailangan, ang masusing pagsusuri ng generated code ay kinakailangan pa rin.

2. Ang Tech Stack: Claude Code + Supabase + Vercel

Claude Code

Ang Claude Code ay ang AI coding agent ng Anthropic. Gumagana ito direkta sa iyong terminal at kaya nitong:

• Basahin at unawain ang buong codebase.
• Lumikha, mag-modify, at magtanggal ng mga file.
• Mag-execute ng mga terminal command.
• Makipag-interact sa mga API at external na mga serbisyo.
• Pamahalaan ang versioning gamit ang Git.
• Autonomously mag-iterate sa mga error at bug.

# Install Claude Code
npm install -g @anthropic-ai/claude-code

# Start in a project directory
cd my-project
claude

Supabase (Libreng Tier)

Ang Supabase ay isang open-source na alternatibo sa Firebase na nag-aalok ng:

• PostgreSQL Database: isang kumpletong relational database.
• Authentication: login gamit ang email, Google, GitHub, atbp.
• REST at Realtime API: awtomatikong ginagawa mula sa iyong schema.
• Storage: para sa mga file at larawan.
• Edge Functions: serverless na mga function.

Ang libreng tier ay kasama ang:

Vercel (Libreng Tier)

Ang Vercel ay ang perpektong deployment platform para sa mga Next.js application:

• Awtomatikong deployment mula sa GitHub.
• Preview deployments para sa bawat branch at PR.
• Global CDN para sa optimal na performance.
• Serverless Functions kasama na.
• Basic analytics libre.

Ang libreng tier ay kasama ang:

3. Paunang Setup: Paghahanda ng Kapaligiran

Mga Kinakailangan

Bago magsimula, siguraduhing mayroon kang:

• Node.js 18+ na naka-install.
• Git na naka-configure.
• Isang GitHub account.
• Isang Supabase account (libre sa supabase.com).
• Isang Vercel account (libre sa vercel.com).
• Claude Code na naka-install (npm install -g @anthropic-ai/claude-code).

Hakbang 1: Gumawa ng Proyekto

Buksan ang terminal at simulan ang Claude Code:

mkdir my-demo-app && cd my-demo-app
claude

Ngayon ay maari ka nang magbigay ng mga instruksyon sa Claude Code sa natural language:

Ikaw: Gumawa ng Next.js 15 na proyekto na may App Router, TypeScript, Tailwind CSS,
at shadcn/ui. I-initialize din ang isang Git repository.

Awtomatikong ie-execute ng Claude Code:

npx create-next-app@latest . --typescript --tailwind --eslint --app --src-dir
npx shadcn@latest init
git init && git add . && git commit -m "Initial commit"

Hakbang 2: I-configure ang Supabase

1. Pumunta sa supabase.com at gumawa ng bagong proyekto.
2. Tandaan ang Project URL at anon key mula sa Settings > API.
3. Bumalik sa terminal na may Claude Code:

Ikaw: Idagdag ang Supabase sa proyekto. Gumawa ng .env.local file na may mga variable
NEXT_PUBLIC_SUPABASE_URL at NEXT_PUBLIC_SUPABASE_ANON_KEY. I-configure ang
Supabase client na may SSR support para sa Next.js App Router.

Gagawin ng Claude Code ang kumpletong configuration:

// src/lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  );
}

// src/lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr';
import { cookies } from 'next/headers';

export async function createClient() {
  const cookieStore = await cookies();

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          );
        },
      },
    }
  );
}

4. Pagbuo ng Demo: Isang Task Management App

Gumawa tayo ng konkretong demo: isang task management app na may authentication, buong CRUD, at modernong interface.

I-define ang Database Schema

Bigyan ang Claude Code ng mga instruksyon para gawin ang schema:

Ikaw: Gumawa ng SQL migration para sa Supabase na may mga sumusunod na table:

1. profiles: id (uuid, FK sa auth.users), username (text), avatar_url (text), created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK sa profiles), created_at
3. tasks: id (uuid), title (text), description (text), status (enum: todo/in_progress/done), priority (enum: low/medium/high), project_id (uuid, FK sa projects), assigned_to (uuid, FK sa profiles), due_date (timestamp), created_at, updated_at

I-enable ang Row Level Security sa lahat ng table at gumawa ng naaangkop na mga policy.

Gagawa ang Claude Code ng kumpletong migration:

-- Create enum types
CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');

-- Profiles table
CREATE TABLE profiles (
  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
  username TEXT UNIQUE,
  avatar_url TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Projects table
CREATE TABLE projects (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  description TEXT,
  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tasks table
CREATE TABLE tasks (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  title TEXT NOT NULL,
  description TEXT,
  status task_status DEFAULT 'todo',
  priority task_priority DEFAULT 'medium',
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
  assigned_to UUID REFERENCES profiles(id),
  due_date TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable RLS
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Profiles policies
CREATE POLICY "Users can view own profile"
  ON profiles FOR SELECT USING (auth.uid() = id);
CREATE POLICY "Users can update own profile"
  ON profiles FOR UPDATE USING (auth.uid() = id);

-- Projects policies
CREATE POLICY "Users can view own projects"
  ON projects FOR SELECT USING (auth.uid() = owner_id);
CREATE POLICY "Users can create projects"
  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
CREATE POLICY "Users can update own projects"
  ON projects FOR UPDATE USING (auth.uid() = owner_id);
CREATE POLICY "Users can delete own projects"
  ON projects FOR DELETE USING (auth.uid() = owner_id);

-- Tasks policies
CREATE POLICY "Users can view tasks in their projects"
  ON tasks FOR SELECT USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can create tasks in their projects"
  ON tasks FOR INSERT WITH CHECK (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can update tasks in their projects"
  ON tasks FOR UPDATE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );
CREATE POLICY "Users can delete tasks in their projects"
  ON tasks FOR DELETE USING (
    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
  );

Maaari mong patakbuhin ang migration na ito direkta mula sa Supabase dashboard (SQL Editor) o sa pamamagitan ng CLI.

Mag-generate ng TypeScript Types

Ikaw: Mag-generate ng TypeScript types mula sa Supabase database at i-save sa src/types/database.ts

npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts

Gawin ang User Interface

Ngayon ang pinakamakapangyarihang bahagi ng vibecoding. Bigyan ang Claude Code ng high-level na mga instruksyon:

Ikaw: Gumawa ng dashboard page para sa task management app na may:

1. Sidebar na may navigation sa pagitan ng mga proyekto
2. Kanban view na may 3 column (Todo, In Progress, Done) na may drag & drop
3. Modal para gumawa/mag-edit ng mga task
4. Header na may user avatar at logout
5. Modernong disenyo gamit ang shadcn/ui at Tailwind

Gumamit ng data mula sa Supabase na may React Server Components kung saan posible
at Client Components lang kung saan kailangan ng interactivity.

Itatayo ng Claude Code ang buong interface, component by component.

Magdagdag ng Authentication

Ikaw: Magdagdag ng kumpletong authentication system na may:

1. Login page na may email/password at GitHub login
2. Registration page
3. Middleware para protektahan ang mga authenticated route
4. Awtomatikong redirect para sa mga hindi authenticated na user
5. Awtomatikong profile creation pagkatapos ng registration

Iko-configure ng Claude Code ang Next.js middleware at mga auth page:

// src/middleware.ts
import { createServerClient } from '@supabase/ssr';
import { NextResponse, type NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({ request });
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          );
        },
      },
    }
  );

  const { data: { user } } = await supabase.auth.getUser();

  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
    const url = request.nextUrl.clone();
    url.pathname = '/auth/login';
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
};

5. Mga Advanced na Vibecoding Pattern

Iterative Prompting

Ang sikreto ng epektibong vibecoding ay iteration. Huwag subukang ilarawan ang lahat sa isang prompt. Sumulong nang hakbang-hakbang:

Hakbang 1: "Gawin ang base layout na may header at sidebar"
Hakbang 2: "Idagdag ang listahan ng proyekto sa sidebar na may button para gumawa ng bago"
Hakbang 3: "Gawin ang Kanban view sa pangunahing lugar"
Hakbang 4: "Idagdag ang drag & drop sa pagitan ng mga column"
Hakbang 5: "I-implement ang modal para gumawa ng mga bagong task"
Hakbang 6: "Magdagdag ng toast notification para sa user feedback"

Tip: Habang mas tiyak at kontekstuwal ang prompt, mas maganda ang resulta. May access ang Claude Code sa buong codebase, kaya kaya nitong mag-integrate ng mga bagong feature nang magkakaugnay.

Error Handling

Kapag may hindi gumagana (at mangyayari ito), maaari kang magsabi lang ng:

Ikaw: Nakakakuha ako ng error na ito sa console: "TypeError: Cannot read property
'map' of undefined" sa TaskList component. Ayusin ito.

Ia-analyze ng Claude Code ang code, tutukuyin ang problema, at aayusin ito.

Refactoring gamit ang AI

Ikaw: Ang Dashboard component ay naging masyadong malaki. Hatiin ito sa mas maliliit
at reusable na mga component habang pinapanatili ang parehong functionality.

Testing

Ikaw: Magdagdag ng mga test gamit ang Vitest para sa mga utility function at Playwright test
para sa authentication at task creation flow.

6. Deploy sa Vercel: Mula Code Hanggang sa Mundo

Hakbang 1: Push sa GitHub

Ikaw: Gumawa ng naaangkop na .gitignore, i-commit ang lahat, at i-push sa isang bagong
GitHub repository na tinatawag na "my-demo-app".

git add .
git commit -m "feat: complete task management demo"
gh repo create my-demo-app --public --push --source=.

Hakbang 2: Ikonekta ang Vercel

1. Pumunta sa vercel.com at i-click ang "Add New Project."
2. I-import ang GitHub repository na kagagawa mo lang.
3. Idagdag ang mga environment variable:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. I-click ang "Deploy."

Hakbang 3: Mag-configure ng Custom Domain (Opsyonal)

Nagbibigay ang Vercel ng libreng URL tulad ng my-demo-app.vercel.app. Para sa custom domain:

Ikaw: Idagdag ang configuration para sa custom domain sa vercel.json

Preview Deployments

Sa tuwing magbubukas ka ng Pull Request sa GitHub, awtomatikong gagawa ang Vercel ng preview deployment na may natatanging URL. Perpekto para ipakita ang mga pagbabago bago i-merge.

7. Mga Optimization para sa Iyong Demo

Performance

Ikaw: I-optimize ang performance ng app:
1. Magdagdag ng loading state gamit ang Suspense at skeleton
2. I-implement ang caching gamit ang Next.js unstable_cache
3. I-optimize ang mga larawan gamit ang next/image
4. Magdagdag ng SEO metadata para sa bawat page

Realtime gamit ang Supabase

Isang feature na palaging nakaka-impress sa mga demo ay realtime:

Ikaw: Magdagdag ng realtime synchronization para sa mga task gamit ang Supabase Realtime.
Kapag nag-update ang isang user ng task, lahat ng ibang user ay dapat makakita ng pagbabago
nang real time nang hindi nagre-refresh.

'use client';

import { useEffect, useState } from 'react';
import { createClient } from '@/lib/supabase/client';
import type { Task } from '@/types/database';

export function useRealtimeTasks(projectId: string) {
  const [tasks, setTasks] = useState<Task[]>([]);
  const supabase = createClient();

  useEffect(() => {
    const channel = supabase
      .channel('tasks-changes')
      .on(
        'postgres_changes',
        {
          event: '*',
          schema: 'public',
          table: 'tasks',
          filter: `project_id=eq.${projectId}`,
        },
        (payload) => {
          if (payload.eventType === 'INSERT') {
            setTasks((prev) => [...prev, payload.new as Task]);
          } else if (payload.eventType === 'UPDATE') {
            setTasks((prev) =>
              prev.map((t) =>
                t.id === payload.new.id ? (payload.new as Task) : t
              )
            );
          } else if (payload.eventType === 'DELETE') {
            setTasks((prev) =>
              prev.filter((t) => t.id !== payload.old.id)
            );
          }
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [projectId, supabase]);

  return tasks;
}

Dark Mode

Ikaw: Magdagdag ng dark mode support na may toggle sa header.
Gumamit ng Tailwind dark class at i-save ang preference sa localStorage.

8. Pinakamahusay na Kasanayan para sa Epektibong Vibecoding

1. Maging Tiyak sa Iyong mga Prompt

Hindi: "Gumawa ng magandang page"
Oo: "Gumawa ng landing page na may hero section na may purple-blue gradient,
   features section na may 3 card na may icon, at isang orange CTA button"

2. Magbigay ng Context

Hindi: "Magdagdag ng authentication"
Oo: "Magdagdag ng authentication gamit ang Supabase Auth. Ang proyekto ay gumagamit ng
   Next.js 15 App Router na may TypeScript. Gusto ko ng email/password login at OAuth
   gamit ang GitHub. Gamitin ang SSR pattern gamit ang @supabase/ssr"

3. Mag-iterate sa Maliliit na Hakbang

Huwag subukang gawin ang lahat sa isang prompt. Sumulong nang unti-unti:

1. Base layout
2. Isang feature sa isang pagkakataon
3. Styling at polish
4. Error handling
5. Testing

4. Suriin ang Generated Code

Ang Vibecoding ay hindi nangangahulugang hindi magbabasa ng code. Palaging suriin ang:

• Seguridad: RLS policy, input validation, data sanitization.
• Performance: N+1 query, hindi kinakailangang client-side component.
• Pinakamahusay na kasanayan: project structure, naming convention.

5. Gamitin ang Git nang Estratehiko

Ikaw: I-commit ang mga pagbabago na may deskriptibong mensahe pagkatapos ng bawat natapos na feature.

Ito ay nagbibigay-daan sa iyo na mag-revert kung may magkamali.

9. Mga Gastos: Totoo Bang Libre ang Lahat?

Narito ang breakdown ng gastos para sa bawat serbisyo:

Tandaan: Ang Claude Code ay nangangailangan ng subscription o API credit, pero ang return on investment sa development speed ay extraordinary. Para sa isang demo o MVP, ang kabuuang gastos ay nasa saklaw ng $20.

Mga Libreng AI na Alternatibo

Kung gusto mong panatilihing zero ang gastos, maaari kang gumamit ng:

• Cursor (libreng tier na may mga limitasyon).
• GitHub Copilot (libre para sa mga estudyante at open source).
• Codeium/Windsurf (marangyang libreng tier).

10. Mula Demo Hanggang Produkto: Mga Susunod na Hakbang

Kapag live na ang iyong demo, ganito ang pag-proceed:

1. Mangolekta ng feedback: ibahagi ang demo sa mga potensyal na user at mangolekta ng mga opinyon.
2. Mag-iterate nang mabilis: gamitin ang vibecoding para i-implement ang mga hiniling na pagbabago.
3. Subaybayan ang mga metric: ang Vercel Analytics at Supabase Dashboard ay nagbibigay sa iyo ng mga esensyal na data.
4. Mag-scale kapag kinakailangan: mag-upgrade sa mga bayad na plano kapag na-validate mo na ang demand.

Kongklusyon

Ang Vibecoding gamit ang Claude Code, Supabase, at Vercel ay kumakatawan sa isang makapangyarihang kombinasyon para sa pagbuo ng mga demo at MVP sa record time. Ang dati ay aabot ng mga linggo ng development ay maaari na ngayong magawa sa ilang oras lang, na may nakakagulat na mataas na antas ng kalidad.

Ang susi ay ang lapitan ang vibecoding na may tamang mindset: hindi ito tungkol sa "hindi marunong mag-code" kundi tungkol sa pagpapalakas ng iyong mga kakayahan gamit ang mga AI tool. Habang mas marami kang alam tungkol sa mga underlying na teknolohiya (React, SQL, authentication, deployment), mas magiging epektibo ka sa paggabay sa AI agent tungo sa nais na resulta.

Ang kinabukasan ng software development ay nandito na, at ang gastos para magsimula ay hindi pa naging ganito kababa. Gawin ang iyong demo, i-validate ito sa mga totoong user, at itayo ang susunod na dakilang produkto.

Checklist para sa iyong unang demo:

• Claude Code naka-install at naka-configure
• Supabase project na nagawa na may database schema
• Next.js project na ini-initialize na may shadcn/ui
• Authentication naka-configure
• Buong CRUD na-implement
• Moderno at responsive na UI
• Na-deploy sa Vercel
• Nababahaging URL na handa para sa feedback