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

Vibecoding adalah paradigma pengembangan perangkat lunak baru di mana programmer memandu agen AI melalui instruksi bahasa alami, membiarkan kecerdasan buatan menulis kode sebenarnya. Istilah ini diciptakan oleh Andrej Karpathy (salah satu pendiri OpenAI dan mantan Direktur AI di Tesla) dalam sebuah tweet terkenal pada Februari 2025: "Ada jenis coding baru yang saya sebut vibecoding, di mana Anda sepenuhnya menyerah pada vibes, merangkul eksponensial, dan melupakan bahwa kode itu bahkan ada."

Dalam artikel ini, kita akan melihat cara membuat demo lengkap dan berfungsi menggunakan Claude Code sebagai agen AI, Supabase sebagai backend (database, autentikasi, API), dan Vercel untuk deployment — semuanya memanfaatkan secara eksklusif tier gratis dari layanan-layanan ini.

1. Apa Itu Vibecoding dan Mengapa Revolusioner

Vibecoding merepresentasikan pergeseran paradigma fundamental dalam pengembangan perangkat lunak. Alih-alih menulis kode baris per baris, pengembang:

1. Mendeskripsikan apa yang mereka inginkan dalam bahasa alami.
2. Agen AI menghasilkan kode lengkap.
3. Pengembang meninjau, menguji, dan mengiterasi.

Mengapa Ini Berhasil

• Kecepatan: proyek yang membutuhkan berhari-hari bisa dibangun dalam hitungan jam.
• Aksesibilitas: bahkan pengembang non-ahli bisa membangun produk yang berfungsi.
• Iterasi cepat: Anda bisa menguji ide dan pivot jauh lebih cepat.
• Fokus produk: Anda berkonsentrasi pada apa bukan bagaimana.

Kapan Menggunakan Vibecoding

Vibecoding sempurna untuk:

• Demo dan MVP: membangun prototipe dengan cepat untuk memvalidasi ide.
• Hackathon: membuat produk yang berfungsi hanya dalam beberapa jam.
• Proyek sampingan: mengeksplorasi teknologi baru tanpa investasi berminggu-minggu.
• Proof of Concept: mendemonstrasikan kelayakan teknis kepada pemangku kepentingan atau investor.

Peringatan: Vibecoding sangat bagus untuk demo dan prototipe. Untuk aplikasi tingkat produksi dengan persyaratan keamanan dan skalabilitas tinggi, tinjauan menyeluruh terhadap kode yang dihasilkan tetap penting.

2. Tech Stack: Claude Code + Supabase + Vercel

Claude Code

Claude Code adalah agen coding AI dari Anthropic. Ia bekerja langsung di terminal Anda dan dapat:

• Membaca dan memahami seluruh codebase.
• Membuat, memodifikasi, dan menghapus file.
• Menjalankan perintah terminal.
• Berinteraksi dengan API dan layanan eksternal.
• Mengelola versioning dengan Git.
• Mengiterasi secara otonom pada error dan bug.

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

# Start in a project directory
cd my-project
claude

Supabase (Tier Gratis)

Supabase adalah alternatif open-source untuk Firebase yang menawarkan:

• Database PostgreSQL: database relasional lengkap.
• Autentikasi: login dengan email, Google, GitHub, dll.
• API REST dan Realtime: dihasilkan secara otomatis dari schema Anda.
• Storage: untuk file dan gambar.
• Edge Functions: fungsi serverless.

Tier gratis mencakup:

| Sumber Daya | Batas Gratis | |----------|-----------| | Database | 500 MB | | Storage | 1 GB | | Bandwidth | 5 GB | | Pemanggilan Edge Function | 500K/bulan | | Pengguna terautentikasi | Tak terbatas | | Proyek | 2 proyek aktif |

Vercel (Tier Gratis)

Vercel adalah platform deployment sempurna untuk aplikasi Next.js:

• Deployment otomatis dari GitHub.
• Preview deployment untuk setiap branch dan PR.
• CDN global untuk performa optimal.
• Serverless Functions termasuk.
• Analitik dasar gratis.

Tier gratis mencakup:

| Sumber Daya | Batas Gratis | |----------|-----------| | Bandwidth | 100 GB/bulan | | Eksekusi Serverless Function | 100 GB-jam/bulan | | Build | 6.000 menit/bulan | | Proyek | Tak terbatas | | Deployment | Tak terbatas |

3. Setup Awal: Mempersiapkan Lingkungan

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

• Node.js 18+ terinstal.
• Git terkonfigurasi.
• Akun GitHub.
• Akun Supabase (gratis di supabase.com).
• Akun Vercel (gratis di vercel.com).
• Claude Code terinstal (npm install -g @anthropic-ai/claude-code).

Langkah 1: Buat Proyek

