Saya mencoba melakukan vibe coding untuk aplikasi memasak berisi 35.000 baris

• Seorang investor yang juga mantan pendiri startup mengembangkan aplikasi memasak ini lewat 20 jam sesi vibe coding
• Fitur intinya adalah asisten suara yang memungkinkan pengoperasian saat memasak tanpa menggunakan tangan
• Backend API Rails 8 + frontend React + Realtime Voice API dari OpenAI
• Memanfaatkan fitur function calling dari OpenAI untuk navigasi real-time di dalam situs
• Menggunakan Claude Code dan Gemini 2.5 Pro untuk melengkapi fitur yang kompleks
• Total ukuran kodenya sekitar 35.000 baris
• Melalui perintah suara, pengguna dapat menjelajahi berbagai resep tanpa perlu menyentuh perangkat secara langsung
• Menyediakan antarmuka percakapan yang terasa alami
• Dimulai sebagai proyek hobi, tetapi hasil akhirnya cukup matang dengan fitur yang benar-benar berguna dan pengalaman pengguna yang baik

Menyelesaikan aplikasi memasak dengan vibecoding

• Aplikasi memasak recipeninja.ai ini dirancang dan dibuat langsung hanya dalam 20 jam
• Penulisnya adalah mantan pendiri startup yang kini menjadi investor di Y Combinator, serta seorang 'developer yang sudah berkarat' karena hampir tidak menggunakan Ruby sejak 2015
• Ia memang suka memasak dan sudah lama menyimpan ide tentang “aplikasi memasak hands-free”
• Ia mengeluhkan bahwa situs resep yang ada terlalu berorientasi SEO, UX aplikasi-aplikasinya juga terasa usang, dan aplikasi seperti Paprika masih terasa seperti produk tahun 2009

Pemilihan alat dan awal proyek

• Pada awalnya ia mencoba membuat aplikasi permainan kata dengan Lovable, tetapi segera menemui batasannya
• Setelah itu ia beralih ke Windsurf untuk menyusun backend API Rails 8 + frontend React
• Homebrew, npm, pengaturan versi Ruby, kunci SSH, hingga konfigurasi Heroku ikut diotomatisasi
• Migrasi Rails juga ditangani otomatis mengikuti konvensi standar

Pengembangan fitur dasar

• Dengan input sederhana seperti “Lasagne”, aplikasi bisa menghasilkan resep lengkap
• Teks resep dibuat melalui OpenAI, sedangkan suara dihasilkan lewat ElevenLabs
• Dilengkapi fitur panduan suara per langkah dan output gambar
• Menariknya, Windsurf juga sangat tegas memperingatkan agar API key tidak sampai terekspos karena risiko keamanan

Perluasan fitur dan alur pengembangan yang iteratif

• Fitur “impor resep lanjutan” berbasis foto bisa dibuat hanya dalam hitungan menit
• Jika log konsol atau pesan error di-copy-paste, Windsurf akan memperbaikinya secara otomatis
• Saat menghubungkan Google OAuth, cukup menempelkan screenshot pengaturan dan ia langsung menangkap bagian yang salah
• Penambahan fitur seperti penyimpanan resep per pengguna, pengaturan publik/pribadi, dan lainnya juga hampir sepenuhnya berlangsung otomatis

Deployment dan pengaturan DNS

• Deployment ke Heroku diotomatisasi, dan beberapa masalah karena penggunaan API versi lama diselesaikan lewat tautan dokumentasi
• Penyambungan domain GoDaddy juga jadi mudah karena ditunjukkan tombol mana yang harus diklik dan nilai apa yang harus diisi

Pengalaman menggunakan Windsurf sebagai alat AI

• Untuk sebagian fitur, pengujian tetap dilakukan langsung dengan request curl atau web preview
• Git commit dan deployment Heroku juga ditangani otomatis lewat terminal bawaan
• Namun, perubahan yang terlalu besar atau commit tanpa verifikasi tetap membutuhkan campur tangan pengguna
• Saat diminta menambahkan analitik, ia sempat bereaksi berlebihan dengan menambahkan lebih dari 100 event

Kekurangan dan hal yang masih perlu diperbaiki

