मैंने 35,000 लाइनों वाली एक cooking app को Vibe coding से बनाया

 (recipeninja.ai)
18 पॉइंट द्वारा GN⁺ 2025-04-03 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • एक founder-turned-investor ने 20 घंटे की vibe coding से एक cooking app बनाया
  • इसका मुख्य फीचर एक voice assistant है, जिससे खाना बनाते समय हाथ लगाए बिना app चलाया जा सकता है
  • Rails 8 API backend + React frontend + OpenAI का real-time voice API
  • OpenAI के function-calling फीचर का उपयोग करके साइट के भीतर real-time navigation संभव
  • जटिल फीचर्स को पूरा करने के लिए Claude Code और Gemini 2.5 Pro का उपयोग
  • कुल codebase लगभग 35,000 lines का
  • voice commands के ज़रिए user बिना हाथ लगाए कई recipes खोज सकता है
  • स्वाभाविक conversational interface प्रदान करता है
  • यह hobby project के रूप में शुरू हुआ था, लेकिन नतीजा इतना अच्छा निकला कि इसमें वास्तव में उपयोगी features और बेहतरीन user experience है

Vibecoding से cooking app पूरा करना

  • सिर्फ 20 घंटे में खुद plan करके बनाया गया cooking app recipeninja.ai
  • लेखक एक startup founder रह चुके हैं, अभी Y Combinator में investor हैं, और 2015 के बाद Ruby लगभग इस्तेमाल नहीं करने वाले एक 'rusty developer' हैं
  • उन्हें खाना बनाना पसंद है और वे लंबे समय से “hands-free cooking app” का idea संभालकर रखे हुए थे
  • मौजूदा cooking websites SEO-केंद्रित हैं, apps का UX पुराना है, और Paprika जैसी apps अब भी 2009 जैसी लगती हैं — ऐसी उनकी शिकायत थी

टूल चुनना और project की शुरुआत

  • शुरुआत में Lovable से एक word game app बनाने की कोशिश की, लेकिन जल्दी सीमाएँ सामने आ गईं
  • उसके बाद Windsurf का उपयोग करके Rails 8 API backend + React frontend बनाया
  • Homebrew, npm, Ruby version setup, SSH key, Heroku setup तक को automate किया गया
  • Rails migrations भी standard rules के हिसाब से अपने-आप संभाल ली गईं

बेसिक फीचर्स का विकास

  • “Lasagne” जैसी साधारण input से पूरी recipe generate
  • OpenAI से recipe text generation, ElevenLabs से voice generation
  • step-by-step voice guide और image output फीचर जोड़ा गया
  • Windsurf ने security risk पहचानकर API key exposure रोकने पर काफ़ी ज़ोर दिया — यह बात खास लगी

फीचर विस्तार और दोहराव वाला development flow

  • photo-based “advanced recipe import” फीचर कुछ ही मिनटों में implement हुआ
  • console log या error message को copy-paste करने पर Windsurf ने अपने-आप fixes सुझाए
  • Google OAuth integration के दौरान config screenshot paste करते ही गलतियाँ तुरंत पकड़ लीं
  • user-specific recipe saving, public/private settings जैसे फीचर्स भी लगभग automatic तरीके से जुड़ गए

deployment और DNS setup

  • Heroku deployment automation, और कुछ पुराने API version की समस्या docs link से हल हुई
  • GoDaddy domain connect करने में कहाँ click करना है और कौन-सी value भरनी है, यह तक बता दिया गया, इसलिए setup आसान रहा

AI tool के रूप में Windsurf का उपयोग अनुभव

  • कुछ फीचर्स के लिए सीधे curl requests या web preview चलाकर test किया गया
  • Git commits और Heroku deployment भी built-in terminal से automate हुए
  • लेकिन बहुत बड़े बदलाव या बिना confirmation के commit जैसे मामलों में user intervention की ज़रूरत पड़ी
  • analytics फीचर जोड़ने को कहने पर 100 से ज़्यादा events जोड़ देना जैसी overreaction भी देखी गई

