Sejauh mana pengembangan bisa dilakukan dengan vibe coding?

Ini adalah retrospeksi tentang hal-hal yang dirasakan dari sisi teknologi dan implementasi, bukan dari produk itu sendiri.

Ini sepenuhnya pemikiran pribadi.

Harap dipahami dengan mempertimbangkan bahwa ini adalah proyek yang dipelajari sambil dikerjakan pada semester berjalan di tahun ke-4 kuliah!

Mengapa proyek ini dimulai

• Mengembangkan produk dengan pola pikir membangun startup, dari sudut pandang PM/PO
• Meninjau apakah benar-benar mungkin membangun MVP full-stack dengan Claude Code
• Menyelesaikan masalah pencarian saham potensial dalam investasi saham
• Secara aktif mengadopsi produk komersial dan menarik insight dari proses tersebut

Timeline proyek dan informasi tambahan

• Perencanaan + pengembangan: 1 bulan
• Deployment: 1 minggu
• Operasional: 2 bulan
• Jumlah investasi
  • Claude Code: 100USD
  • Akun pengembang Apple: 100USD
  • AWS: sekitar 220USD
  • Managed DB: sekitar 300USD
  • Free tier: Datadog, Langfuse, Posthog
  • Iklan: 40.000 won
  • Total: sekitar 1 juta won (uang saya sendiri..)

Proses pengembangan

Frontend

• Mendefinisikan design token
• Mengimplementasikan 3 halaman inti dengan Figma
• Menerapkan design token ke Expo, lalu mengimplementasikannya dengan memanfaatkan Figma MCP
• Mencoba menggunakan Expo MCP, tetapi karena tidak stabil, debugging dilakukan langsung sambil melihat hasilnya
• Membuat halaman baru tanpa wireframe Figma dengan prompt seperti “gunakan design token, dan pinjam konsep desain dari halaman lain…”

Backend

• Meminta agar API dikembangkan berdasarkan requirement
• Meminta agar endpoint yang diperlukan juga dibuat berdasarkan requirement frontend
• Dengan memakai stack yang umum seperti Django, pengembangan dapat dilakukan dengan Claude Code tanpa bottleneck berarti dalam implementasi

AI

• Meminta agar arsitektur multi-agent didefinisikan dan diimplementasikan berdasarkan itu
• Menyertakan tautan web sebagai referensi agar sesuai dengan spesifikasi terbaru LangChain dan LLMOps
• Prompt untuk layanan LLM dibuat oleh LLM lalu digunakan

Observability

• Membangun berbasis ClickStack lalu bermigrasi ke Datadog
• Setelah seluruh sistem dikembangkan, logging dan analytics diterapkan

Infra

• Awalnya ingin menggunakan Pulumi, tetapi karena Claude Code tidak terlalu bagus dalam hal itu, file deployment dibuat melalui pembuatan skrip berbasis AWS CLI
• Karena pertimbangan biaya, CI/CD dan Dev Server tidak dibangun

Daftar teknologi yang diadopsi

• Layanan: langganan/pembayaran, social login, dark mode
• Data: pengumpulan data berbasis API, CDC, ETL
• AI: multi-agent, Text-to-SQL, Agentic RAG, streaming SSE, manajemen sesi, Retry, Rate Limit
• LLMOps: AB Test, Cloud Based Prompt Management (OTA Update), Synthetic Dataset, Evaluation

Insight

Implementasi

