Cara Membina Demo dengan Claude Code: Vibecoding dengan Supabase dan Vercel

Vibecoding adalah paradigma pembangunan perisian baharu di mana pengaturcara membimbing ejen AI melalui arahan bahasa semula jadi, membenarkan kecerdasan buatan menulis kod sebenar. Istilah ini dicipta oleh Andrej Karpathy (pengasas bersama OpenAI dan bekas Pengarah AI di Tesla) dalam tweet terkenal pada Februari 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."

Dalam artikel ini, kita akan melihat cara membina demo lengkap dan berfungsi menggunakan Claude Code sebagai ejen AI, Supabase sebagai backend (pangkalan data, pengesahan, API), dan Vercel untuk deployment - semuanya menggunakan tier percuma perkhidmatan ini secara eksklusif.

1. Apa Itu Vibecoding dan Mengapa Ia Revolusioner

Vibecoding mewakili anjakan paradigma asas dalam pembangunan perisian. Daripada menulis kod baris demi baris:

1. Pembangun menerangkan apa yang mereka mahu dalam bahasa semula jadi.
2. Ejen AI menjana kod lengkap.
3. Pembangun menyemak, menguji, dan mengiterasi.

Mengapa Ia Berkesan

• Kelajuan: projek yang mengambil masa berhari-hari boleh dibina dalam beberapa jam.
• Kebolehcapaian: pembangun yang tidak pakar pun boleh membina produk yang berfungsi.
• Iterasi pantas: anda boleh menguji idea dan pivot dengan lebih cepat.
• Fokus produk: anda menumpukan pada apa dan bukannya bagaimana.

Bila Menggunakan Vibecoding

Vibecoding sesuai untuk:

• Demo dan MVP: membina prototaip dengan cepat untuk mengesahkan idea.
• Hackathon: mencipta produk berfungsi dalam beberapa jam sahaja.
• Projek sampingan: meneroka teknologi baharu tanpa melabur berminggu-minggu.
• Bukti Konsep: menunjukkan kemungkinan teknikal kepada pihak berkepentingan atau pelabur.

Amaran: Vibecoding sangat baik untuk demo dan prototaip. Untuk aplikasi gred pengeluaran dengan keperluan keselamatan dan kebolehskalaan yang tinggi, semakan teliti kod yang dijana masih penting.

2. Tumpukan Teknologi: Claude Code + Supabase + Vercel

Claude Code

Claude Code ialah ejen pengkodan AI Anthropic. Ia berfungsi secara langsung di terminal anda dan boleh:

• Membaca dan memahami keseluruhan pangkalan kod.
• Mencipta, mengubah suai, dan memadam fail.
• Melaksanakan arahan terminal.
• Berinteraksi dengan API dan perkhidmatan luaran.
• Menguruskan kawalan versi dengan Git.
• Mengiterasi secara autonomi pada ralat dan pepijat.

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

# Start in a project directory
cd my-project
claude

Supabase (Tier Percuma)

Supabase ialah alternatif sumber terbuka kepada Firebase yang menawarkan:

• Pangkalan Data PostgreSQL: pangkalan data hubungan yang lengkap.
• Pengesahan: log masuk dengan e-mel, Google, GitHub, dll.
• API REST dan Realtime: dijana secara automatik daripada skema anda.
• Storan: untuk fail dan imej.
• Edge Functions: fungsi tanpa pelayan.

Tier percuma termasuk:

Vercel (Tier Percuma)

Vercel ialah platform deployment yang sempurna untuk aplikasi Next.js:

• Deployment automatik daripada GitHub.
• Preview deployment untuk setiap cawangan dan PR.
• CDN Global untuk prestasi optimum.
• Serverless Functions disertakan.
• Analitik asas percuma.

Tier percuma termasuk:

3. Persediaan Awal: Menyiapkan Persekitaran

Prasyarat

Sebelum bermula, pastikan anda mempunyai:

• Node.js 18+ dipasang.
• Git dikonfigurasi.
• Akaun GitHub.
• Akaun Supabase (percuma di supabase.com).
• Akaun Vercel (percuma di vercel.com).
• Claude Code dipasang (npm install -g @anthropic-ai/claude-code).

Langkah 1: Cipta Projek

Buka terminal dan mulakan Claude Code:

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

Kini anda boleh memberikan arahan bahasa semula jadi kepada Claude Code:

Anda: Cipta projek Next.js 15 dengan App Router, TypeScript, Tailwind CSS,
dan shadcn/ui. Juga mulakan repositori Git.

Claude Code akan melaksanakan secara automatik:

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

Langkah 2: Konfigurasi Supabase

1. Pergi ke supabase.com dan cipta projek baharu.
2. Catat Project URL dan anon key daripada Settings > API.
3. Kembali ke terminal dengan Claude Code:

Anda: Tambah Supabase ke projek. Cipta fail .env.local dengan pemboleh ubah
NEXT_PUBLIC_SUPABASE_URL dan NEXT_PUBLIC_SUPABASE_ANON_KEY. Konfigurasi
klien Supabase dengan sokongan SSR untuk Next.js App Router.