कमियाँ और सुधार के बिंदु

  • automatic testing न होने से code change के बाद manually test करना पड़ा
  • log tail फीचर न होने से N+1 query जैसी समस्याएँ पकड़ने के लिए logs manually paste करने पड़े
  • duplicate code refactoring सही से काम नहीं करती — functionality बदले बिना सिर्फ code modularize करवाने के लिए बहुत specific instructions देनी पड़ीं
  • API response format बार-बार बदलने से frontend टूटने की समस्या हुई
  • Posthog analytics integration असफल रही, और voice commands का मौजूदा audio से टकराने वाला issue भी आया

performance optimization और cost reduction

  • high-resolution image समस्या → thumbnails और medium-resolution versions अपने-आप generate किए गए
  • N+1 issue अपने-आप fix हुआ
  • ElevenLabs API key को backend में शिफ्ट किया गया और voice caching जोड़ी गई, जिससे cost घटी

धमाकेदार productivity boost

  • हर session में 10~15 feature ideas list किए गए और 30 मिनट के भीतर सब implement हो गए
  • जो काम पहले घंटों लेता, वह 1~2 मिनट में पूरा हो गया
  • design improvements के लिए सिर्फ screenshot देकर निर्देश देने पर visually polished UI बन गया
  • DoorDash app के carousel को reference बनाकर similar design लागू किया गया — और कुछ लोगों ने उसे और बेहतर बताया

finishing work और security issue

  • Favicon setup भी Bash script से automate कर दिया गया
  • Twitter पर पोस्ट के बाद सैकड़ों users आए और लगभग 1,000 recipes generate हुईं
  • लेकिन abusive users की वजह से OpenAI billing में $700 का खर्च हो गया
  • Windsurf ने 15 defense strategies सुझाईं, जिनमें से ज़्यादातर 10 मिनट में लागू कर दी गईं और समस्या हल हो गई

आगे की योजना और technical outlook

  • WebSocket-आधारित streaming recipe generation फीचर जोड़ने की योजना
    • उदाहरण: “nuts जोड़ दो”, “इसे 8 servings के लिए बदल दो”, “इसे metric में convert कर दो” जैसी instructions को real time में लागू करना
  • एक voice agent interface भी बनाया जाएगा — ताकि cooking के दौरान screen touch किए बिना सवाल पूछे जा सकें
    • उदाहरण: “मेरे पास coriander नहीं है, कोई substitute है?”, “30 मिनट का timer सेट कर दो”
  • technical background वाले users के लिए AI tools superpower की तरह काम कर सकते हैं
  • यह दिशा non-developers के लिए भी उपयोगी बन रही है: log tailing, automatic testing, version control integration जैसी चीज़ें आने वाली हैं
  • निकट भविष्य में code writing का 95% हिस्सा AI द्वारा किए जाने की संभावना भी जताई गई

RecipeNinja के मुख्य फीचर्स का सार

  • मुख्य विचार: यह app एक cooking assistant application है, जो step-by-step voice guidance देता है और user को हाथ लगाए बिना cooking करने में मदद करता है