• Karena tidak ada fitur pengujian otomatis, setiap perubahan kode tetap perlu diuji manual
• Tidak adanya fitur tail log membuat log harus disalin manual untuk mendeteksi hal seperti query N+1
• Refactoring kode duplikat tidak berjalan baik — jika ingin memodularkan kode tanpa mengubah fungsinya, instruksinya harus sangat spesifik
• Format respons API yang sering berubah juga sempat membuat frontend rusak
• Implementasi analitik Posthog gagal, dan muncul juga konflik antara perintah suara dengan suara yang sudah ada

Optimasi performa dan penghematan biaya

• Masalah gambar resolusi tinggi → thumbnail dan versi resolusi menengah dibuat otomatis
• Masalah N+1 diperbaiki secara otomatis
• API key ElevenLabs dipindahkan ke backend dan ditambah fitur caching suara untuk menekan biaya

Lonjakan produktivitas yang eksplosif

• Di setiap sesi, ia membuat daftar 10–15 ide fitur dan semuanya bisa diwujudkan dalam 30 menit
• Pekerjaan yang sebelumnya butuh berjam-jam kini bisa selesai dalam 1–2 menit
• Untuk perbaikan desain, cukup memberi arahan lewat screenshot dan AI menghasilkan UI yang matang secara visual
• Dengan mencontoh carousel aplikasi DoorDash, ia membuat desain serupa — bahkan dinilai terlihat lebih baik

Pekerjaan penutup dan isu keamanan

• Pengaturan favicon pun diotomatisasi dengan skrip Bash
• Setelah diposting di Twitter, ratusan pengguna datang dan sekitar 1.000 resep berhasil dibuat
• Namun, pengguna abuse sempat memicu tagihan OpenAI sebesar $700
• Windsurf lalu mengusulkan 15 strategi pertahanan, dan sebagian besar bisa diterapkan dalam 10 menit untuk menyelesaikan masalah

Rencana ke depan dan prospek teknis

• Akan ditambahkan fitur pembuatan resep streaming berbasis WebSocket
  • Contoh: instruksi seperti “tambahkan kacang”, “ubah jadi 8 porsi”, atau “konversi ke sistem metrik” akan diterapkan secara real-time
• Juga direncanakan antarmuka agen suara — agar pengguna bisa bertanya saat memasak tanpa menyentuh layar
  • Contoh: “saya tidak punya ketumbar, ada bahan pengganti?” atau “setel timer 30 menit”
• Bagi pengguna dengan latar belakang teknis, alat AI bisa menjadi superpower
• Arah pengembangannya juga makin ramah untuk non-developer: tailing log, pengujian otomatis, dan integrasi version control direncanakan hadir
• Penulis juga menyebut bahwa dalam waktu dekat bisa muncul era ketika 95% penulisan kode dilakukan oleh AI

---

Ringkasan fitur utama RecipeNinja

• Konsep inti: aplikasi ini adalah aplikasi pendamping memasak yang memberikan panduan suara langkah demi langkah, sehingga pengguna dapat memasak tanpa menggunakan tangan

Fitur backend (berbasis Rails API)

• Autentikasi pengguna dan manajemen izin

  • Fitur login melalui integrasi Google OAuth
  • Manajemen akun pengguna dengan keamanan yang diperkuat
  • Pengguna hanya dapat mengakses resep privat miliknya sendiri, sedangkan resep publik saja yang bisa dibagikan ke orang lain

• Fitur manajemen resep

  • Struktur model resep
    • Diberi public ID unik untuk keamanan (format: r_ + string acak 14 digit)
    • Kepemilikan pengguna dibuat jelas (user_id field, constraint NOT NULL)
    • Resep dapat diubah antara publik/pribadi (default: pribadi)
    • Menyimpan berbagai informasi seperti judul, bahan, langkah memasak, waktu memasak, dan sebagainya
    • Termasuk fitur upload gambar menggunakan Active Storage dan S3
  • Sistem tag
    • Menyusun relasi many-to-many (M:N) antara resep dan tag
    • Tag diimplementasikan sebagai model terpisah dengan nama unik
    • Menggunakan model perantara (RecipeTag) untuk menghubungkan resep dan tag
    • Menyediakan helper method untuk menambah dan menghapus tag
  • Endpoint API resep
    • Mendukung operasi CRUD
    • Menyediakan fitur pagination dan metadata (current_page, per_page, dan sebagainya)
    • Pengurutan default adalah yang terbaru berdasarkan tanggal pembuatan (created_at DESC)
    • Mendukung filter berdasarkan tag
    • Daftar dan detail ditampilkan lewat serializer yang berbeda masing-masing (RecipeSummarySerializer, RecipeSerializer)

