Vibe Coding 20 August 2024 4,571 views

Membangun Full-Stack App dalam Sehari dengan Vibe Coding: Studi Kasus Nyata

Ini dokumentasi real dari proses membangun aplikasi CRUD lengkap dalam satu hari kerja menggunakan Cursor dan Claude. Hasilnya mengejutkan.

Tantangan: bikin aplikasi manajemen task sederhana (think Todoist mini) dalam satu hari kerja, 8 jam, dari nol sampai deployed. Stack: Next.js 14, Prisma, PostgreSQL, Tailwind CSS. Deploy ke Vercel + Railway.

Ini bukan clickbait. Ini catatan per jam dari proses sebenarnya.

08.00 — Setup Proyek (30 menit)

Prompt ke Cursor: "Init Next.js 14 project dengan TypeScript, Tailwind CSS, Prisma dengan PostgreSQL adapter, dan folder structure yang scalable. Tambahkan ESLint dan Prettier."

AI generate semua konfigurasi dasar. Manual review: cek package.json, tsconfig, prisma schema awal. Tweaking: ubah folder structure sedikit sesuai preferensi.

08.30 — Database Schema (45 menit)

Prompt: "Buat Prisma schema untuk aplikasi task management dengan fitur: user, projects, tasks (dengan priority dan due date), dan tags. Include soft delete."

AI generate schema. Gue review dan tambahkan beberapa field yang terlewat, jalankan migration. Total iterasi: 3 kali percakapan sampai schema memuaskan.

09.15 — API Routes (2 jam)

Ini bagian paling menarik. Satu per satu endpoint dibuat dengan AI:

GET/POST /api/projects — 15 menit
CRUD /api/tasks — 30 menit
Auth dengan NextAuth.js — 45 menit (ini yang paling banyak iterasi)
Tags endpoint — 20 menit

Tiap endpoint langsung gue test pakai Postman. Ada 2 bug yang AI generate sendiri — keduanya ketahuan waktu testing dan bisa di-fix dalam 5 menit.

11.15 — Frontend Components (2.5 jam)

Ini di mana Cursor benar-benar shine. Prompt: "Buat TaskCard component dengan Tailwind CSS — tampilkan title, priority badge (warna berbeda per level), due date, dan actions (edit, delete, toggle complete). Harus responsive dan accessible."

Hasilnya langsung 80% sesuai. Dua kali iterasi untuk warna dan spacing, selesai.

13.45 — Polish & Bug Fix (1 jam)

Review menyeluruh, fix edge cases, tambah loading states dan error boundaries. Ini yang paling banyak dilakukan manual — AI kurang bagus untuk mendeteksi edge cases yang implisit.

14.45 — Deploy (30 menit)

Push ke GitHub, connect Vercel, setup Railway PostgreSQL, set environment variables. Aplikasi live jam 15.15.

Takeaway

Total waktu efektif: ~7 jam. Estimasi tanpa AI: 3-5 hari. Tapi penting dicatat — ini bisa karena gue sudah pahami stack-nya. Developer yang belum familiar dengan Next.js tidak akan secepat ini meski dengan AI, karena tidak tahu cara review dan fix output AI-nya.

Vibe coding amplifies existing skill — tidak menciptakan skill dari nol.