Claude Code akan mencipta konfigurasi lengkap:

// 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. Membina Demo: Aplikasi Pengurusan Tugas

Mari bina demo konkrit: aplikasi pengurusan tugas dengan pengesahan, CRUD penuh, dan antara muka moden.

Tentukan Skema Pangkalan Data

Berikan arahan kepada Claude Code untuk mencipta skema:

Anda: Cipta migrasi SQL untuk Supabase dengan jadual berikut:

1. profiles: id (uuid, FK ke auth.users), username (text), avatar_url (text), created_at
2. projects: id (uuid), name (text), description (text), owner_id (uuid, FK ke 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 ke projects), assigned_to (uuid, FK ke profiles), due_date (timestamp), created_at, updated_at

Aktifkan Row Level Security pada semua jadual dan cipta polisi yang sesuai.

Claude Code akan menjana migrasi lengkap:

-- 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())
  );

Anda boleh menjalankan migrasi ini secara langsung dari papan pemuka Supabase (SQL Editor) atau melalui CLI.

Jana Jenis TypeScript

Anda: Jana jenis TypeScript daripada pangkalan data Supabase dan simpan ke src/types/database.ts

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

Bina Antara Muka Pengguna

Kini bahagian vibecoding yang paling berkuasa. Berikan arahan tahap tinggi kepada Claude Code:

Anda: Cipta halaman papan pemuka untuk aplikasi pengurusan tugas dengan:

1. Bar sisi dengan navigasi antara projek
2. Paparan Kanban dengan 3 lajur (Todo, In Progress, Done) dengan seret & lepas
3. Modal untuk mencipta/mengedit tugas
4. Pengepala dengan avatar pengguna dan log keluar
5. Reka bentuk moden dengan shadcn/ui dan Tailwind

Gunakan data daripada Supabase dengan React Server Components di mana mungkin
dan Client Components hanya di mana interaktiviti diperlukan.

Claude Code akan membina keseluruhan antara muka, komponen demi komponen.

Tambah Pengesahan

Anda: Tambah sistem pengesahan lengkap dengan:

1. Halaman log masuk dengan e-mel/kata laluan dan log masuk GitHub
2. Halaman pendaftaran
3. Middleware untuk melindungi laluan yang disahkan
4. Ubah hala automatik untuk pengguna yang tidak disahkan
5. Penciptaan profil automatik selepas pendaftaran

Claude Code akan mengkonfigurasi middleware Next.js dan halaman auth:

// 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. Corak Vibecoding Lanjutan

Prompting Berulang

Rahsia vibecoding yang berkesan adalah iterasi. Jangan cuba menerangkan semuanya dalam satu prompt. Teruskan langkah demi langkah:

Langkah 1: "Cipta susun atur asas dengan pengepala dan bar sisi"
Langkah 2: "Tambah senarai projek di bar sisi dengan butang untuk membuat yang baru"
Langkah 3: "Cipta paparan Kanban di kawasan utama"
Langkah 4: "Tambah seret & lepas antara lajur"
Langkah 5: "Laksanakan modal untuk membuat tugas baru"
Langkah 6: "Tambah pemberitahuan toast untuk maklum balas pengguna"

Petua: Semakin spesifik dan kontekstual prompt, semakin baik hasilnya. Claude Code mempunyai akses kepada keseluruhan pangkalan kod, jadi ia boleh mengintegrasikan ciri baharu secara koheren.

Pengendalian Ralat

Apabila sesuatu tidak berfungsi (dan ia akan berlaku), anda boleh hanya berkata:

Anda: Saya mendapat ralat ini di konsol: "TypeError: Cannot read property
'map' of undefined" di komponen TaskList. Betulkan ia.

Claude Code akan menganalisis kod, mengenal pasti masalah, dan membetulkannya.

Refaktorkan dengan AI

Anda: Komponen Dashboard telah menjadi terlalu besar. Pecahkan ia kepada
komponen yang lebih kecil dan boleh guna semula sambil mengekalkan fungsi yang sama.

Ujian

Anda: Tambah ujian dengan Vitest untuk fungsi utiliti dan ujian Playwright untuk
aliran pengesahan dan penciptaan tugas.

6. Deploy ke Vercel: Dari Kod ke Dunia

Langkah 1: Push ke GitHub

Anda: Cipta .gitignore yang sesuai, commit semuanya, dan push ke repositori
GitHub baharu yang dipanggil "my-demo-app".

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

Langkah 2: Sambung Vercel

1. Pergi ke vercel.com dan klik "Add New Project."
2. Import repositori GitHub yang baru anda cipta.
3. Tambah pemboleh ubah persekitaran:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Klik "Deploy."

Langkah 3: Konfigurasi Domain Tersuai (Pilihan)

Vercel menyediakan URL percuma seperti my-demo-app.vercel.app. Untuk domain tersuai:

Anda: Tambah konfigurasi untuk domain tersuai dalam vercel.json

Preview Deployment

Setiap kali anda membuka Pull Request di GitHub, Vercel akan secara automatik mencipta preview deployment dengan URL unik. Sempurna untuk menunjukkan perubahan sebelum merge.

