35.000 satırlık bir yemek uygulamasını Vibe coding ile yaptım

• Girişimci kökenli bir yatırımcının 20 saatlik vibe coding çalışmasıyla geliştirdiği yemek uygulaması
• Temel özellik, yemek yaparken elleri kullanmadan kontrol edilebilen bir sesli asistan
• Rails 8 API backend + React frontend + OpenAI’nin gerçek zamanlı ses API’si
• OpenAI’nin function calling özelliği kullanılarak site içinde gerçek zamanlı gezinme mümkün
• Karmaşık özellikleri tamamlamak için Claude Code ve Gemini 2.5 Pro kullanıldı
• Toplam kod tabanı yaklaşık 35.000 satır
• Sesli komutlarla kullanıcıların ellerini kullanmadan çeşitli tarifleri keşfetmesi mümkün
• Doğal, konuşma tabanlı bir arayüz sunuyor
• Hobi projesi olarak başladı ama gerçekten kullanışlı işlevler ve kullanıcı deneyimi sunan yüksek kaliteli bir sonuç ortaya çıktı

Vibecoding ile bir yemek uygulamasını tamamlamak

• Sadece 20 saatte bizzat planlanıp yapılan yemek uygulaması recipeninja.ai
• Yazar, startup kuruculuğundan gelen ve şu anda Y Combinator’da yatırımcı olarak çalışan, 2015’ten beri neredeyse hiç Ruby kullanmamış “paslanmış bir geliştirici”
• Normalde yemek yapmayı seviyor ve “hands-free yemek uygulaması” fikrini uzun zamandır aklında tutuyordu
• Mevcut yemek siteleri SEO odaklı, uygulamaların UX’i eski, Paprika gibi uygulamalar ise hâlâ 2009’dan kalmış gibi hissettiriyor

Araç seçimi ve projenin başlangıcı

• Başlangıçta Lovable ile bir kelime oyunu uygulaması denedi ama sınırlara çarptı
• Sonrasında Windsurf kullanarak Rails 8 API backend + React frontend yapısını kurdu
• Homebrew, npm, Ruby sürüm ayarları, SSH anahtarları ve Heroku kurulumu otomatikleştirildi
• Rails migration işlemleri de standart kurallara uygun şekilde otomatik yapıldı

Temel özellik geliştirme

• “Lasagne” gibi basit bir girdiden tam tarif oluşturma
• OpenAI ile tarif metni üretimi, ElevenLabs ile ses üretimi
• Adım adım sesli rehber ve görsel çıktısı özellikleri eklendi
• Güvenlik risklerini algılayan Windsurf’ün API anahtarlarının açığa çıkmasını güçlü şekilde engellemesi de dikkat çekiciydi

Özellik genişletme ve tekrarlı geliştirme akışı

• Fotoğraf tabanlı “gelişmiş tarif içe aktarma” özelliği dakikalar içinde uygulandı
• Konsol log’ları veya hata mesajları yapıştırıldığında Windsurf bunları otomatik olarak düzeltti
• Google OAuth entegrasyonunda ayar ekran görüntüsü yapıştırılınca hatalı kısımları anında tespit etti
• Kullanıcı bazlı tarif kaydetme, herkese açık/gizli ayarları gibi özellikler de neredeyse otomatik biçimde eklendi

Dağıtım ve DNS ayarları

• Heroku dağıtımı otomatikleştirildi; bazı eski API kullanımı sorunları dokümantasyon bağlantılarıyla çözüldü
• GoDaddy alan adı bağlantısında da hangi düğmeye basılacağı ve hangi değerin girileceği anlatılarak kurulum kolayca tamamlandı

Yapay zeka aracı olarak Windsurf kullanım deneyimi

• Bazı özellikler için doğrudan curl istekleri veya web önizlemesi çalıştırılarak test yapıldı
• Git commit’leri ve Heroku dağıtımı da gömülü terminal içinde otomatik işlendi
• Ancak aşırı değişiklikler veya onaysız commit’lerde kullanıcı müdahalesi gerekiyor
• Analitik ekleme isteğinde 100’den fazla event eklemesi gibi aşırı tepkiler de verdi

Eksik kalan noktalar ve iyileştirmeler