• Selama sekitar 1 bulan, dengan paket Claude Code 100USD, produk dengan volume seperti ini bisa dibuat sendirian
• UI diimplementasikan hanya dengan mendefinisikan spesifikasi design token; jika design system juga diimplementasikan dan dituangkan ke Claude.md, frontend bisa dikembangkan lebih cepat dan lebih stabil
• Pentingnya design system. Ini sangat meningkatkan produktivitas pengembangan frontend. Dibanding membuat Figma dulu, lebih cepat langsung mengimplementasikan lalu merevisinya. Bahkan ada halaman yang sudah benar-benar diimplementasikan tetapi tidak ada di Figma.
• Mendefinisikan edge case. Ini lebih penting lagi pada aplikasi mobile dan sistem AI. Kasus-kasus yang bukan happy path seperti pengelolaan timeout di seluruh sistem, kebijakan background, pemulihan streaming, dan error sederhana harus direncanakan dan diimplementasikan. Kadang Claude Code mengimplementasikan error handling sendiri, tetapi tidak menyelesaikannya secara rapi dan terintegrasi antara frontend dan backend. Karena itu, bagian seperti ini perlu diminta lagi secara khusus ke Claude Code.
• Refactoring skala besar dilarang. Pada awalnya semua kode React dan CSS dimasukkan ke satu file frontend, lalu dilakukan refactoring untuk memisahkannya. Hasilnya gagal. Memang terpisah, tetapi UI-nya menjadi berbeda dari sebelumnya, dan pada akhirnya pemisahan harus dilakukan sedikit demi sedikit. Sepertinya sejak awal pengembangan perlu memikirkan arsitektur kode, dan jika memakai komponen, hal terkait itu juga harus ditambahkan ke prompt agar dapat dimanfaatkan dengan baik.
• Memanfaatkan Claude.md. Setelah mengembangkan sebuah fitur, meminta Claude Code untuk menambahkan apa saja yang sebaiknya disimpan ke Claude.md berdasarkan hasil tersebut. Seiring waktu file menjadi besar, jadi kemudian diminta untuk hanya menyisakan hal-hal yang benar-benar penting dan menghapus sisanya. Readme dan claude.md digunakan secara tepat untuk mengatur konteks LLM. (masa sebelum ada skills)
• Tidak memanfaatkan sub-agent. Tanpa itu pun hasilnya sudah cukup baik, jadi tidak digunakan. Cukup meminta lewat mode Plan sampai rencana pengembangan menjadi konkret, lalu jika sudah cukup, agen dibiarkan mengembangkan secara mandiri.
• Sebaiknya paket dan teknologi didefinisikan serta diberitahukan sejak awal. Dengan mencantumkan spesifikasi secara akurat di Claude.md, Readme, atau dokumen tertentu, bisa dihindari pembuatan kode duplikat atau situasi memakai stack yang berbeda. (Skills?)

Sistem AI

• ReAct itu lambat. UX-nya buruk. Meskipun sudah disusun agar multi-agent berjalan paralel, tetap terlalu lambat.
• UX. Untuk mengatasi respons yang lambat, diperkenalkan UX yang menampilkan langkah multi-agent, streaming, animasi, rendering markdown dinamis, dan sebagainya. Tapi kalau jawaban tetap butuh 1 menit, apa artinya?... (aplikasi B2C)
• Manajemen prompt dan skema tool berbasis cloud. Bagus karena bisa diterapkan di lingkungan online. Sekarang rasanya ini sudah wajib, dan saya suka sekali Langfuse.
• Pada Text-to-SQL, skema harus dimasukkan ke dalam prompt. Namun ini memakan konteks terlalu banyak. Tampaknya bisa diselesaikan dengan fine-tuning atau RAG.
• Evaluasi dan iterasi. Synthetic Dataset disusun berdasarkan persona pengguna, lalu dievaluasi dengan LLM-as-a-Judge. Ingin mengotomatisasikannya, tetapi lagi-lagi resource pengembangan tidak cukup jika dikerjakan sendirian.
• Metrik evaluasi dan rubric: ternyata lebih merepotkan dari dugaan. Saya rasa metrik umum itu seperti DAU dan MAU. Dengan metrik seperti itu, insight tidak bisa ditarik. Metrik harus didefinisikan case by case untuk membedakan kasus berkualitas rendah, menyelesaikannya, lalu melakukan iterasi. Pada akhirnya, dibutuhkan sistem yang membantu membuat custom metric dengan baik. (kalau multi-turn bagaimana?..)
• OpenAI Tier ternyata lebih ketat dari dugaan. Di tier rendah, model yang bagus tidak bisa dipakai untuk operasional.

Infrastruktur

• AWS mahal, Managed DB mahal. Bagus sih, tapi tetap terasa menyesal
• Clickhouse sangat mahal, tetapi bagus. Karena memakai layanan managed, jadi nyaman. Terutama karena CDC juga bisa sekaligus. (buat apa cepat kalau LLM-nya lambat)
• Qdrant dan Redis Cloud juga tidak buruk. Waktu implementasinya singkat dan biayanya murah.
• Datadog. Sangat bagus. Hanya saja akan mahal, jadi saya hanya memakai free tier. Fitur yang terutama bagus adalah kemampuan mengumpulkan dan memberi tahu error yang terjadi secara terpisah. Digunakan dengan menempatkan agen sebagai sidecar di ECS.