• Fitur pembuatan suara

  • Sistem perekaman suara
    • Membuat panduan suara untuk setiap langkah resep
    • Mengintegrasikan API Eleven Labs untuk mengubah teks menjadi suara
    • File suara di-cache di S3 agar pemanggilan berulang tidak terus menambah biaya API
    • Membuat identifier unik dari kombinasi recipe ID, step ID, dan voice ID
    • Menyediakan fitur regenerasi paksa untuk file suara
  • Pemrosesan audio
    • Melakukan analisis audio menggunakan gem streamio-ffmpeg
    • Mengelola file audio lewat Active Storage
    • Di lingkungan production, penyimpanan menggunakan S3

• Impor dan pembuatan resep

  • Layanan RecipeImporter
    • Pembuatan resep otomatis melalui integrasi OpenAI
    • Mengubah teks resep menjadi format terstruktur
    • Menormalisasi dan mem-parsing bahan serta langkah
    • Termasuk fitur impor resep berbasis foto

Fitur frontend (berbasis React)

• Komponen antarmuka pengguna

  • Pemilihan dan penelusuran resep
    • Menampilkan daftar resep dengan pagination
    • Fitur pembaruan real-time setiap 10 detik
    • Menyediakan filter berbasis tag
    • Menampilkan kartu resep berisi ringkasan tanpa gambar
    • Menyediakan tombol “lihat detail” dan “mulai memasak” untuk tiap resep

• Tampilan detail resep

  • Menampilkan informasi resep secara lengkap
  • Menampilkan gambar resep
  • Menyediakan daftar tag yang bisa diklik
  • Memungkinkan pengguna langsung mulai memasak dari halaman tersebut

• Antarmuka saat memasak

  • Menyediakan panduan memasak langkah demi langkah
  • Mendukung panduan suara untuk setiap langkah
  • Mendukung keyboard shortcut untuk pengoperasian hands-free:
    • Tombol arah (←/→): pindah langkah
    • Tombol Space: putar/jeda suara
    • Tombol ESC: kembali ke daftar resep
  • Pelacakan langkah dimungkinkan lewat jalur URL (contoh: /recipe/r_xlxG4bcTLs9jbM/classic-lasagna/steps/1)

Manajemen state dan alur data

• Recipe Service

  • Memuat data resep melalui API
  • Mendukung parameter pagination
  • Menyediakan filter berbasis tag
  • Menerapkan mekanisme caching data resep
  • Menangani pemrosesan URL gambar untuk tampilan detail

• Alur autentikasi

  • Integrasi Google OAuth menggunakan environment variable
  • Manajemen sesi pengguna
  • Otomatis menangani auth header saat request API

Fitur PWA(Progressive Web App)

• Disediakan dalam bentuk PWA yang dapat diinstal di berbagai perangkat
• Menerapkan desain responsif untuk semua ukuran layar
• Mendukung favicon dan ikon aplikasi

Arsitektur deployment

• Struktur dua aplikasi

  • cook-voice-api: backend Rails yang dideploy di Heroku
  • cook-voice-wizard: frontend React dan PWA yang dideploy di Heroku

• Infrastruktur backend

  • Menggunakan Ruby versi 3.2.2
  • Menyusun database melalui add-on Heroku PostgreSQL
  • Menyimpan file menggunakan Amazon S3
  • Mengelola konfigurasi melalui environment variable

• Infrastruktur frontend

  • Aplikasi berbasis React
  • Mengelola informasi sensitif seperti API key melalui environment variable
  • Menggunakan static buildpack dari Heroku
  • Menyusun routing SPA(Single Page Application)