• Otomatik test özelliği olmadığından kod değişikliklerinden sonra elle test yapmak gerekiyor
• Log tail özelliği olmadığından N+1 query gibi sorunları tespit etmek için log’ların elle kopyalanıp yapıştırılması gerekiyor
• Yinelenen kod refactor işlemi düzgün çalışmıyor — işlevi koruyup yalnızca kodu modülerleştirmek için ayrıntılı talimat vermek gerekiyor
• API yanıt biçimi sık sık değiştiği için frontend’in bozulduğu durumlar yaşandı
• Posthog analitiği ekleme girişimi başarısız oldu, sesli komutların mevcut seslerle çakıştığı sorunlar da ortaya çıktı

Performans optimizasyonu ve maliyet düşürme

• Yüksek çözünürlüklü görsel sorunu → küçük resim ve orta çözünürlüklü sürümlerin otomatik üretilmesi
• N+1 problemi otomatik düzeltildi
• ElevenLabs API anahtarının backend’e taşınması ve ses önbellekleme eklenmesiyle maliyet düşürüldü

Patlayıcı üretkenlik artışı

• Her oturumda 10–15 özellik fikri listelenip hepsi 30 dakika içinde uygulandı
• Normalde saatler sürecek işler 1–2 dakika içinde hayata geçirildi
• Tasarım iyileştirmelerinde de yalnızca ekran görüntüsüyle yönlendirme yapıldığında görsel olarak olgun bir UI üretildi
• DoorDash uygulamasındaki carousel referans alınarak benzer bir tasarım uygulandı — hatta daha iyi göründüğünü söyleyenler oldu

Son işler ve güvenlik sorunları

• Favicon ayarları da Bash script’i ile otomatikleştirildi
• Twitter paylaşımından sonra yüzlerce kullanıcı geldi ve yaklaşık 1.000 tarif üretildi
• Ancak kötüye kullanan bir kullanıcı nedeniyle OpenAI faturasında 700 dolar oluştu
• Windsurf 15 savunma stratejisi önerdi ve bunların çoğu 10 dakika içinde uygulanarak sorun çözüldü

Gelecek planları ve teknik perspektif

• WebSocket tabanlı streaming tarif üretimi özelliğinin eklenmesi planlanıyor
  • Örnek: “Kuruyemiş ekle”, “8 kişilik yap”, “Metrik sisteme çevir” gibi komutların gerçek zamanlı uygulanması
• Sesli ajan arayüzü de planlanıyor — ekrana dokunmadan yemek sırasında soru sorulabilecek
  • Örnek: “Kişnişim yok, yerine ne kullanabilirim?”, “30 dakikalık zamanlayıcı kur”
• Teknik arka plana sahip kullanıcılar için yapay zeka araçları bir süper güç hâline geliyor
• Geliştirici olmayanların da kullanabileceği yönde ilerliyor: log tailing, otomatik test ve sürüm kontrol entegrasyonu planlanıyor
• Yakın gelecekte kod yazımının %95’inin yapay zeka tarafından yapılabileceği bir dönemin gelebileceği belirtiliyor

---

RecipeNinja temel özellik özeti

• Temel kavram: Bu uygulama, adım adım sesli yönlendirme sunan bir yemek yardımcısı uygulaması olarak, kullanıcının ellerini kullanmadan yemek yapabilmesini destekler

Backend özellikleri (Rails API tabanlı)

• Kullanıcı kimlik doğrulama ve yetki yönetimi

  • Google OAuth entegrasyonu ile giriş özelliği
  • Güvenliği güçlendirilmiş kullanıcı hesap yönetimi
  • Kullanıcılar yalnızca kendi gizli tariflerine erişebilir, yalnızca herkese açık tarifleri başkalarıyla paylaşabilir

• Tarif yönetimi özellikleri

  • Tarif modeli yapısı
    • Güvenlik için benzersiz genel kimlik verilmesi (biçim: r_ + 14 haneli rastgele karakter dizisi)
    • Kullanıcı sahipliğinin netleştirilmesi (user_id alanı, NOT NULL kısıtı)
    • Tarifin herkese açık/gizli olarak değiştirilebilmesi (varsayılan: gizli)
    • Başlık, malzemeler, pişirme adımları, hazırlık süresi gibi çeşitli bilgilerin saklanması
    • Active Storage ve S3 kullanan görsel yükleme özelliği
  • Etiket sistemi
    • Tariflerle etiketler arasında çoktan çoğa (M:N) ilişki yapısı
    • Etiketler, benzersiz ada sahip ayrı bir model olarak uygulandı
    • Tarif-etiket bağlantısı için ara model (RecipeTag) kullanıldı
    • Etiket ekleme ve kaldırma için yardımcı metotlar sunuluyor
  • Tarif API endpoint’leri
    • CRUD işlemleri destekleniyor
    • Pagination ve metadata desteği (current_page, per_page vb.)
    • Varsayılan sıralama oluşturulma tarihine göre en yeniden eskiye (created_at DESC)
    • Etikete göre filtreleme desteği
    • Liste ve detay bilgileri farklı serializer’larla döndürülüyor (RecipeSummarySerializer, RecipeSerializer)

