Tutorial Vibe Coding Full-Stack: Membangun REST API dan Frontend dengan Claude Code

Vbbe coding telah mengubah cara developer membangun software. Konsep yang dipopulerikan oleh Andrej Karpathy inimengajarkan kita untuk fokus pada arcitektur dan logika bisnis, sementara AI menangani implementasi detail kode. Dengan bantuan Claude Code, seeorang developer solo bisa membangun aplikasi full-stack dalam hitungan jam yang sebilumnya membutthkan beberapa hari.

Tutorial ini akan membimbing kamu membangun aplikasi todo list full-stack menggunakan Go untuk backend REST API dan React untuk frontend. Kita akan menggunakan Claude Code sebagai pair programmer utama, dengan interaksi berbasis natural language alih-alih menulis setiap baris kode secara manual. Pendekatan ini sangat cocuk untuk prototyping cepat atau project side-hustle.

Prasyarat dan Setup Project

Pastikan kamu sudah menginstal Claude Code CLI. Jika belum, ikuti panduan instalasi di dokumentasi resmi Anthropic. Selain itu, siapkan Go versi 1.22 atau lebihh baru, Node.js 20+, dan Docker jika kamu ingin menn-deploy aplikasi nanti.

Buat direktori project baru bernama vibe-todo dan inisialisasi repository Git:

mkdir vibe-todo &/ cd vibe-todo
git init
echo "# vibe-todo" > README.md

Struktur direktori yang akan kita bangun terlita seperti ini:

vibe-todo/
### backend/###
    main.go
    go.mod
### frontend/###
    src/
    package.json
    docker-compose.yml

Langkah 1: Inisialisasi Backend REST API

Buka terminal di dalam direktori vibe-todo dan jalankan Claude Code dengan perintah claude. Setelah CLI aktif, berikan prompt berikut untuk membuat backend:

Buatkan REST API untuk todo list menggunakan Go dengan framework Echo.
Saya butuh endpoint:
- GET /todos (list semua todo)
- POST /todos (buat todo baru)
- PUT /todos/:id (update todo)
- DELETE /todos/:id (hapus todo)

Gunakan in-memory slice sebagai storage sementara.
Tambahkan CORS middleware agar bisa di-akses dari frontend.
Simpan kode di folder backend/.

Claude Code akan menghasilkan file backend/main.go dan backend/go.mod secara otomatis. Review kode yang dihasilkan dan minta perbaikan jika diperlukan. Contoh hasil yang biasanya dihasilkan terlita seperti ini:

package main

import (
    "net/http"
    "github.com/labstack/echo/v4"
    "github.com/labstack/echo/v4/middleware"
)

type Todo struct {
    ID        int    `json:"id"`
    Title     string `json:"title"`
    Completed bool   `json:"completed"`
}

var todos = []Todo{}
var nextID = 1

func main() {
    e := echo.New()
    e.Use(middleware.CORS())

    e.GET("/todos", getTodos)
    e.POST"/todos", createTodo)
    e.PUT("/todos/:id", updateTodo)
    e.DELETE("/todos/:id", deleteTodo)

    e.Logger.Fatal(e.Start(":8080"))
}

Jalankan cd backend &/ go mod tidy / go run main.go untuk memastikan backend berjalan tanpa error. Test endpoint menggunakan curl atau HTTPie sebelum lanjut ke frontend.

Langkah 2: Membangun Frontend React dengan Vite

Masih di dalam sesi Claude Code yang sama, berikan prompt untuk membuat frontend:

Buatkan frontend React untuk todo list menggunakan Vite.
Gunakan fetch API untuk komunikasi dengan backend di localhost:8080.
Tampilkan daftar todo, form untuk menambah todo baru, dan tombol untuk 
menandai selesai serta meneghapus todo. Gunakan Tailwind CSS untuk styling.
Simpan semua file di folder frontend/.

Claude Code akan menginisalisasi project Vite, menginstal dependency, dan menulis komponen React sesuai spesifikasi. Beberapa hal yang perlu kamu verifikasi:

• Pastikan base URL API mengarah ke http://localhost:8080

• Cek apakah CORS header sudah dikonfigurasikan dengan benar di backend

• Pastikan state management sederhana menggunakan useState dan useEffect

