1~
2**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."_
3~
4Dalam 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.
5~
6## 1. Apa Itu Vibecoding dan Mengapa Ia Revolusioner
7~
8Vibecoding mewakili anjakan paradigma asas dalam pembangunan perisian. Daripada menulis kod baris demi baris:
9~
101. **Pembangun menerangkan** apa yang mereka mahu dalam bahasa semula jadi.
112. **Ejen AI** menjana kod lengkap.
123. **Pembangun** menyemak, menguji, dan mengiterasi.
13~
14### Mengapa Ia Berkesan
15~
16- **Kelajuan**: projek yang mengambil masa berhari-hari boleh dibina dalam beberapa jam.
17- **Kebolehcapaian**: pembangun yang tidak pakar pun boleh membina produk yang berfungsi.
18- **Iterasi pantas**: anda boleh menguji idea dan pivot dengan lebih cepat.
19- **Fokus produk**: anda menumpukan pada _apa_ dan bukannya _bagaimana_.
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### Bila Menggunakan Vibecoding
32~
33Vibecoding sesuai untuk:
34~
35- **Demo dan MVP**: membina prototaip dengan cepat untuk mengesahkan idea.
36- **Hackathon**: mencipta produk berfungsi dalam beberapa jam sahaja.
37- **Projek sampingan**: meneroka teknologi baharu tanpa melabur berminggu-minggu.
38- **Bukti Konsep**: menunjukkan kemungkinan teknikal kepada pihak berkepentingan atau pelabur.
39~
40> **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.
41~
42## 2. Tumpukan Teknologi: Claude Code + Supabase + Vercel
43~
44### Claude Code
45~
46Claude Code ialah ejen pengkodan AI Anthropic. Ia berfungsi secara langsung di terminal anda dan boleh:
47~
48- Membaca dan memahami keseluruhan pangkalan kod.
49- Mencipta, mengubah suai, dan memadam fail.
50- Melaksanakan arahan terminal.
51- Berinteraksi dengan API dan perkhidmatan luaran.
52- Menguruskan kawalan versi dengan Git.
53- Mengiterasi secara autonomi pada ralat dan pepijat.
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 (Tier Percuma)
65~
66Supabase ialah alternatif sumber terbuka kepada Firebase yang menawarkan:
67~
68- **Pangkalan Data PostgreSQL**: pangkalan data hubungan yang lengkap.
69- **Pengesahan**: log masuk dengan e-mel, Google, GitHub, dll.
70- **API REST dan Realtime**: dijana secara automatik daripada skema anda.
71- **Storan**: untuk fail dan imej.
72- **Edge Functions**: fungsi tanpa pelayan.
73~
74Tier percuma termasuk:
75~
76| Sumber | Had Percuma |
77|----------|-----------|
78| Pangkalan Data | 500 MB |
79| Storan | 1 GB |
80| Lebar Jalur | 5 GB |
81| Panggilan Edge Function | 500K/bulan |
82| Pengguna yang disahkan | Tanpa had |
83| Projek | 2 projek aktif |
84~
85### Vercel (Tier Percuma)
86~
87Vercel ialah platform deployment yang sempurna untuk aplikasi Next.js:
88~
89- **Deployment automatik** daripada GitHub.
90- **Preview deployment** untuk setiap cawangan dan PR.
91- **CDN Global** untuk prestasi optimum.
92- **Serverless Functions** disertakan.
93- **Analitik asas** percuma.
94~
95Tier percuma termasuk:
96~
97| Sumber | Had Percuma |
98|----------|-----------|
99| Lebar Jalur | 100 GB/bulan |
100| Pelaksanaan Serverless Function | 100 GB-jam/bulan |
101| Binaan | 6,000 minit/bulan |
102| Projek | Tanpa had |
103| Deployment | Tanpa had |
104~
105## 3. Persediaan Awal: Menyiapkan Persekitaran
106~
107### Prasyarat
108~
109Sebelum bermula, pastikan anda mempunyai:
110~
111- **Node.js 18+** dipasang.
112- **Git** dikonfigurasi.
113- Akaun **GitHub**.
114- Akaun **Supabase** (percuma di [supabase.com](https://supabase.com)).
115- Akaun **Vercel** (percuma di [vercel.com](https://vercel.com)).
116- **Claude Code** dipasang (`npm install -g @anthropic-ai/claude-code`).
117~
118### Langkah 1: Cipta Projek
119~
120Buka terminal dan mulakan Claude Code:
121~
122```bash
123mkdir my-demo-app && cd my-demo-app
124claude
125```
126~
127Kini anda boleh memberikan arahan bahasa semula jadi kepada Claude Code:
128~
129```
130Anda: Cipta projek Next.js 15 dengan App Router, TypeScript, Tailwind CSS,
131dan shadcn/ui. Juga mulakan repositori Git.
132```
133~
134Claude Code akan melaksanakan secara automatik:
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### Langkah 2: Konfigurasi Supabase
143~
1441. Pergi ke [supabase.com](https://supabase.com) dan cipta projek baharu.
1452. Catat **Project URL** dan **anon key** daripada Settings > API.
1463. Kembali ke terminal dengan Claude Code:
147~
148```
149Anda: Tambah Supabase ke projek. Cipta fail .env.local dengan pemboleh ubah
150NEXT_PUBLIC_SUPABASE_URL dan NEXT_PUBLIC_SUPABASE_ANON_KEY. Konfigurasi
151klien Supabase dengan sokongan SSR untuk Next.js App Router.
152```
153~
154Claude Code akan mencipta konfigurasi lengkap:
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. Membina Demo: Aplikasi Pengurusan Tugas
196~
197Mari bina demo konkrit: **aplikasi pengurusan tugas** dengan pengesahan, CRUD penuh, dan antara muka moden.
198~
199### Tentukan Skema Pangkalan Data
200~
201Berikan arahan kepada Claude Code untuk mencipta skema:
202~
203```
204Anda: Cipta migrasi SQL untuk Supabase dengan jadual berikut:
205~
2061. profiles: id (uuid, FK ke auth.users), username (text), avatar_url (text), created_at
2072. projects: id (uuid), name (text), description (text), owner_id (uuid, FK ke profiles), created_at
2083. 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
209~
210Aktifkan Row Level Security pada semua jadual dan cipta polisi yang sesuai.
211```
212~
213Claude Code akan menjana migrasi lengkap:
214~
215```sql
216-- Create enum types
217CREATE TYPE task_status AS ENUM ('todo', 'in_progress', 'done');
218CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high');
219~
220-- Profiles table
221CREATE TABLE profiles (
222  id UUID REFERENCES auth.users ON DELETE CASCADE PRIMARY KEY,
223  username TEXT UNIQUE,
224  avatar_url TEXT,
225  created_at TIMESTAMPTZ DEFAULT NOW()
226);
227~
228-- Projects table
229CREATE TABLE projects (
230  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
231  name TEXT NOT NULL,
232  description TEXT,
233  owner_id UUID REFERENCES profiles(id) ON DELETE CASCADE NOT NULL,
234  created_at TIMESTAMPTZ DEFAULT NOW()
235);
236~
237-- Tasks table
238CREATE TABLE tasks (
239  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
240  title TEXT NOT NULL,
241  description TEXT,
242  status task_status DEFAULT 'todo',
243  priority task_priority DEFAULT 'medium',
244  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
245  assigned_to UUID REFERENCES profiles(id),
246  due_date TIMESTAMPTZ,
247  created_at TIMESTAMPTZ DEFAULT NOW(),
248  updated_at TIMESTAMPTZ DEFAULT NOW()
249);
250~
251-- Enable RLS
252ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;
253ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
254ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
255~
256-- Profiles policies
257CREATE POLICY "Users can view own profile"
258  ON profiles FOR SELECT USING (auth.uid() = id);
259CREATE POLICY "Users can update own profile"
260  ON profiles FOR UPDATE USING (auth.uid() = id);
261~
262-- Projects policies
263CREATE POLICY "Users can view own projects"
264  ON projects FOR SELECT USING (auth.uid() = owner_id);
265CREATE POLICY "Users can create projects"
266  ON projects FOR INSERT WITH CHECK (auth.uid() = owner_id);
267CREATE POLICY "Users can update own projects"
268  ON projects FOR UPDATE USING (auth.uid() = owner_id);
269CREATE POLICY "Users can delete own projects"
270  ON projects FOR DELETE USING (auth.uid() = owner_id);
271~
272-- Tasks policies
273CREATE POLICY "Users can view tasks in their projects"
274  ON tasks FOR SELECT USING (
275    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
276  );
277CREATE POLICY "Users can create tasks in their projects"
278  ON tasks FOR INSERT WITH CHECK (
279    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
280  );
281CREATE POLICY "Users can update tasks in their projects"
282  ON tasks FOR UPDATE USING (
283    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
284  );
285CREATE POLICY "Users can delete tasks in their projects"
286  ON tasks FOR DELETE USING (
287    project_id IN (SELECT id FROM projects WHERE owner_id = auth.uid())
288  );
289```
290~
291Anda boleh menjalankan migrasi ini secara langsung dari papan pemuka Supabase (SQL Editor) atau melalui CLI.
292~
293### Jana Jenis TypeScript
294~
295```
296Anda: Jana jenis TypeScript daripada pangkalan data Supabase dan simpan ke src/types/database.ts
297```
298~
299```bash
300npx supabase gen types typescript --project-id YOUR_PROJECT_ID > src/types/database.ts
301```
302~
303### Bina Antara Muka Pengguna
304~
305Kini bahagian vibecoding yang paling berkuasa. Berikan arahan tahap tinggi kepada Claude Code:
306~
307```
308Anda: Cipta halaman papan pemuka untuk aplikasi pengurusan tugas dengan:
309~
3101. Bar sisi dengan navigasi antara projek
3112. Paparan Kanban dengan 3 lajur (Todo, In Progress, Done) dengan seret & lepas
3123. Modal untuk mencipta/mengedit tugas
3134. Pengepala dengan avatar pengguna dan log keluar
3145. Reka bentuk moden dengan shadcn/ui dan Tailwind
315~
316Gunakan data daripada Supabase dengan React Server Components di mana mungkin
317dan Client Components hanya di mana interaktiviti diperlukan.
318```
319~
320Claude Code akan membina keseluruhan antara muka, komponen demi komponen.
321~
322### Tambah Pengesahan
323~
324```
325Anda: Tambah sistem pengesahan lengkap dengan:
326~
3271. Halaman log masuk dengan e-mel/kata laluan dan log masuk GitHub
3282. Halaman pendaftaran
3293. Middleware untuk melindungi laluan yang disahkan
3304. Ubah hala automatik untuk pengguna yang tidak disahkan
3315. Penciptaan profil automatik selepas pendaftaran
332```
333~
334Claude Code akan mengkonfigurasi middleware Next.js dan halaman auth:
335~
336```typescript
337// src/middleware.ts
338import { createServerClient } from '@supabase/ssr';
339import { NextResponse, type NextRequest } from 'next/server';
340~
341export async function middleware(request: NextRequest) {
342  let supabaseResponse = NextResponse.next({ request });
343~
344  const supabase = createServerClient(
345    process.env.NEXT_PUBLIC_SUPABASE_URL!,
346    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
347    {
348      cookies: {
349        getAll() {
350          return request.cookies.getAll();
351        },
352        setAll(cookiesToSet) {
353          cookiesToSet.forEach(({ name, value }) =>
354            request.cookies.set(name, value)
355          );
356          supabaseResponse = NextResponse.next({ request });
357          cookiesToSet.forEach(({ name, value, options }) =>
358            supabaseResponse.cookies.set(name, value, options)
359          );
360        },
361      },
362    }
363  );
364~
365  const { data: { user } } = await supabase.auth.getUser();
366~
367  if (!user && !request.nextUrl.pathname.startsWith('/auth')) {
368    const url = request.nextUrl.clone();
369    url.pathname = '/auth/login';
370    return NextResponse.redirect(url);
371  }
372~
373  return supabaseResponse;
374}
375~
376export const config = {
377  matcher: ['/((?!_next/static|_next/image|favicon.ico|auth).*)'],
378};
379```
380~
381## 5. Corak Vibecoding Lanjutan
382~
383### Prompting Berulang
384~
385Rahsia vibecoding yang berkesan adalah **iterasi**. Jangan cuba menerangkan semuanya dalam satu prompt. Teruskan langkah demi langkah:
386~
387```
388Langkah 1: "Cipta susun atur asas dengan pengepala dan bar sisi"
389Langkah 2: "Tambah senarai projek di bar sisi dengan butang untuk membuat yang baru"
390Langkah 3: "Cipta paparan Kanban di kawasan utama"
391Langkah 4: "Tambah seret & lepas antara lajur"
392Langkah 5: "Laksanakan modal untuk membuat tugas baru"
393Langkah 6: "Tambah pemberitahuan toast untuk maklum balas pengguna"
394```
395~
396> **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.
397~
398### Pengendalian Ralat
399~
400Apabila sesuatu tidak berfungsi (dan ia akan berlaku), anda boleh hanya berkata:
401~
402```
403Anda: Saya mendapat ralat ini di konsol: "TypeError: Cannot read property
404'map' of undefined" di komponen TaskList. Betulkan ia.
405```
406~
407Claude Code akan menganalisis kod, mengenal pasti masalah, dan membetulkannya.
408~
409### Refaktorkan dengan AI
410~
411```
412Anda: Komponen Dashboard telah menjadi terlalu besar. Pecahkan ia kepada
413komponen yang lebih kecil dan boleh guna semula sambil mengekalkan fungsi yang sama.
414```
415~
416### Ujian
417~
418```
419Anda: Tambah ujian dengan Vitest untuk fungsi utiliti dan ujian Playwright untuk
420aliran pengesahan dan penciptaan tugas.
421```
422~
423## 6. Deploy ke Vercel: Dari Kod ke Dunia
424~
425### Langkah 1: Push ke GitHub
426~
427```
428Anda: Cipta .gitignore yang sesuai, commit semuanya, dan push ke repositori
429GitHub baharu yang dipanggil "my-demo-app".
430```
431~
432```bash
433git add .
434git commit -m "feat: complete task management demo"
435gh repo create my-demo-app --public --push --source=.
436```
437~
438### Langkah 2: Sambung Vercel
439~
4401. Pergi ke [vercel.com](https://vercel.com) dan klik "Add New Project."
4412. Import repositori GitHub yang baru anda cipta.
4423. Tambah pemboleh ubah persekitaran:
443   - `NEXT_PUBLIC_SUPABASE_URL`
444   - `NEXT_PUBLIC_SUPABASE_ANON_KEY`
4454. Klik "Deploy."
446~
447```mermaid
448flowchart LR
449    A[GitHub Push] --> B[Vercel Build]
450    B --> C[Automatic Deploy]
451    C --> D[Public URL]
452    D --> E[Global CDN]
453```
454~
455### Langkah 3: Konfigurasi Domain Tersuai (Pilihan)
456~
457Vercel menyediakan URL percuma seperti `my-demo-app.vercel.app`. Untuk domain tersuai:
458~
459```
460Anda: Tambah konfigurasi untuk domain tersuai dalam vercel.json
461```
462~
463### Preview Deployment
464~
465Setiap kali anda membuka Pull Request di GitHub, Vercel akan secara automatik mencipta **preview deployment** dengan URL unik. Sempurna untuk menunjukkan perubahan sebelum merge.
466~
467## 7. Pengoptimuman untuk Demo Anda
468~
469### Prestasi
470~
471```
472Anda: Optimumkan prestasi aplikasi:
4731. Tambah keadaan pemuatan dengan Suspense dan skeleton
4742. Laksanakan caching dengan Next.js unstable_cache
4753. Optimumkan imej dengan next/image
4764. Tambah metadata SEO untuk setiap halaman
477```
478~
479### Realtime dengan Supabase
480~
481Ciri yang sentiasa mengagumkan dalam demo ialah **realtime**:
482~
483```
484Anda: Tambah penyegerakan masa nyata untuk tugas menggunakan Supabase Realtime.
485Apabila pengguna mengemas kini tugas, semua pengguna lain harus melihat perubahan
486dalam masa nyata tanpa memuat semula.
487```
488~
489```typescript
490'use client';
491~
492import { useEffect, useState } from 'react';
493import { createClient } from '@/lib/supabase/client';
494import type { Task } from '@/types/database';
495~
496export function useRealtimeTasks(projectId: string) {
497  const [tasks, setTasks] = useState<Task[]>([]);
498  const supabase = createClient();
499~
500  useEffect(() => {
501    const channel = supabase
502      .channel('tasks-changes')
503      .on(
504        'postgres_changes',
505        {
506          event: '*',
507          schema: 'public',
508          table: 'tasks',
509          filter: `project_id=eq.${projectId}`,
510        },
511        (payload) => {
512          if (payload.eventType === 'INSERT') {
513            setTasks((prev) => [...prev, payload.new as Task]);
514          } else if (payload.eventType === 'UPDATE') {
515            setTasks((prev) =>
516              prev.map((t) =>
517                t.id === payload.new.id ? (payload.new as Task) : t
518              )
519            );
520          } else if (payload.eventType === 'DELETE') {
521            setTasks((prev) =>
522              prev.filter((t) => t.id !== payload.old.id)
523            );
524          }
525        }
526      )
527      .subscribe();
528~
529    return () => {
530      supabase.removeChannel(channel);
531    };
532  }, [projectId, supabase]);
533~
534  return tasks;
535}
536```
537~
538### Mod Gelap
539~
540```
541Anda: Tambah sokongan mod gelap dengan togol di pengepala.
542Gunakan kelas dark Tailwind dan simpan keutamaan dalam localStorage.
543```
544~
545## 8. Amalan Terbaik untuk Vibecoding Berkesan
546~
547### 1. Jadilah Spesifik dalam Prompt Anda
548~
549```
550Tidak: "Buat halaman yang cantik"
551Ya: "Cipta halaman pendaratan dengan bahagian hero dengan kecerunan ungu-biru,
552   bahagian ciri dengan 3 kad dengan ikon, dan butang CTA oren"
553```
554~
555### 2. Berikan Konteks
556~
557```
558Tidak: "Tambah pengesahan"
559Ya: "Tambah pengesahan dengan Supabase Auth. Projek menggunakan Next.js 15 App
560   Router dengan TypeScript. Saya mahu log masuk e-mel/kata laluan dan OAuth dengan
561   GitHub. Gunakan corak SSR dengan @supabase/ssr"
562```
563~
564### 3. Iterasi dalam Langkah Kecil
565~
566Jangan cuba membina semuanya dalam satu prompt. Teruskan secara berperingkat:
567~
5681. Susun atur asas
5692. Satu ciri pada satu masa
5703. Penggayaan dan penggilap
5714. Pengendalian ralat
5725. Ujian
573~
574### 4. Semak Kod yang Dijana
575~
576Vibecoding tidak bermaksud tidak membaca kod. Sentiasa semak:
577~
578- **Keselamatan**: polisi RLS, pengesahan input, sanitasi data.
579- **Prestasi**: pertanyaan N+1, komponen pihak klien yang tidak perlu.
580- **Amalan terbaik**: struktur projek, konvensyen penamaan.
581~
582### 5. Gunakan Git secara Strategik
583~
584```
585Anda: Commit perubahan dengan mesej deskriptif selepas setiap ciri yang selesai.
586```
587~
588Ini membolehkan anda kembali jika sesuatu berjalan salah.
589~
590## 9. Kos: Adakah Semuanya Benar-benar Percuma?
591~
592Berikut ialah pecahan kos untuk setiap perkhidmatan:
593~
594| Perkhidmatan | Pelan Percuma | Bila Anda Membayar |
595|---------|-----------|-------------|
596| **Claude Code** | Memerlukan pelan Anthropic (bermula $20/bulan) atau kunci API | Serta-merta, tetapi nilainya sangat besar |
597| **Supabase** | Tier percuma yang murah hati (2 projek, 500MB DB) | Melebihi had tier percuma |
598| **Vercel** | Tier percuma untuk projek peribadi | Untuk pasukan atau kegunaan komersial |
599| **GitHub** | Percuma untuk repo awam dan peribadi | Ciri Enterprise |
600~
601> **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.
602~
603### Alternatif AI Percuma
604~
605Jika anda ingin mengekalkan kos pada sifar mutlak, anda boleh menggunakan:
606~
607- **Cursor** (tier percuma dengan had).
608- **GitHub Copilot** (percuma untuk pelajar dan sumber terbuka).
609- **Codeium/Windsurf** (tier percuma yang murah hati).
610~
611## 10. Dari Demo ke Produk: Langkah Seterusnya
612~
613Setelah demo anda langsung, inilah cara meneruskan:
614~
615```mermaid
616flowchart TD
617    A[Live Demo] --> B{User Feedback}
618    B --> C[Product Iteration]
619    C --> D[Product-Market Fit]
620    D --> E[Scaling]
621    E --> F[Supabase Pro Plan]
622    E --> G[Vercel Pro Plan]
623    E --> H[Custom Domain]
624```
625~
6261. **Kumpul maklum balas**: kongsi demo dengan pengguna berpotensi dan kumpul pendapat.
6272. **Iterasi dengan pantas**: gunakan vibecoding untuk melaksanakan perubahan yang diminta.
6283. **Pantau metrik**: Vercel Analytics dan Supabase Dashboard memberikan data penting.
6294. **Skala apabila perlu**: naik taraf ke pelan berbayar hanya apabila anda telah mengesahkan permintaan.
630~
631~
632## Kesimpulan
633~
634Vibecoding 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.
635~
636Kuncinya 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.
637~
638Masa 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.
639~
640> **Senarai semak untuk demo pertama anda:**
641>
642> - [x] Claude Code dipasang dan dikonfigurasi
643> - [x] Projek Supabase dicipta dengan skema pangkalan data
644> - [x] Projek Next.js dimulakan dengan shadcn/ui
645> - [x] Pengesahan dikonfigurasi
646> - [x] CRUD penuh dilaksanakan
647> - [x] UI moden dan responsif
648> - [x] Di-deploy ke Vercel
649> - [x] URL boleh dikongsi sedia untuk maklum balas
650~