backend फीचर्स (Rails API आधारित)

  • user authentication और permissions management

    • Google OAuth integration के ज़रिए login
    • security को मज़बूत करने वाला user account management
    • user केवल अपनी private recipes तक पहुँच सकता है, जबकि public recipes ही दूसरों के साथ share की जा सकती हैं

  • recipe management फीचर

    • recipe model structure
      • security के लिए unique public ID दिया गया (format: r_ + 14 अंकों की random string)
      • user ownership को स्पष्ट किया गया (user_id field, NOT NULL constraint)
      • recipe को public/private switch किया जा सकता है (default: private)
      • title, ingredients, cooking steps, cook time जैसी कई जानकारियाँ store
      • Active Storage और S3 के साथ image upload फीचर शामिल
    • tag system
      • recipe और tag के बीच many-to-many (M:N) relation
      • tag को unique name वाले अलग model के रूप में implement किया गया
      • recipe-tag mapping के लिए intermediate model (RecipeTag) इस्तेमाल
      • tag add/remove करने के लिए helper methods
    • recipe API endpoints
      • CRUD operations support
      • pagination और metadata support (current_page, per_page आदि)
      • default sorting latest created order में (created_at DESC)
      • tag filtering support
      • list और detail के लिए अलग serializers output (RecipeSummarySerializer, RecipeSerializer)

  • voice generation फीचर

    • voice recording system
      • हर recipe step के लिए voice guidance generate
      • Eleven Labs API integration के ज़रिए text-to-speech conversion
      • API cost बचाने के लिए voice files को S3 में cache किया गया
      • recipe ID, step ID, voice ID को मिलाकर unique identifier बनाया गया
      • voice file force-regeneration फीचर भी दिया गया
    • audio processing
      • streamio-ffmpeg gem से audio analysis
      • Active Storage से audio files management
      • production environment में S3-based storage

  • recipe import और generation

    • RecipeImporter service
      • OpenAI integration के ज़रिए automatic recipe generation
      • text-based recipes को structured format में बदलना
      • ingredients और steps का normalization और parsing
      • photo-based recipe import फीचर शामिल

frontend फीचर्स (React आधारित)

  • user interface components

    • recipe selection और browsing
      • pagination के साथ recipe list view
      • 10-second interval पर real-time updates
      • tag-based filtering
      • image के बिना summary info दिखाने वाले recipe cards
      • हर recipe पर “विस्तार से देखें” और “cooking शुरू करें” button

  • recipe detail view

    • पूरी recipe information display
    • recipe image display
    • clickable tags list
    • उसी page से सीधे cooking शुरू की जा सकती है

  • in-cooking interface

    • step-by-step cooking guide
    • हर step के लिए voice guidance
    • hands-free operation के लिए keyboard shortcuts:
      • arrow keys (←/→): steps बदलना
      • Space key: voice play/pause
      • ESC key: recipe list पर वापस
    • URL path के ज़रिए step tracking (उदाहरण: /recipe/r_xlxG4bcTLs9jbM/classic-lasagna/steps/1)

state management और data flow

  • Recipe Service

    • API से recipe data fetch
    • pagination parameters support
    • tag-based filtering
    • recipe data caching mechanism
    • detail view के लिए image URL processing

  • authentication flow

    • environment variables के साथ Google OAuth integration
    • user session management
    • API requests में authentication header automatic handling

PWA (Progressive Web App) फीचर्स

  • कई devices पर install की जा सकने वाली PWA form
  • सभी screen sizes के लिए responsive design
  • Favicon और app icon support

