Proyek Capstone
Dari Ide ke Production
"The difference between a student project and a real product is not the code—it's the thinking behind every decision, the care in every detail, and the responsibility for what you put into the world."
HTML, CSS, JavaScript, arsitektur web, mental model client-server
Prompt engineering, evaluasi kritis output AI, debugging systematic
React/Next.js, database, authentication, deployment
Meta-skills, debugging tanpa AI, production readiness
Bab 12 adalah sintesis. Anda akan mengintegrasikan semua kompetensi tersebut dalam satu proyek lengkap yang mensimulasikan pengembangan produk nyata.
Bab 1–11 adalah blok-blok Lego yang Anda kumpulkan satu per satu.
Bab 12 adalah ketika Anda menyusun semua blok tersebut menjadi struktur yang utuh, fungsional, dan bermakna.
Perbedaan penting: Blok Lego memiliki instruksi perakitan. Di bab ini, tidak ada instruksi perakitan.
Anda adalah arsitek yang menentukan apa yang dibangun, bagaimana strukturnya, dan mengapa setiap keputusan diambil.
SaaS (Software as a Service) adalah model delivery software di mana aplikasi di-host oleh provider dan diakses user melalui internet, dengan model subscription atau pay-per-use.
Satu instance aplikasi melayani banyak user/organisasi, tetapi data mereka terisolasi.
User membayar bulanan/tahunan untuk akses. Perlu track: siapa berlangganan, kapan expired.
User bisa sign up dan mulai tanpa sales call atau instalasi manual.
Tidak perlu install software. Akses dari browser manapun.
Data user disimpan di cloud, bisa diakses dari device manapun.
Harus handle pertumbuhan user tanpa downtime atau degradasi performa.
| Aspek | Student Project | Product (SaaS) |
|---|---|---|
| Error Handling | "Kalau error ya refresh" | Setiap error ter-handle gracefully dengan message yang jelas |
| Data Loss | "Kalau data hilang ya input lagi" | Data TIDAK BOLEH hilang. Backup, transaction, validation ketat |
| Security | "Cuma saya yang pakai" | Siapa saja bisa sign up — proteksi dari abuse, injection, XSS |
| Performance | "Lumayan cepat di laptop saya" | Harus cepat untuk user dengan koneksi lambat di device lama |
| Monitoring | "Kalau down saya restart" | Monitoring otomatis, alert, error tracking, uptime logging |
Mindset shift: Anda tidak lagi berpikir "Apakah ini cukup untuk dapat nilai A?" tetapi "Apakah saya comfortable orang asing menggunakan ini?"
Software development yang baik adalah 30% coding, 70% thinking, planning, dan reviewing.
Problem: Freelancer dan small business perlu cara cepat membuat invoice profesional tanpa software mahal.
Core Features:
Technical Challenges: PDF generation, public sharing dengan secure token, auto-calculation, invoice number auto-increment
Problem: Profesional (konsultan, dokter, tutor) perlu sistem booking yang memudahkan client memesan slot waktu.
Technical Challenges: Timezone handling, conflict detection, calendar UI, email notification
Problem: Marketer dan content creator perlu link pendek yang trackable — tahu berapa kali di-click, dari mana, device apa.
Technical Challenges: Unique short code generation, high-volume tracking, analytics query optimization, privacy (hash IP)
User persona adalah representasi fiktif tetapi realistis dari target user Anda. Ini menjadi north star — setiap keputusan desain dan implementasi harus mengacu kembali ke: "Apakah ini membantu user persona saya?"
Action Item: Tulis user persona untuk proyek yang Anda pilih. Ini bukan formalitas — persona yang baik mencegah Anda membangun fitur yang tidak ada yang butuhkan.
| Priority | Label | Meaning | Action |
|---|---|---|---|
| Must Have | 🔴 Critical | Tanpa fitur ini, produk tidak berfungsi | Build di MVP |
| Should Have | 🟡 Important | Important tetapi tidak blocking | Build jika waktu tersedia |
| Could Have | 🟢 Nice-to-Have | Akan bagus jika ada, tetapi tidak esensial | Skip untuk MVP, document untuk future |
| Won't Have | ⚪ Deferred | Tidak akan di-build dalam scope ini | Document sebagai future roadmap |
Kemampuan mengatakan "tidak" pada fitur yang menarik adalah salah satu skill terpenting product development.
| Concern | Decision | Justification |
|---|---|---|
| Frontend Framework | Next.js 14 (App Router) | Familiar, SSR & SSG, API routes, Vercel deployment seamless |
| Backend & Database | Supabase (PostgreSQL + Auth) | Familiar, built-in auth, RLS untuk data isolation |
| Styling | Tailwind CSS | Rapid development, consistent design system, responsive |
| Deployment | Vercel + Supabase | Zero-config, auto HTTPS, monitoring built-in |
| Monitoring | Sentry (free tier) | Real-time error tracking, source map support, email alerts |
Next.js frontend dengan React components, App Router pages, client-side state management. Ini yang user lihat dan interaksikan.
Next.js API Routes untuk server-side logic. Supabase Client SDK sebagai jembatan ke backend.
PostgreSQL database, Authentication Service, Storage untuk file (PDFs, images).
Data flow: user interaction → HTTP request → Next.js API → Supabase SDK → PostgreSQL → response kembali
Hindari data duplication. Pecah data menjadi tabel-tabel yang saling terelasi via foreign key.
Setiap relasi harus eksplisit dengan FK constraint. Memastikan referential integrity.
Tambahkan index di kolom yang sering di-query. Trade-off: mempercepat read, memperlambat write.
Setiap tabel harus punya created_at dan updated_at. Memudahkan debugging dan audit trail.
RLS memastikan data isolation di level database — enforcement, bukan hanya check di API.
Auto-increment dan concurrent operations perlu unique constraints + retry logic.
User harus bisa menemukan fitur dengan intuitif — tanpa harus "berpikir" di mana sesuatu berada.
Action Item: Buat sitemap untuk proyek Anda. Pilih 2 user flow terpenting dan tulis step-by-step dengan error states yang jelas.
AI Training Wheels dilepas sepenuhnya. Ini adalah graduation test.
Gunakan AI untuk kecepatan, jangan korbankan kualitas atau pemahaman.
Setiap fitur must-have harus ditest manual. Happy path dan error path.
RLS policies diverifikasi. Input validation di semua form. Auth check di semua protected routes.
Lighthouse score ≥ 90. Image optimization. Bundle size analysis. Core Web Vitals lolos.
Semantic HTML. ARIA labels. Keyboard navigation. Screen reader friendly.
Sentry dikonfigurasi. Error boundaries di React. Graceful error messages.
User docs. Technical docs. Architecture decision records. Future roadmap.
Production Readiness Checklist wajib diselesaikan sebelum launch
Setelah deployment, refleksi adalah tahap terpenting untuk konsolidasi pembelajaran.
"The unexamined project is not worth building." — Refleksi mengubah experience menjadi learning.
Proyek ini bukan hanya latihan — ini adalah bukti konkret kompetensi Anda kepada calon employer.
URL production yang bisa diakses siapa saja. Lebih powerful dari 100 baris CV.
Clean commit history, README yang comprehensive, code yang readable.
Dokumentasi keputusan desain, trade-offs, challenges solved. Menunjukkan thinking process.
Yang dicari employer bukan "bisa coding" tetapi "bisa ship product dari ide ke production"
Anda telah membangun fondasi yang solid. Capstone ini adalah titik awal, bukan akhir.
Software development adalah craft yang terus berkembang. AI akan terus berevolusi. Framework akan datang dan pergi. Tetapi kemampuan Anda berpikir sistemik, mengevaluasi trade-off, dan bertanggung jawab atas kualitas produk — skill ini akan tetap relevan.
Selamat membangun. 🚀