Buka terminal dan mulai Claude Code:

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

Sekarang Anda bisa mulai memberikan instruksi bahasa alami kepada Claude Code:

You: Create a Next.js 15 project with App Router, TypeScript, Tailwind CSS,
and shadcn/ui. Also initialize a Git repository.

Claude Code akan secara otomatis menjalankan:

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. Kunjungi supabase.com dan buat proyek baru.
2. Catat Project URL dan anon key dari Settings > API.
3. Kembali ke terminal dengan Claude Code:

You: Add Supabase to the project. Create a .env.local file with the variables
NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. Configure the
Supabase client with SSR support for Next.js App Router.

Claude Code akan membuat 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. Membangun Demo: Aplikasi Manajemen Tugas

Mari kita bangun demo konkret: sebuah aplikasi manajemen tugas dengan autentikasi, CRUD lengkap, dan antarmuka modern.

Mendefinisikan Schema Database

Berikan instruksi kepada Claude Code untuk membuat schema:

You: Create a SQL migration for Supabase with the following tables:

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

Enable Row Level Security on all tables and create appropriate policies.

Claude Code akan menghasilkan 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 bisa menjalankan migrasi ini langsung dari dashboard Supabase (SQL Editor) atau melalui CLI.

Generate Tipe TypeScript

You: Generate TypeScript types from the Supabase database and save them to src/types/database.ts

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

Membangun Antarmuka Pengguna

Sekarang datang bagian paling powerful dari vibecoding. Berikan Claude Code instruksi tingkat tinggi:

You: Create a dashboard page for the task management app with:

1. Sidebar with navigation between projects
2. Kanban view with 3 columns (Todo, In Progress, Done) with drag & drop
3. Modal to create/edit tasks
4. Header with user avatar and logout
5. Modern design with shadcn/ui and Tailwind

Use data from Supabase with React Server Components where possible
and Client Components only where interactivity is needed.

Claude Code akan membangun seluruh antarmuka, komponen demi komponen.

Menambahkan Autentikasi

You: Add a complete authentication system with:

1. Login page with email/password and GitHub login
2. Registration page
3. Middleware to protect authenticated routes
4. Automatic redirect for unauthenticated users
5. Automatic profile creation after registration

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

// 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. Pola Vibecoding Tingkat Lanjut

Prompting Iteratif

Rahasia vibecoding yang efektif adalah iterasi. Jangan mencoba mendeskripsikan semuanya dalam satu prompt. Lanjutkan bertahap:

Step 1: "Create the base layout with header and sidebar"
Step 2: "Add the project list in the sidebar with a button to create new ones"
Step 3: "Create the Kanban view in the main area"
Step 4: "Add drag & drop between columns"
Step 5: "Implement the modal to create new tasks"
Step 6: "Add toast notifications for user feedback"

Tip: Semakin spesifik dan kontekstual prompt, semakin baik hasilnya. Claude Code memiliki akses ke seluruh codebase, jadi bisa mengintegrasikan fitur baru secara koheren.

Penanganan Error

Ketika sesuatu tidak berfungsi (dan pasti akan terjadi), Anda bisa langsung bilang:

You: I'm getting this error in the console: "TypeError: Cannot read property
'map' of undefined" in the TaskList component. Fix it.

Claude Code akan menganalisis kode, mengidentifikasi masalah, dan memperbaikinya.

Refactoring dengan AI

You: The Dashboard component has become too large. Split it into smaller,
reusable components while maintaining the same functionality.

Pengujian

You: Add tests with Vitest for utility functions and Playwright tests for
the authentication and task creation flow.

6. Deploy ke Vercel: Dari Kode ke Dunia

Langkah 1: Push ke GitHub

You: Create an appropriate .gitignore, commit everything, and push to a new
GitHub repository called "my-demo-app".

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

Langkah 2: Hubungkan Vercel

1. Kunjungi vercel.com dan klik "Add New Project."
2. Impor repository GitHub yang baru saja Anda buat.
3. Tambahkan variabel environment:
   • NEXT_PUBLIC_SUPABASE_URL
   • NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Klik "Deploy."

Langkah 3: Konfigurasi Domain Kustom (Opsional)

Vercel menyediakan URL gratis seperti my-demo-app.vercel.app. Untuk domain kustom:

You: Add the configuration for a custom domain in vercel.json

Preview Deployment

Setiap kali Anda membuka Pull Request di GitHub, Vercel akan secara otomatis membuat preview deployment dengan URL unik. Sempurna untuk menunjukkan perubahan sebelum merge.

7. Optimasi untuk Demo Anda

Performa

You: Optimize the app's performance:
1. Add loading states with Suspense and skeletons
2. Implement caching with Next.js unstable_cache
3. Optimize images with next/image
4. Add SEO metadata for each page

Realtime dengan Supabase