• Langkah keamanan

  • Mewajibkan HTTPS
  • Menggunakan sistem Rails Credentials
  • Informasi sensitif dipisahkan ke environment variable
  • Melindungi struktur internal dengan menggunakan Public ID alih-alih DB ID

[GN⁺]

Komentar Hacker News

• Mengesankan. 35 kLOC itu jumlah yang cukup besar. Saya penasaran seberapa intuitif dan mudah dipelihara aplikasi ini. Sepertinya perlu melihat source-nya. Kode Rails yang bagus memang ringkas, tetapi frontend bisa sangat besar

  • Pendapat bahwa ini akan memungkinkan dalam beberapa bulan begitu pengujian otomatis dan manajemen versi native diterapkan terasa agak optimistis. Namun pada akhirnya semua itu akan mungkin
  • Menanggapi pendapat bahwa ini adalah alat yang kuat yang memungkinkan orang nonteknis menulis aplikasi berkualitas produksi, saya rasa orang nonteknis tidak punya alasan untuk memikirkan tailing log atau manajemen versi. AI bukan hanya harus menjadi coder yang kompeten, tetapi juga arsitek dan SWE senior yang kompeten yang bisa menerjemahkan bahasa manajemen produk ke bahasa pengembangan perangkat lunak. Ini akan menjadi tantangan besar untuk mencapai tingkat keandalan yang mirip dengan tim manusia

• Ada komentar bahwa seseorang membuat resep Diarrhea Walnuts, lalu muncul masalah karena punya alergi kenari. Akan menempuh jalur hukum

• Ada pendapat bahwa Claude Code berguna. Namun, o1 Pro dinilai lebih unggul untuk debugging

  • Claude Code pada akhirnya menyelesaikan masalah seiring waktu, tetapi saya jadi lebih sering memakai o1 Pro
  • Saat membandingkan o1 Pro dan Claude Code, o1 Pro menyelesaikan masalah lebih cepat. Namun, saya tetap meng-commit perubahan dari Claude Code, lalu menggunakan umpan balik dari o1 untuk memperbaiki masalah yang tidak tertangkap oleh Claude

• Ada komentar bahwa Jian Yang dan Big Head sepertinya sedang membuat aplikasi baru

• Saya pernah membuat situs web penyederhana resep, jadi menurut saya proyek ini menarik. Dalam proyek pemeliharaan, saya rasa nilai utama seorang engineer adalah konteks. Saya penasaran apa yang terjadi jika konteks sepenuhnya diserahkan ke mesin

  • Saya menerima sebuah permintaan tugas, dan ternyata engineer lain sudah menulis sebagian besar kodenya sehingga bisa diselesaikan dalam sehari
  • Saya setuju ini eksperimen besar dan saya berterima kasih untuk itu. Saya penasaran bagaimana sistem seperti Cursor akan menangani situasi ketika banyak kode hampir tidak pernah dipakai. Jika 3k LOC terduplikasi secara tidak sengaja, saya ragu apakah sistem otomatis bisa memahami dan memperbaikinya

• Soal respons suara yang memakai realtime API dari OpenAI, ada kekhawatiran bahwa jika aplikasi ini menjadi populer, biaya bisa membuatnya bangkrut. Saya berencana memakai OpenAI audio API untuk hal lain, jadi saya penasaran dengan strategi terkait ini

• Ada pertanyaan apakah mungkin membuat 'vibecode' yang memberi tahu dari situs web di mana bahan-bahan bisa didapatkan. Beberapa bahan tertentu sulit ditemukan

• Ada pendapat bahwa resepnya memang lucu, tetapi begitu tahu itu dibuat oleh AI, kreativitasnya terasa hilang. Comprehensive JavaScript Tutorial adalah yang paling disukai

• Ada pertanyaan apakah fitur utamanya adalah kontrol suara. Dibandingkan situs resep populer lainnya, apa alasan memilih aplikasi ini masih dipertanyakan. Juga ada keraguan apakah ini terutama hanya latihan untuk pengujian engineering/AI

• Ada komentar bahwa judulnya harus ditambah NSFW. Lebih dari 50% resep di halaman pertama bersifat NSFW