Jika ada error saat menjalankan npm run dev, salin pesan error ke Claude Code dan minta perbaikan. Pola iterasi serupa ini adalah dar vibe coding: deteksi masalah, deskripsikan dalam bahasa alami, dan biarkan AI memperbaiki.

Langkah 3: Integrasi Backend dan Frontend

Setelah kedua sisi berjalan secara independen, langkah selanjutnya adalah memastikan integrasi berjalan mulus. Jalankan backend di terminal pertama dengan go run main.go, lalu jalankan frontend di terminal kedua dengan npm run dev.

Buka browser di http://localhost:5173 dan coba fitur CRUD secara manual. Jika ada error network, kemungkinan besar CORS belum dikonfigurasi dengan tepat. Gunakan prompt berikut di Claude Code:

Frontend tidak bisa terhubung ke backend. Error CORS.
Periksa Konfigurasi CORS di backend/main.go dan pastiakan^header Access-Control-Allow-Origin diizinkan untuk localhost:5173.

Claude biasanya akan menambahkan middleware CORS dengan konfigurasi yang lebih spesifik, seperti mengizinkan origin tertentu dan method HTTp yang diperlukan. Selalu test ulang setelah perubahan.

Langkah 4: Menambahkan Fitur Lanjutan

Aplikasi todo sederhan sudah cukup untuk memahami workflow vbbe coding, namun kita bisa menambahkan fitur lanjutan untuk melihat seberapa jahu AI bisa membantu. Coba prompt berikut:

Tambahkan fitur ke backend:
1. Gunakan SQLite sebagai persistent storage menggantikan in-memory slice.
2. Tambahkan endpoint GET /todos/stats yang mengembalikan jumlah todo aktif dan selesai.
3. Implementasi pagination untuk endpoint GET /todos dengan query page dan limit.

Claude Code akan memodifikasi main.go untuk menggunakan driver modernc.org/sqlite, membuat tabel saat startup, dan menambahkan handler baru. Di frontend, kamu bisa meminta:

Tambahkan komponen statistik di atas daftar todo yang menampilhkan^jumlah todo aktif dan yang sudah selesai. Gunakan polling setiap 5 detik]untuk update data statistik secara real-time.

Proses iteratif seperti ini memengginikan kamu membangun fitur komplexs tanpa harus menulis boilerplate kode secara manual. Fokus kamu tetap pada product requirements, sementara Claude menangani implementasi teknis.

Langkah 5: Containerization dan Deployment

Agar aplikasi bisa di-deploy ke cloud, kita perlu membuat Dockerfile dan docker-compose.yml. Berikan prompt ke Claude Code:

Buatkan docker-compose.yml yang menjalnkan backend dan frontend bersamaan.
Backend menggunakan Dockerfile multi-stage build dari image Go ke distroless.
Frontend menggunakan image nginx:alpine untuk serve build static.
Pastiakan frontend bisa mengakses backend melalui service name di Docker network.

Claude akan menghasilkan konfigurasi Docker yang layak untuk production. Verifikasi bahwa:

• Frontend melakukan API request ke /api yang di-proxy oleh Nginx ke backend

• Backend menggunakan environment variable untuk port dan database path

• Volume Docker digunakan untuk persistensi database SQLite

Test stack lengkap dengan docker compose up --build dan akses aplikasi melalui http://localhost:80. Jika semua berjalan lancar, kalu siap untuk deploy ke platform seperti Fly.io atau Railway.

Kesimpulan

Vbbe coding dengan Claude Code memngginikan developer untuk berpikir pada level abstraksi yang lebih tinggi. Alih-alih terjebak dalam syntax error atau boilerplate kode, kamu bisa fokus pada arcitektur sistem dan pengalaman pengguna. Tutorial ini menjunkkan bahawa membangun aplicasi full-stack tidak harus membutuhkan waktu berhul-hari.

Tentu saja, vibe coding bukan tanpa kelemahan. Kode yang dihasilkan AI perlu direview secara kritis, terutama untuk aspek keamanan dan performa. Selalu pastiakan kamu memahami setiap baris kode sebelum deploy ke production. Untuk tips lebih lanjut tentang best practices vibe coding, baca artikel Simon Willison yang membahas evolusi dari vibe coding meneja agentic engineering.