Fitur yang selalu mengesankan di demo adalah realtime:

You: Add realtime synchronization for tasks using Supabase Realtime.
When a user updates a task, all other users should see the change
in real time without refreshing.

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

Mode Gelap

You: Add dark mode support with a toggle in the header.
Use Tailwind dark classes and save the preference in localStorage.

8. Praktik Terbaik untuk Vibecoding yang Efektif

1. Spesifik dalam Prompt Anda

❌ "Make a nice page"
✅ "Create a landing page with a hero section with a purple-blue gradient,
   a features section with 3 cards with icons, and an orange CTA button"

2. Berikan Konteks

❌ "Add authentication"
✅ "Add authentication with Supabase Auth. The project uses Next.js 15 App
   Router with TypeScript. I want email/password login and OAuth with GitHub.
   Use the SSR pattern with @supabase/ssr"

3. Iterasi dalam Langkah Kecil

Jangan mencoba membangun semuanya dalam satu prompt. Lanjutkan secara bertahap:

1. Layout dasar
2. Satu fitur dalam satu waktu
3. Styling dan polesan
4. Penanganan error
5. Pengujian

4. Tinjau Kode yang Dihasilkan

Vibecoding bukan berarti tidak membaca kode. Selalu tinjau:

• Keamanan: kebijakan RLS, validasi input, sanitasi data.
• Performa: query N+1, komponen client-side yang tidak perlu.
• Praktik terbaik: struktur proyek, konvensi penamaan.

5. Gunakan Git Secara Strategis

You: Commit the changes with a descriptive message after each completed feature.

Ini memungkinkan Anda untuk revert jika terjadi kesalahan.

9. Biaya: Apakah Benar-Benar Semuanya Gratis?

Berikut rincian biaya untuk setiap layanan:

| Layanan | Paket Gratis | Kapan Anda Membayar | |---------|-----------|-------------| | Claude Code | Memerlukan paket Anthropic (mulai $20/bulan) atau kunci API | Segera, tapi nilainya luar biasa | | Supabase | Tier gratis yang murah hati (2 proyek, 500MB DB) | Melebihi batas tier gratis | | Vercel | Tier gratis untuk proyek pribadi | Untuk tim atau penggunaan komersial | | GitHub | Gratis untuk repo publik dan privat | Fitur enterprise |

Catatan: Claude Code memerlukan langganan atau kredit API, tetapi pengembalian investasi dalam hal kecepatan pengembangan luar biasa. Untuk demo atau MVP, total biaya berkisar $20.

Alternatif AI Gratis

Jika Anda ingin biaya benar-benar nol, Anda bisa menggunakan:

• Cursor (tier gratis dengan batasan).
• GitHub Copilot (gratis untuk pelajar dan open source).
• Codeium/Windsurf (tier gratis yang murah hati).

10. Dari Demo ke Produk: Langkah Selanjutnya

Setelah demo Anda live, berikut cara melanjutkan:

1. Kumpulkan feedback: bagikan demo dengan pengguna potensial dan kumpulkan pendapat.
2. Iterasi cepat: gunakan vibecoding untuk mengimplementasikan perubahan yang diminta.
3. Pantau metrik: Vercel Analytics dan Supabase Dashboard memberikan data penting.
4. Skalakan saat diperlukan: upgrade ke paket berbayar hanya setelah permintaan tervalidasi.

Kesimpulan

Vibecoding dengan Claude Code, Supabase, dan Vercel merepresentasikan kombinasi yang powerful untuk membangun demo dan MVP dalam waktu rekor. Apa yang dulu membutuhkan berminggu-minggu pengembangan sekarang bisa diselesaikan hanya dalam beberapa jam, dengan tingkat kualitas yang mengejutkan.

Kuncinya adalah mendekati vibecoding dengan mindset yang tepat: ini bukan tentang "tidak bisa coding" tetapi tentang memperkuat kemampuan Anda dengan alat AI. Semakin banyak yang Anda ketahui tentang teknologi yang mendasari (React, SQL, autentikasi, deployment), semakin efektif Anda dalam memandu agen AI menuju hasil yang diinginkan.

Masa depan pengembangan perangkat lunak ada di sini, dan biaya untuk memulai tidak pernah serendah ini. Buat demo Anda, validasi dengan pengguna nyata, dan bangun produk besar berikutnya.

Checklist untuk demo pertama Anda:

• [x] Claude Code terinstal dan terkonfigurasi
• [x] Proyek Supabase dibuat dengan schema database
• [x] Proyek Next.js diinisialisasi dengan shadcn/ui
• [x] Autentikasi terkonfigurasi
• [x] CRUD lengkap diimplementasikan
• [x] UI modern dan responsif
• [x] Di-deploy ke Vercel
• [x] URL yang bisa dibagikan siap untuk feedback