Tutorial Vibe Coding: Membangun Aplikasi SaaS dengan Cursor AI

Vibe coding adalah metode pengembangan software di mana developer mengandalkan AI assistant untuk menulis, mereview, dan merefactor kode. Alih-alih mengetik setiap baris kode secara manual, developer memberikan instruksi dalam bahasa alami dan membiarkan AI menghasilkan implementasi. Cursor, editor berbasis VS Code yang dilengkapi AI agent built-in, telah menjadi salah satu tool paling populer untuk praktik ini.

Pada tutorial ini, kita akan membangun aplikasi SaaS full-stack lengkap menggunakan Cursor AI. Hasil akhirnya adalah dashboard analytics sederhana dengan autentikasi, database, dan API endpoint. Proses ini direncanakan selesai dalam 30 menit, namun hasilnya bisa langsung di-deploy ke Vercel atau Railway.

Prasyarat dan Setup Cursor

Unduh Cursor dari cursor.com. Installasi tersedia untuk macOS, Windows, dan Linux. Setelah terinstall, login dengan akun Google atau GitHub. Cursor menggunakan kredit berbasis subscription, namun versi free tier sudah cukup untuk tutorial ini dengan limit 2000 completions per bulan.

Buat direktori baru untuk proyek dan buka dengan Cursor:

mkdir cursor-saas-demo \ncd cursor-saas-demo \ncursor .

Pastikan Cursor mendeteksi direktori sebagai workspace. Di sidebar kiri, kamu akan melihat tab Chat, Composer, dan Agent. Untuk vibe coding, kita akan menggunakan mode Agent yang paling powerful. Mode ini memungkinkan AI untuk membaca banyak file, menulis kode, menjalankan terminal command, dan bahkan menginstall dependensi secara otomatis.

Langkah 1: Inisialisasi Project dengan Next.js dan Supabase

Buka panel Agent di Cursor dan berikan prompt inisialisasi project. Prompt yang baik harus spesifik tentang stack teknologi, struktur folder, dan fitur yang diinginkan. Contoh prompt:

Buatkan project Next.js 14 App Router dengan TypeScript. \nGunakan Supabase untuk database dan autentikasi. \nBuatkan schema tabel users dan analytics_events. \nTambahkan Shadcn UI untuk komponen dasar. \nStruktur folder: app/, components/, lib/, types/.

Cursor Agent akan membaca prompt, lalu menjalankan serangkaian command: npx create-next-app@latest, npx shadcn-ui@latest init, dan npm install @supabase/supabase-js. Agent juga akan membuat file .env.local dengan placeholder untuk Supabase URL dan anon key. Pantau setiap langkah di terminal panel yang muncul secara otomatis.

Setelah inisialisasi selesai, verifikasi struktur folder. Cursor biasanya akan membuat app/page.tsx, components/ui/, dan lib/utils.ts. Jika ada file yang kurang, tambahkan prompt lanjutan seperti: Tambahkan file lib/supabase.ts untuk client initialization.

Langkah 2: Membuat Schema Database dan API Route

Buka Supabase Dashboard di supabase.com dan buat project baru. Salin Project URL dan anon key ke file .env.local di Cursor. Kemudian, buat tabel menggunakan SQL Editor atau minta Cursor Agent membuatkan migration file.

Prompt untuk schema:

Buatkan tabel users dengan kolom: id (uuid), email (text), created_at (timestamp). \nBuatkan tabel analytics_events dengan kolom: id (uuid), user_id (uuid), event_name (text), event_data (jsonb), created_at (timestamp). \nTambahkan foreign key dari analytics_events.user_id ke users.id. \nGenerate SQL migration dan simpan ke supabase/migrations/001_initial.sql.

Cursor akan menulis SQL dan menjalankan supabase db push jika CLI Supabase sudah terinstall. Jika belum, install Supabase CLI terlebih dahulu. Setelah schema jadi, minta Cursor membuatkan API route Next.js untuk CRUD operations.

Buatkan route handler POST /api/events untuk menyimpan analytics event. \nGunakan supabase client dari lib/supabase.ts. \nValidasi body request dengan Zod. \nReturn 201 dengan data yang tersimpan.

Cursor akan membuat file app/api/events/route.ts dengan Zod schema, error handling, dan tipe TypeScript yang benar.

