Vibe Coding Full-Stack App dengan Bolt.new dan Supabase

Vibe coding telah mengubah cara developer membangun prototype dan MVP. Alih-alih menulis boilerplate selama berjam-jam, Anda cukup mendeskripsikan aplikasi yang diinginkan dalam bahasa alami dan AI akan menghasilkan codebase yang siap di-deploy. Bolt.new, platform vibe coding berbasis browser dari StackBlitz, memungkinkan pembuatan full-stack application lengkap dengan frontend, backend, dan database integration dalam hitungan menit.

Artikel ini adalah tutorial praktis untuk membangun aplikasi full-stack menggunakan Bolt.new dengan Supabase sebagai backend-as-a-service. Kita akan membuat aplikasi task management sederhana yang mencakup authentication, CRUD operations, dan real-time updates tanpa menulis satu baris backend code manual.

Apa itu Bolt.new?

Bolt.new adalah environment development berbasis AI yang berjalan sepenuhnya di browser. Dibangun di atas WebContainer technology dari StackBlitz, Bolt.new memungkinkan instalasi package npm, running dev server, dan editing file langsung di browser tanpa setup lokal.

Integrasi AI-nya memahami konteks seluruh project, sehingga bisa menggenerate komponen baru, memperbaiki bug, atau menambahkan fitur hanya dari instruksi chat. Kombinasi ini menjadikannya tool ideal untuk rapid prototyping dan vibe coding session.

Langkah 1: Setup Project di Bolt.new

Buka bolt.new di browser. Anda tidak perlu membuat akun untuk memulai, meskipun sign-in dengan GitHub akan menyimpan project history.

Di prompt utama, deskripsikan aplikasi yang ingin dibuat:

Buat aplikasi task management dengan React, Tailwind CSS, dan TypeScript.
Aplikasi memiliki fitur:
- Autentikasi user (login/register)
- CRUD tasks dengan priority dan due date
- Dashboard dengan statistik tasks
- Tampilan responsive untuk mobile dan desktop

Bolt.new akan mulai menggenerate struktur project, menginstall dependencies, dan membuat komponen-komponen dasar. Proses ini biasanya memakan waktu 1-2 menit tergantung kompleksitas.

Langkah 2: Integrasi Supabase untuk Backend

Setelah struktur frontend jadi, tambahkan backend dengan Supabase. Buat project baru di Supabase Dashboard. Dari project settings, copy Project URL dan anon public API key.

Kembali ke Bolt.new, buka terminal in-browser, dan install Supabase client:

npm install @supabase/supabase-js

Buat file lib/supabase.ts untuk inisialisasi client:

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseKey)

Tambahkan environment variables di .env:

VITE_SUPABASE_URL=PROJECT_URL
VITE_SUPABASE_ANON_KEY=ANON_KEY

Langkah 3: Buat Schema Database di Supabase

Buka SQL Editor di Supabase Dashboard dan jalankan query untuk membuat tabel tasks:

create table tasks (
  id uuid default gen_random_uuid() primary key,
  user_id uuid references auth.users not null,
  title text not null,
  description text,
  priority text check (priority in ('low', 'medium', 'high')),
  due_date date,
  completed boolean default false,
  created_at timestamp with time zone default now()
);

alter table tasks enable row level security;

create policy "Users can only access their own tasks" on tasks
  for all using (auth.uid() = user_id);

Policy RLS (Row Level Security) memastikan setiap user hanya bisa mengakses tasks miliknya sendiri. Ini adalah praktik keamanan wajib untuk aplikasi multi-user.

Langkah 4: Hubungkan Frontend ke Database

Gunakan chat Bolt.new untuk meminta integrasi CRUD operations dengan Supabase. Contoh prompt:

Hubungkan komponen TaskList ke Supabase.
Gunakan supabase client dari lib/supabase.ts.
Implementasikan:
- Fetch tasks untuk user yang login
- Tambah task baru
- Update status completed
- Hapus task
- Subscribe real-time updates

Bolt.new akan mengupdate komponen React dengan hooks dan handlers yang terintegrasi dengan Supabase. Verifikasi bahwa setiap operasi menggunakan .eq('user_id', user.id) untuk mematuhi RLS policy.

Untuk real-time subscription, pastikan kode mirip seperti ini ada di komponen utama:

useEffect(() => {
  const subscription = supabase
    .channel('tasks')
    .on('postgres_changes', { event: '*', schema: 'public', table: 'tasks' },
      (payload) => { fetchTasks() }
    )
    .subscribe()

  return () => { supabase.removeChannel(subscription) }
}, [])

Langkah 5: Deploy ke Production

Bolt.new menyediakan deploy one-click ke Netlify. Klik tombol Deploy di toolbar atas. Bolt.new akan membuild project dan menghasilkan URL production.

Untuk Supabase, pastikan Anda sudah mengupdate Site URL di Authentication Settings dengan domain Netlify yang baru. Tambahkan juga redirect URL untuk OAuth jika menggunakan social login.

Alternatif deployment bisa menggunakan Vercel dengan meng-export project ke GitHub terlebih dahulu. Bolt.new mendukung push langsung ke repository GitHub baru.

Tips Vibe Coding yang Efektif

Vibe coding bukan berarti tanpa kendali. Tetap review setiap perubahan yang di-generate AI, terutama untuk logic keamanan dan data handling. Gunakan prompt yang spesifik dan break down fitur besar menjadi instruksi kecil. Jika AI stuck dalam loop atau menghasilkan kode yang tidak kompilasi, reset context dengan membuat file baru atau mendeskripsikan ulang requirement.

Untuk project yang akan diskala ke production, pertimbangkan untuk meng-export codebase dari Bolt.new dan melanjutkan development di local environment dengan tooling standar. Dokumentasi lengkap Bolt.new tersedia di Bolt.new Docs.

Kesimpulan

Kombinasi Bolt.new dan Supabase mendemonstrasikan potensi vibe coding untuk mempercepat delivery aplikasi full-stack. Dalam waktu kurang dari satu jam, kita bisa membangun aplikasi task management lengkap dengan autentikasi, database, dan real-time updates. Meskipun masih perlu review manual untuk production readiness, workflow ini sangat powerful untuk prototyping, hackathon, atau MVP yang perlu dirilis dengan cepat.