7. Pengoptimuman untuk Demo Anda

Prestasi

Anda: Optimumkan prestasi aplikasi:
1. Tambah keadaan pemuatan dengan Suspense dan skeleton
2. Laksanakan caching dengan Next.js unstable_cache
3. Optimumkan imej dengan next/image
4. Tambah metadata SEO untuk setiap halaman

Realtime dengan Supabase

Ciri yang sentiasa mengagumkan dalam demo ialah realtime:

Anda: Tambah penyegerakan masa nyata untuk tugas menggunakan Supabase Realtime.
Apabila pengguna mengemas kini tugas, semua pengguna lain harus melihat perubahan
dalam masa nyata tanpa memuat semula.

'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;
}

Mod Gelap

Anda: Tambah sokongan mod gelap dengan togol di pengepala.
Gunakan kelas dark Tailwind dan simpan keutamaan dalam localStorage.

8. Amalan Terbaik untuk Vibecoding Berkesan

1. Jadilah Spesifik dalam Prompt Anda

Tidak: "Buat halaman yang cantik"
Ya: "Cipta halaman pendaratan dengan bahagian hero dengan kecerunan ungu-biru,
   bahagian ciri dengan 3 kad dengan ikon, dan butang CTA oren"

2. Berikan Konteks

Tidak: "Tambah pengesahan"
Ya: "Tambah pengesahan dengan Supabase Auth. Projek menggunakan Next.js 15 App
   Router dengan TypeScript. Saya mahu log masuk e-mel/kata laluan dan OAuth dengan
   GitHub. Gunakan corak SSR dengan @supabase/ssr"

3. Iterasi dalam Langkah Kecil

Jangan cuba membina semuanya dalam satu prompt. Teruskan secara berperingkat:

1. Susun atur asas
2. Satu ciri pada satu masa
3. Penggayaan dan penggilap
4. Pengendalian ralat
5. Ujian

4. Semak Kod yang Dijana

Vibecoding tidak bermaksud tidak membaca kod. Sentiasa semak:

• Keselamatan: polisi RLS, pengesahan input, sanitasi data.
• Prestasi: pertanyaan N+1, komponen pihak klien yang tidak perlu.
• Amalan terbaik: struktur projek, konvensyen penamaan.

5. Gunakan Git secara Strategik

Anda: Commit perubahan dengan mesej deskriptif selepas setiap ciri yang selesai.

Ini membolehkan anda kembali jika sesuatu berjalan salah.

9. Kos: Adakah Semuanya Benar-benar Percuma?

Berikut ialah pecahan kos untuk setiap perkhidmatan:

Nota: Claude Code memerlukan langganan atau kredit API, tetapi pulangan pelaburan dari segi kelajuan pembangunan adalah luar biasa. Untuk demo atau MVP, jumlah kos berada dalam lingkungan $20.

Alternatif AI Percuma

Jika anda ingin mengekalkan kos pada sifar mutlak, anda boleh menggunakan:

• Cursor (tier percuma dengan had).
• GitHub Copilot (percuma untuk pelajar dan sumber terbuka).
• Codeium/Windsurf (tier percuma yang murah hati).

10. Dari Demo ke Produk: Langkah Seterusnya

Setelah demo anda langsung, inilah cara meneruskan:

1. Kumpul maklum balas: kongsi demo dengan pengguna berpotensi dan kumpul pendapat.
2. Iterasi dengan pantas: gunakan vibecoding untuk melaksanakan perubahan yang diminta.
3. Pantau metrik: Vercel Analytics dan Supabase Dashboard memberikan data penting.
4. Skala apabila perlu: naik taraf ke pelan berbayar hanya apabila anda telah mengesahkan permintaan.

Kesimpulan

Vibecoding dengan Claude Code, Supabase, dan Vercel mewakili gabungan yang berkuasa untuk membina demo dan MVP dalam masa rekod. Apa yang dahulunya mengambil masa berminggu-minggu pembangunan kini boleh dicapai dalam hanya beberapa jam, dengan tahap kualiti yang mengejutkan tinggi.

Kuncinya ialah mendekati vibecoding dengan minda yang betul: ia bukan tentang "tidak tahu mengkod" tetapi tentang menguatkan keupayaan anda dengan alat AI. Semakin banyak anda tahu tentang teknologi asas (React, SQL, pengesahan, deployment), semakin berkesan anda membimbing ejen AI ke arah hasil yang diingini.

Masa depan pembangunan perisian sudah tiba, dan kos untuk bermula tidak pernah lebih rendah. Cipta demo anda, sahkan ia dengan pengguna sebenar, dan bina produk hebat seterusnya.

Senarai semak untuk demo pertama anda:

• Claude Code dipasang dan dikonfigurasi
• Projek Supabase dicipta dengan skema pangkalan data
• Projek Next.js dimulakan dengan shadcn/ui
• Pengesahan dikonfigurasi
• CRUD penuh dilaksanakan
• UI moden dan responsif
• Di-deploy ke Vercel
• URL boleh dikongsi sedia untuk maklum balas