Langkah 3: Membangun Dashboard UI dengan Shadcn

Dengan backend sudah siap, sekarang fokus ke frontend. Minta Cursor Agent membuat halaman dashboard dengan tabel data dan chart sederhana. Shadcn UI sudah menyediakan komponen Table, Card, dan Button yang siap pakai.

Prompt untuk dashboard:

Buatkan halaman dashboard di app/dashboard/page.tsx. \nTampilkan tabel analytics_events dengan kolom event_name, created_at. \nGunakan Shadcn Table dan Card. \nTambahkan fetch data dari /api/events menggunakan React Query. \nTambahkan loading skeleton dengan Shadcn Skeleton.

Cursor akan menginstall @tanstack/react-query, membuat custom hook useAnalytics, dan menulis komponen dashboard dengan tipe yang type-safe. Jika ada error TypeScript, tanyakan Cursor: Fix TypeScript error di file dashboard. Cursor akan membaca error dari terminal, lalu mengedit file yang relevan.

Untuk menambahkan chart, minta Cursor menggunakan Recharts:

Tambahkan chart bar di dashboard yang menampilkan jumlah event per hari. \nGunakan Recharts. Aggregate data di frontend.

Cursor akan menginstall recharts, membuat komponen chart, dan menghubungkannya dengan data dari API.

Langkah 4: Menambahkan Autentikasi dengan Supabase Auth

Aplikasi SaaS tidak lengkap tanpa autentikasi. Supabase Auth menyediakan sistem autentikasi lengkap dengan OAuth, email/password, dan magic link. Minta Cursor mengintegrasikan autentikasi ke dalam project.

Prompt autentikasi:

Integrasikan Supabase Auth ke Next.js. \nBuatkan halaman login di app/login/page.tsx. \nGunakan Supabase Auth UI helpers untuk server dan client. \nRedirect ke dashboard setelah login. \nProtect route /dashboard dengan middleware.

Cursor akan membuat file app/login/page.tsx dengan form email dan password, file middleware.ts untuk route protection, dan context provider untuk auth state. Verifikasi bahwa user yang belum login di-redirect ke halaman login secara otomatis.

Untuk testing, buat akun test di Supabase Auth dan coba login. Cursor bisa membantu men-debug jika ada masalah dengan cookie atau session. Prompt yang berguna: Fix session not persisting after refresh di Next.js.

Langkah 5: Deploy ke Production dengan Vercel

Setelah aplikasi berfungsi di lokal, saatnya deploy. Cursor Agent bisa membantu mempersiapkan konfigurasi deployment. Untuk Vercel, prosesnya sangat mudah karena Next.js adalah first-class citizen di platform tersebut.

Pertama, pastikan repository sudah di-push ke GitHub. Inisialisasi git dan push:

git init \ngit add . \ngit commit -m "Initial commit: SaaS dashboard with Cursor AI" \ngit branch -M main \ngit remote add origin https://github.com/username/cursor-saas-demo.git \ngit push -u origin main

Kemudian, buat project baru di vercel.com dan import repository GitHub. Tambahkan environment variable Supabase URL dan anon key di dashboard Vercel. Deploy akan berjalan otomatis.

Cursor bisa membantu membuatkan vercel.json jika diperlukan konfigurasi khusus, misalnya untuk rewrite rules atau environment-specific settings. Setelah deploy berhasil, aplikasi SaaS akan live dengan URL vercel.app.

Kesimpulan

Vibe coding dengan Cursor AI memungkinkan developer untuk membangun produk functional dalam waktu yang jauh lebih singkat. Proses yang biasanya memakan hari kini bisa diselesaikan dalam 30 menit. Kunci utamanya adalah prompt engineering yang spesifik dan iteratif: berikan instruksi kecil, verifikasi hasil, lalu lanjutkan ke fitur berikutnya.

Cursor tidak mengganti pemahaman teknis developer, melainkan mempercepat eksekusi. Developer tetap harus mengerti arsitektur, security, dan best practices. Langkah selanjutnya: eksplorasi fitur Cursor Composer untuk multi-file editing, dan coba Cursor Tab untuk autocomplete prediktif. Download Cursor di cursor.com dan mulai vibe coding hari ini.

Gambar: Cursor