• Ses üretimi özellikleri

  • Ses kayıt sistemi
    • Her tarif adımı için sesli yönlendirme üretimi
    • Eleven Labs API entegrasyonu ile metni sese dönüştürme
    • Ses dosyaları S3 üzerinde önbelleğe alınarak tekrar çağrılarda API maliyeti azaltılıyor
    • Tarif ID’si, adım ID’si ve ses ID’sini birleştiren benzersiz tanımlayıcı oluşturma
    • Ses dosyasını zorla yeniden üretme özelliği
  • Ses işleme
    • streamio-ffmpeg gem’i ile ses analizi
    • Active Storage ile ses dosyası yönetimi
    • Üretim ortamında S3 tabanlı depolama kullanımı

• Tarif içe aktarma ve üretme

  • RecipeImporter servisi
    • OpenAI entegrasyonu ile otomatik tarif üretimi
    • Metin tabanlı tarifleri yapılandırılmış biçime dönüştürme
    • Malzemeleri ve adımları normalize etme ve parse etme
    • Fotoğraftan tarif içe aktarma özelliği

Frontend özellikleri (React tabanlı)

• Kullanıcı arayüzü bileşenleri

  • Tarif seçimi ve keşfi
    • Pagination uygulanmış tarif listesi görüntüleme
    • 10 saniye aralıklarla gerçek zamanlı güncelleme
    • Etiket tabanlı filtreleme
    • Görselsiz özet bilgi gösteren tarif kartları
    • Her tarif için “Detayları gör” ve “Pişirmeye başla” düğmeleri

• Tarif detay görünümü

  • Tüm tarif bilgilerinin gösterimi
  • Tarif görselinin görüntülenmesi
  • Tıklanabilir etiket listesi
  • Aynı sayfadan doğrudan pişirmeye başlama

• Yemek yaparken arayüz

  • Adım adım pişirme rehberi
  • Her adım için sesli yönlendirme desteği
  • Hands-free kullanım için klavye kısayolları:
    • Yön tuşları (←/→): adımlar arasında geçiş
    • Space tuşu: sesi oynat/duraklat
    • ESC tuşu: tarif listesine dön
  • URL yolu üzerinden adım takibi (örnek: /recipe/r_xlxG4bcTLs9jbM/classic-lasagna/steps/1)

Durum yönetimi ve veri akışı

• Recipe Service

  • API üzerinden tarif verisi getirme
  • Pagination parametre desteği
  • Etiket tabanlı filtreleme
  • Tarif verisi önbellekleme mekanizması
  • Detay görünümünde kullanılacak görsel URL’lerini işleme

• Kimlik doğrulama akışı

  • Ortam değişkenleriyle Google OAuth entegrasyonu
  • Kullanıcı oturumu yönetimi
  • API isteklerinde kimlik doğrulama başlıklarının otomatik işlenmesi

PWA (Progressive Web App) özellikleri

• Çeşitli cihazlarda kurulabilen PWA biçiminde sunuluyor
• Tüm ekran boyutlarına uyumlu responsive tasarım uygulanıyor
• Favicon ve uygulama ikon desteği

Dağıtım mimarisi

• Çift uygulama yapısı

  • cook-voice-api: Heroku’da dağıtılmış Rails backend
  • cook-voice-wizard: Heroku’da dağıtılmış React frontend ve PWA

• Backend altyapısı

  • Ruby 3.2.2 sürümü kullanılıyor
  • Veritabanı, Heroku PostgreSQL eklentisi ile yapılandırıldı
  • Dosya depolama için Amazon S3 kullanılıyor
  • Ortam değişkenleriyle yapılandırma yönetimi

• Frontend altyapısı

  • React tabanlı uygulama
  • API anahtarları gibi hassas bilgiler ortam değişkenleriyle yönetiliyor
  • Heroku’nun statik buildpack’i kullanılıyor
  • SPA (Single Page Application) routing yapısı

