Studi Kasus Buildfolio: Platform Showcase Project untuk Developer

Halo! Di artikel ini saya mau membedah proses pembuatan Buildfolio—sebuah platform full-stack untuk developer menemukan, membagikan, dan membangun portfolio project mereka. Inspirasinya datang dari GitHub Explore, Product Hunt, dan Dev.to. Project ini lahir sebagai bagian dari program Fullstack Developer Bootcamp di harisenin.com.

💡 Fun fact: Versi ini merupakan hasil migrasi ke Next.js 16 (App Router) dari versi awalnya yang dibangun menggunakan React (Vite) + Express.js.

🏗️ Kenapa Buildfolio?

Sebagai developer, kita sering butuh tempat showcase karya yang lebih interaktif dari sekadar repository GitHub. Buildfolio hadir untuk menjawab kebutuhan itu. Beberapa fitur kuncinya:

• Discover project developer lain (filter & sort).
• Showcase project dengan stack, repo, dan live URL.
• Like & bookmark project.
• Sistem komentar.
• Dashboard manajemen project (CRUD).
• Autentikasi dengan email/password & Google OAuth.

🛠️ Keputusan Tech Stack

Untuk versi migrasi ini, saya beralih dari arsitektur terpisah (React + Express) ke arsitektur full-stack unified.

Komponen	Pilihan & Alasan
Framework	Next.js 16 (App Router). Memberikan pengalaman full-stack dengan API Route Handlers di satu tempat, mempercepat development.
Styling	Tailwind CSS v4 + shadcn/ui. Kombinasi andalan untuk UI yang clean, konsisten, dan mudah dikustomisasi.
Database	PostgreSQL (Neon). Serverless database yang cepat dan mudah di-scale.
ORM	Prisma v7. Developer experience yang luar biasa, type-safe, dan terintegrasi mulus dengan Next.js.
State Management	Redux Toolkit. Digunakan untuk global state yang kompleks.
Auth	NextAuth v4. Mempermudah integrasi Google OAuth, ditambah custom JWT dengan httpOnly cookie untuk login manual.
Storage	Uploadthing. Solusi paling praktis untuk handle file upload di Next.js.

🧩 Tantangan & Solusi

1. Keamanan Autentikasi

Saya ingin autentikasi manual yang aman tapi tidak ribet.

• Solusi: Menggunakan bcrypt untuk hashing password dan menyimpan JWT dalam httpOnly cookie (berlaku 7 hari). Ini mencegah serangan XSS karena cookie tidak bisa diakses via JavaScript client-side. Saya juga menambahkan mekanisme rate limiting (10 percobaan login/15 menit) untuk mencegah brute-force attacks.

2. Migrasi Database Relasional

Pada versi Vite, saya menggunakan MockAPI. Di versi ini, semua data harus direlasikan dengan benar (User ↔ Project ↔ Comments/Bookmarks).

• Solusi: Implementasi Prisma ORM dengan PostgreSQL. Ini menyelesaikan masalah konsistensi data (seperti constraint UUID yang sesungguhnya, bukan sekadar string acak MockAPI).

3. Serverless API

Alih-alih menyalakan server Express.js terpisah yang memakan biaya/resource, Next.js memungkinkan semuanya berada di satu repo.

• Solusi: Membangun API Route Handlers di /app/api/ untuk users, projects, bookmarks, dan comments.

🚀 Apa Selanjutnya?

Aplikasi ini sudah live, tapi masih ada ruang untuk berkembang. Beberapa fitur yang sedang direncanakan:

• Integrasi AI (Groq + Llama) untuk generate deskripsi project dan README secara otomatis.
• Halaman dokumentasi public API.

Membangun Buildfolio mengajarkan saya banyak hal tentang migrasi sistem, pengelolaan httpOnly cookies, dan betapa powerful-nya Next.js App Router ketika digabungkan dengan Prisma dan Serverless Postgres.

Tertarik melihat kodenya? Cek Buildfolio di GitHub.