deployment architecture

  • dual-app structure

    • cook-voice-api: Heroku पर deployed Rails backend
    • cook-voice-wizard: Heroku पर deployed React frontend और PWA

  • backend infrastructure

    • Ruby 3.2.2 version उपयोग
    • Heroku PostgreSQL addon के साथ database setup
    • Amazon S3 पर file storage
    • environment variables के ज़रिए config management

  • frontend infrastructure

    • React-based application
    • environment variable setup से API key जैसी sensitive info management
    • Heroku static buildpack का उपयोग
    • SPA (Single Page Application) routing

  • security measures

    • HTTPS enforce
    • Rails Credentials system का उपयोग
    • sensitive information को environment variables में अलग रखना
    • internal structure को सुरक्षित रखने के लिए DB ID की जगह public ID का उपयोग

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-04-03
Hacker News राय

  • प्रभावशाली है। 35 kLOC काफ़ी बड़ी मात्रा है। यह ऐप कितना सहज और maintainable है, यह जानने की जिज्ञासा है। सोर्स देखना पड़ेगा। अच्छा Rails कोड संक्षिप्त होता है, लेकिन frontend काफ़ी विशाल हो सकता है

    • automated tests और native version control लागू हो जाएँ तो कुछ महीनों में यह संभव होगा, यह राय थोड़ी आशावादी लगती है। लेकिन अंततः यह सब संभव होगा
    • इस राय पर कि यह non-technical लोगों के लिए production-quality ऐप लिखने का शक्तिशाली टूल है, मेरा मानना है कि non-technical लोगों के पास log tailing या version control के बारे में सोचने का कोई कारण नहीं होता। AI को सिर्फ़ सक्षम coder ही नहीं, बल्कि ऐसा सक्षम architect और senior SWE भी बनना होगा जो product management की भाषा को software development की भाषा में अनुवाद कर सके। इंसानी टीम जैसी विश्वसनीयता पाने के लिए यह काफ़ी बड़ी चुनौती होगी

  • एक राय थी कि Diarrhea Walnuts रेसिपी बनाई, लेकिन walnut allergy होने से समस्या हो गई। कानूनी कार्रवाई करूँगा

  • राय है कि Claude Code उपयोगी है। लेकिन o1 Pro debugging में बेहतर लगता है

    • Claude Code समय के साथ समस्या हल कर देता है, लेकिन o1 Pro का ज़्यादा बार उपयोग करने लगता हूँ
    • o1 Pro और Claude Code की तुलना में, o1 Pro ने समस्या ज़्यादा तेज़ी से हल की। लेकिन Claude Code के बदलाव commit किए गए, और o1 के feedback से वे समस्याएँ हल कीं जिन्हें Claude नहीं पकड़ पाया

  • राय है कि Jian Yang और Big Head शायद कोई नया ऐप बना रहे हैं

  • रेसिपी simplification वेबसाइट लिखने का अनुभव है, इसलिए यह प्रोजेक्ट मज़ेदार लगता है। मेरा मानना है कि maintenance प्रोजेक्ट में engineer की मुख्य value context होती है। अगर context पूरी तरह मशीन को सौंप दिया जाए तो क्या होगा, यह जानने की जिज्ञासा है

    • एक काम का अनुरोध मिला, लेकिन दूसरे engineer ने पहले ही ज़्यादातर कोड लिख दिया था, इसलिए उसे एक ही दिन में पूरा किया जा सका
    • बड़े पैमाने के experiment से सहमत हूँ और इसके लिए आभारी हूँ। यह जानने की जिज्ञासा है कि Cursor जैसे सिस्टम उस स्थिति को कैसे संभालेंगे जहाँ बहुत सारा कोड लगभग इस्तेमाल ही नहीं होता। अगर 3k LOC गलती से duplicate हो जाए, तो क्या automated सिस्टम इसे समझकर ठीक कर पाएगा, इस पर संदेह है

  • OpenAI के real-time API का इस्तेमाल करने वाले voice response के बारे में चिंता है कि अगर ऐप लोकप्रिय हो गया तो cost के कारण दिवालिया होना पड़ सकता है। मैं OpenAI audio API को दूसरे मामलों में इस्तेमाल करने की योजना बना रहा हूँ, इसलिए इससे जुड़ी strategy जानना चाहता हूँ

  • सवाल है कि क्या ऐसा 'vibecode' बनाया जा सकता है जो वेबसाइट पर बताए कि सामग्री कहाँ से खरीदी जा सकती है। कुछ विशेष सामग्री ढूँढना मुश्किल है

  • राय है कि रेसिपियाँ मज़ेदार हैं, लेकिन यह पता चलने पर कि वे AI-generated हैं, उनकी रचनात्मकता गायब हो जाती है। Comprehensive JavaScript Tutorial सबसे ज़्यादा पसंद आया

  • सवाल है कि क्या मुख्य फ़ीचर voice control है। दूसरे लोकप्रिय recipe वेबसाइटों की तुलना में इस ऐप को चुनने की वजह क्या होगी, यह जानने की जिज्ञासा है। क्या यह मुख्य रूप से engineering/AI testing के लिए एक अभ्यास है, इस पर भी सवाल है

  • राय है कि शीर्षक में NSFW जोड़ना चाहिए। पहले पेज पर 50% से ज़्यादा NSFW रेसिपियाँ हैं