Layanan

• Pembayaran dan langganan. Sempat mempertimbangkan Toss Pay tetapi akhirnya tidak digunakan. Pertama, ada biaya tahunan, dan karena tidak ada dokumentasi React Native, SDK-nya kurang bagus. Cukup mengecewakan. Hasil akhirnya, saya memilih Nice Payments. Tidak ada biaya tahunan dan ada development server, jadi pengembangannya bisa dilakukan dengan cukup mulus.
• Pembayaran Apple. Meskipun memakai Nice Payments, ada masalah. Kebijakan pembayaran Apple cukup ketat. Dalam proses pengembangan iOS ada isu kebijakan dari Apple, dan perlu diselesaikan lewat berbagai dokumen serta dari sisi UI. Rasanya lebih tenang kalau langsung memakai sistem pembayaran internal Apple saja.
• Pembayaran dan langganan (pembayaran otomatis) itu berbeda. Untuk mengimplementasikan pembayaran otomatis, dibutuhkan infrastruktur scheduling dan perhatian pada keamanan untuk menyimpan card key. Pada akhirnya memang berhasil diimplementasikan, tetapi ternyata lebih rumit dari dugaan. Ini membuat saya ingin mencoba Stripe.
• Push notification. Di Expo ini bisa dibangun dengan nyaman. Pada akhirnya memang harus ada back office untuk mengirim pesan, tetapi saya rasa ini fitur yang esensial.

Pikiran-pikiran

• Pentingnya software design pattern dan arsitektur tampaknya akan semakin tinggi.
• Saya berharap makin banyak orang tertarik untuk membuat hasil dengan coding agent yang melampaui sekadar toy project.
• Mari hindari over-spec. Tapi kalau mau dapat kerja, bukankah kita juga harus tahu over-spec? Mungkin lain kali lebih baik cukup satu instance dengan docker-compose saja...(dengan supabase?)
• Era startup solo hampir tiba. Tapi menurut saya, membuat sesuatu dan menghasilkan uang dari itu adalah dua hal yang berbeda.
• Mengerjakan semuanya sendirian itu tidak menyenangkan
• Linear juga cukup bagus dipakai sebagai pengganti Jira. Karena baru pertama kali menggunakannya, saya masih belum terlalu tahu cara melihat kumpulan tiket berdasarkan hierarkinya.

Hasil

• Proyek dihentikan karena tidak mampu menanggung biaya server.
• Saldo -100

Referensi

Ada tambahan isi mulai halaman 4.

https://figma.com/deck/wsGLEmFYOUPUheWBl1t23K/…

[angrybird0]

Saldo -100
wkwk

[chickendreamtree]

Terima kasih telah membagikan konten yang bagus.

[princox]

Itu pasti pengalaman yang sangat berharga. Saya juga ingat saat saya masih mahasiswa tingkat akhir, saya hampir tidak punya banyak pengalaman proyek. Sangat mengesankan bahwa dengan menggunakan AI, Anda bisa mengimplementasikan sampai sejauh itu.

[mark87]

Berbagi pengalaman seperti ini benar-benar menyenangkan. Saya membacanya dengan sangat baik. Ternyata Anda bahkan junior dari almamater saya, wow. Belakangan ini, apakah tantangan seperti ini memang sudah dicoba saat tahun ke-4? Benar-benar keren.

[slowandsnow]

Mungkin ini dibuat terlalu kompleks untuk tujuan pembelajaran, tetapi biayanya sangat disayangkan.

[awbrg789]

Mantap sekali.

[botplaysdice]

Akhir-akhir ini kualitas portofolio mahasiswa benar-benar luar biasa. Saat saya lulus 20 tahun lalu, rasanya saya benar-benar lulus tanpa tahu apa-apa, jadi ini hebat sekali.

[zxcv123]

AI benar-benar sudah sangat meratakan standar kemampuan.
Sekarang malah rasanya jawaban terbaik adalah cukup merekrut developer yang kepribadiannya baik aja wkwk