• Güvenlik önlemleri

  • HTTPS zorunlu kılındı
  • Rails Credentials sistemi kullanılıyor
  • Hassas bilgiler ortam değişkenlerine ayrıldı
  • İç yapıyı korumak için DB ID yerine herkese açık Public ID kullanılıyor

[GN⁺]

Hacker News görüşleri

• Etkileyici. 35 kLOC oldukça büyük bir miktar. Bu uygulamanın ne kadar sezgisel ve bakım yapılabilir olduğunu merak ediyorum. Kaynağa bakmak gerekir. İyi Rails kodu özlüdür ama frontend oldukça genişleyebilir

  • Otomatik testler ve yerel sürüm yönetimi uygulanırsa bunun birkaç ay içinde mümkün olacağı yönündeki görüş biraz iyimser. Yine de eninde sonunda hepsi mümkün olacaktır
  • Bunun teknik olmayan kişilerin prodüksiyon kalitesinde uygulamalar yazabilmesini sağlayan güçlü bir araç olduğu görüşüne karşı, teknik olmayan kişilerin log tailing ya da sürüm yönetimini düşünmesi için bir neden görmüyorum. Yapay zekanın sadece yetkin bir kodlayıcı değil, aynı zamanda ürün yönetimi dilini yazılım geliştirme diline çevirebilen yetkin bir mimar ve kıdemli SWE olması gerekir. Bunun, insan ekiplere benzer bir güvenilirliğe ulaşması oldukça büyük bir zorluk olacaktır

• Diarrhea Walnuts tarifi yaptım ama ceviz alerjim var, bu yüzden sorun çıktı. Hukuki yollara başvuracağım diyen bir görüş var

• Claude Code'un faydalı olduğu görüşü var. Ancak o1 Pro'nun debugging konusunda daha iyi olduğunu düşünüyorum

  • Claude Code zamanla sorunu çözüyor ama kendimi daha sık o1 Pro kullanırken buluyorum
  • o1 Pro ile Claude Code'u karşılaştırdığımda, o1 Pro sorunu daha hızlı çözdü. Ancak Claude Code'un yaptığı değişiklikleri commit ettim ve Claude'un yakalayamadığı sorunları düzeltmek için o1'in geri bildirimini kullandım

• Jian Yang ile Big Head yeni bir uygulama yapıyor gibi görünüyor diyen bir görüş var

• Tarif sadeleştirme web sitesi yazma deneyimim var, bu yüzden bu projeyi eğlenceli buluyorum. Bakım projelerinde mühendisin asıl değerinin bağlam olduğunu düşünüyorum. Bu bağlamı tamamen makineye devredersek ne olacağını merak ediyorum

  • Bir iş talebi aldım ve başka bir mühendis kodun çoğunu zaten yazmış olduğu için işi bir günde bitirebildim
  • Bu büyük ölçekli deneye katılıyorum ve teşekkür ediyorum. Cursor gibi sistemlerin, büyük miktarda kodun neredeyse hiç kullanılmadığı durumları nasıl ele alacağını merak ediyorum. 3k LOC yanlışlıkla yinelenirse otomatik sistemin bunu anlayıp düzeltebileceğinden emin değilim

• OpenAI'nin realtime API'siyle sesli yanıtlar kullanılması konusunda, uygulama popüler olursa maliyet yüzünden batabileceğine dair bir endişe var. OpenAI audio API'yi başka durumlarda kullanmayı planlıyorum; bu konuda nasıl bir strateji izlendiğini merak ediyorum

• Web sitesinde malzemelerin nereden alınabileceğini söyleyen bir 'vibecode' yapmanın mümkün olup olmadığı soruluyor. Bazı malzemeleri bulmak zor

• Tarifler eğlenceli ama bunların yapay zeka tarafından üretildiğini öğrendiğim anda yaratıcılık hissi kayboluyor diyen bir görüş var. En çok Comprehensive JavaScript Tutorial hoşuma gitti

• Asıl özelliğin sesli kontrol olup olmadığı soruluyor. Diğer popüler tarif sitelerine kıyasla bu uygulamayı seçmek için bir neden olup olmadığı merak ediliyor. Bunun esas olarak mühendislik/yapay zeka testi için bir alıştırma olup olmadığı da sorgulanıyor

• Başlığa NSFW eklenmesi gerektiğini söyleyen bir görüş var. İlk sayfadaki tariflerin %50'den fazlası NSFW