Ich habe versucht, eine Koch-App mit 35.000 Zeilen per Vibe Coding zu bauen

• Eine Koch-App, die von einem Investor mit Gründerhintergrund in 20 Stunden Vibe Coding entwickelt wurde
• Kernfunktion ist ein Sprachassistent, der sich während des Kochens bedienen lässt, ohne die Hände zu benutzen
• Rails-8-API-Backend + React-Frontend + OpenAIs Realtime Voice API
• Mit OpenAIs Function Calling ist eine Echtzeit-Navigation innerhalb der Website möglich
• Claude Code und Gemini 2.5 Pro wurden genutzt, um komplexe Funktionen zu ergänzen
• Der gesamte Codeumfang liegt bei rund 35.000 Zeilen
• Per Sprachbefehl können Nutzer verschiedene Rezepte durchsuchen, ohne das Gerät mit den Händen zu bedienen
• Bietet eine natürliche dialogorientierte Benutzeroberfläche
• Begann als Hobbyprojekt, lieferte aber am Ende ein hochwertiges Ergebnis mit tatsächlich nützlichen Funktionen und guter User Experience

Eine Koch-App mit Vibecoding fertigstellen

• In nur 20 Stunden selbst konzipierte und gebaute Koch-App: recipeninja.ai
• Der Autor ist ehemaliger Startup-Gründer und heute Investor bei Y Combinator; seit 2015 hatte er Ruby kaum noch verwendet und bezeichnet sich selbst als „eingerosteten Entwickler“
• Er kocht gern und hatte die Idee einer „hands-free cooking app“ schon lange im Hinterkopf
• Unzufriedenheit mit bestehenden Koch-Websites, die SEO-zentriert seien; auch Apps hätten eine veraltete UX, und Apps wie Paprika fühlten sich immer noch wie 2009 an

Tool-Auswahl und Projektstart

• Anfangs wurde mit Lovable eine Wortspiel-App ausprobiert, man stieß aber schnell an Grenzen
• Danach wurde mit Windsurf ein Rails-8-API-Backend plus React-Frontend aufgesetzt
• Homebrew, npm, Ruby-Versionskonfiguration, SSH-Keys und sogar das Heroku-Setup wurden automatisiert
• Auch Rails-Migrationen wurden automatisch gemäß den Standardkonventionen verarbeitet

Entwicklung der Grundfunktionen

• Schon mit einer einfachen Eingabe wie „Lasagne“ wird ein vollständiges Rezept erzeugt
• Generierung des Rezepttexts über OpenAI, Sprachausgabe über ElevenLabs
• Integriert sind sprachgeführte Schritt-für-Schritt-Anleitungen und Bildausgabe
• Beeindruckend war auch, wie Windsurf Sicherheitsrisiken erkannte und nachdrücklich verlangte, API-Schlüssel nicht offenzulegen

Funktionserweiterung und iterativer Entwicklungsfluss

• Eine fotobasierte Funktion zum „fortgeschrittenen Rezeptimport“ wurde in wenigen Minuten umgesetzt
• Wenn man Konsolen-Logs oder Fehlermeldungen hineinkopierte, nahm Windsurf automatisch Korrekturen vor
• Beim Einbinden von Google OAuth reichte ein Screenshot der Einstellungen, damit falsche Punkte sofort erkannt wurden
• Auch Funktionen wie das Speichern von Rezepten pro Nutzer sowie öffentlich/private Sichtbarkeit wurden fast automatisch ergänzt

Deployment und DNS-Konfiguration

• Das Heroku-Deployment wurde automatisiert; Probleme mit einigen älteren API-Versionen ließen sich über Dokumentationslinks lösen
• Auch die Anbindung der GoDaddy-Domain war einfach, weil Windsurf sogar sagte, welche Buttons zu klicken und welche Werte einzutragen sind

Erfahrungen mit Windsurf als AI-Tool

• Einige Funktionen wurden durch direkte curl-Requests oder Web-Previews getestet
• Git-Commits und Heroku-Deployments wurden ebenfalls automatisch im integrierten Terminal ausgeführt
• Übermäßige Änderungen oder Commits ohne Bestätigung erfordern allerdings Eingreifen durch den Nutzer
• Bei der Bitte, Analytics hinzuzufügen, reagierte das Tool teils übermotiviert und legte mehr als 100 Events an

Schwächen und Verbesserungsmöglichkeiten

• Es gibt keine automatisierten Tests, daher muss nach Codeänderungen manuell getestet werden
• Es fehlt eine Log-Tailing-Funktion; um N+1-Queries zu erkennen, müssen Logs manuell kopiert und eingefügt werden
• Refactoring von dupliziertem Code funktioniert nicht zuverlässig — wenn nur modularisiert werden soll, ohne das Verhalten zu ändern, braucht es sehr konkrete Anweisungen
• Da sich das Format von API-Antworten häufig änderte, kam es zu Frontend-Brüchen
• Auch die Einführung von Posthog scheiterte, und Sprachbefehle kollidierten teilweise mit bereits existierender Audiowiedergabe

Performance-Optimierung und Kostensenkung

• Problem mit hochauflösenden Bildern → automatische Erzeugung von Thumbnails und Versionen mittlerer Auflösung
• N+1-Probleme wurden automatisch behoben
• Durch das Verschieben des ElevenLabs-API-Schlüssels ins Backend und das Hinzufügen eines Voice-Cachings sanken die Kosten

Explosiver Produktivitätsschub

• In jeder Session wurden 10 bis 15 Feature-Ideen aufgelistet und alle innerhalb von 30 Minuten umgesetzt
• Aufgaben, die früher Stunden gedauert hätten, wurden in 1–2 Minuten implementiert
• Auch Designverbesserungen ließen sich per Screenshot-Anweisung umsetzen, woraufhin visuell ausgereifte UIs entstanden
• Unter Bezug auf das Carousel der DoorDash-App wurde ein ähnliches Design umgesetzt — mit dem Urteil, es sehe sogar besser aus

Abschlussarbeiten und Sicherheitsprobleme

• Selbst die Einrichtung des Favicons wurde per Bash-Skript automatisiert
• Nach einem Post auf Twitter kamen Hunderte Nutzer auf die Seite und erzeugten rund 1.000 Rezepte
• Allerdings verursachte missbräuchliche Nutzung OpenAI-Kosten von 700 US-Dollar
• Windsurf schlug 15 Abwehrstrategien vor; die meisten davon wurden in 10 Minuten umgesetzt und das Problem gelöst

Nächste Pläne und technischer Ausblick

• Geplant ist die Einführung einer WebSocket-basierten Streaming-Rezepterzeugung
  • Beispiel: Anweisungen wie „Füge Nüsse hinzu“, „Ändere das auf 8 Portionen“ oder „Wandle das in das metrische System um“ sollen in Echtzeit übernommen werden
• Ebenfalls geplant ist ein Voice-Agent-Interface, damit während des Kochens ohne Touch-Eingaben Fragen gestellt werden können
  • Beispiel: „Ich habe keinen Koriander, gibt es eine Alternative?“ oder „Stell einen 30-Minuten-Timer“
• Für Nutzer mit technischem Hintergrund werden AI-Tools zu einer Superkraft
• Die Entwicklung geht auch in eine Richtung, die für Nicht-Entwickler nutzbar ist: Log-Tailing, automatisierte Tests und Versionsverwaltung sollen integriert werden
• Erwähnt wird auch die Möglichkeit, dass in naher Zukunft 95 % des Codings von AI übernommen werden könnten

---

Zusammenfassung der wichtigsten Funktionen von RecipeNinja

• Kernkonzept: Diese App ist eine Kochassistenz-Anwendung mit sprachgeführter Schritt-für-Schritt-Anleitung, die es Nutzern ermöglicht, beim Kochen freihändig vorzugehen

Backend-Funktionen (auf Basis einer Rails API)

• Benutzerauthentifizierung und Rechteverwaltung

  • Login über Google-OAuth-Integration
  • Benutzerkontenverwaltung mit erhöhter Sicherheit
  • Nutzer können nur auf ihre privaten Rezepte zugreifen; mit anderen teilen lassen sich nur öffentliche Rezepte

• Rezeptverwaltung

  • Aufbau des Rezeptmodells
    • Vergabe einer eindeutigen öffentlichen ID zur Sicherheit (Format: r_ + 14-stelliger zufälliger String)
    • Klare Nutzerzuordnung (Feld user_id, NOT NULL-Constraint)
    • Umschaltbarkeit zwischen öffentlich und privat (Standardwert: privat)
    • Speicherung verschiedener Informationen wie Titel, Zutaten, Kochschritte und Kochzeit
    • Inklusive Bild-Upload über Active Storage und S3
  • Tag-System
    • Viele-zu-viele-Beziehung (M:N) zwischen Rezepten und Tags
    • Tags sind als separates Modell mit eindeutigem Namen implementiert
    • Verwendung eines Zwischenmodells (RecipeTag) für die Verknüpfung zwischen Rezept und Tag
    • Hilfsmethoden zum Hinzufügen und Entfernen von Tags
  • API-Endpunkte für Rezepte
    • Unterstützung für CRUD-Operationen
    • Pagination und Metadaten wie current_page, per_page usw.
    • Standardsortierung nach Erstellungsdatum in absteigender Reihenfolge (created_at DESC)
    • Unterstützung für Tag-basierte Filterung
    • Listen- und Detailansicht werden über unterschiedliche Serializer ausgegeben (RecipeSummarySerializer, RecipeSerializer)

• Sprachgenerierung

  • System zur Sprachaufzeichnung
    • Erzeugung von Sprachansagen für jeden Rezeptschritt
    • Text-to-Speech per Integration der Eleven Labs API
    • Audiodateien werden in S3 gecacht, um bei wiederholten Aufrufen API-Kosten zu senken
    • Erzeugung einer eindeutigen Kennung aus Rezept-ID, Schritt-ID und Voice-ID
    • Möglichkeit zur erzwungenen Neuerzeugung von Audiodateien
  • Audioverarbeitung
    • Audioanalyse mit dem Gem streamio-ffmpeg
    • Verwaltung von Audiodateien mit Active Storage
    • In Produktionsumgebungen Speicherung über S3

• Rezeptimport und -generierung

  • Service RecipeImporter
    • Automatische Rezeptgenerierung über OpenAI-Integration
    • Umwandlung textbasierter Rezepte in ein strukturiertes Format
    • Normalisierung und Parsing von Zutaten und Schritten
    • Einschließlich Funktion zum Rezeptimport per Foto

Frontend-Funktionen (React-basiert)

• Komponenten der Benutzeroberfläche

  • Rezeptauswahl und -navigation
    • Abruf einer paginierten Rezeptliste
    • Echtzeit-Updates im 10-Sekunden-Intervall
    • Tag-basierte Filterung
    • Rezeptkarten mit Zusammenfassungsinformationen auch ohne Bild
    • Für jedes Rezept stehen die Buttons „Details ansehen“ und „Kochen starten“ zur Verfügung

• Rezeptdetailansicht

  • Anzeige der vollständigen Rezeptinformationen
  • Anzeige des Rezeptbildes
  • Liste anklickbarer Tags
  • Start des Kochvorgangs direkt auf dieser Seite möglich

• Oberfläche während des Kochens

  • Schrittweise Kochanleitung
  • Sprachansagen für jeden Schritt
  • Tastaturkürzel für freihändige Bedienung:
    • Pfeiltasten (←/→): zwischen Schritten wechseln
    • Leertaste: Sprachwiedergabe starten/pausieren
    • ESC: zurück zur Rezeptliste
  • Verfolgung des aktuellen Schritts über den URL-Pfad möglich (z. B. /recipe/r_xlxG4bcTLs9jbM/classic-lasagna/steps/1)

State-Management und Datenfluss

• Recipe Service

  • Laden von Rezeptdaten über die API
  • Unterstützung für Pagination-Parameter
  • Tag-basierte Filterung
  • Einsatz eines Cache-Mechanismus für Rezeptdaten
  • Verarbeitung von Bild-URLs für die Detailansicht

• Authentifizierungsfluss

  • Google-OAuth-Integration über Umgebungsvariablen
  • Verwaltung von Benutzersitzungen
  • Automatische Verarbeitung von Authentifizierungs-Headern bei API-Requests

PWA-Funktionen (Progressive Web App)

• Bereitstellung als installierbare PWA für verschiedene Geräte
• Responsives Design für alle Bildschirmgrößen
• Unterstützung für Favicon und App-Icons

Deployment-Architektur

• Duale App-Struktur

  • cook-voice-api: auf Heroku bereitgestelltes Rails-Backend
  • cook-voice-wizard: auf Heroku bereitgestelltes React-Frontend und PWA

• Backend-Infrastruktur

  • Einsatz von Ruby 3.2.2
  • Datenbank über das Heroku-PostgreSQL-Add-on
  • Dateispeicherung mit Amazon S3
  • Konfigurationsverwaltung über Umgebungsvariablen

• Frontend-Infrastruktur

  • React-basierte Anwendung
  • Verwaltung sensibler Informationen wie API-Keys über Umgebungsvariablen
  • Verwendung des statischen Buildpacks von Heroku
  • Routing als SPA (Single Page Application)

• Sicherheitsmaßnahmen

  • Erzwingung von HTTPS
  • Verwendung des Rails-Credentials-Systems
  • Trennung sensibler Informationen in Umgebungsvariablen
  • Schutz der internen Struktur durch öffentliche IDs statt DB-IDs

[GN⁺]

Hacker-News-Kommentare

• Beeindruckend. 35 kLOC ist eine beachtliche Menge. Ich frage mich, wie intuitiv und wartbar diese App ist. Ich sollte mir den Code ansehen. Guter Rails-Code ist kompakt, aber das Frontend kann ziemlich umfangreich sein

  • Die Einschätzung, dass das mit automatisierten Tests und nativer Versionsverwaltung in ein paar Monaten möglich sein wird, ist etwas optimistisch. Am Ende wird aber wohl alles machbar sein
  • Zu der Meinung, dass dies ein mächtiges Tool sei, mit dem nichttechnische Menschen Apps in Produktionsqualität schreiben können: Ich denke nicht, dass nichttechnische Menschen überhaupt einen Grund haben, über Log-Tailing oder Versionsverwaltung nachzudenken. Die AI muss nicht nur ein fähiger Coder sein, sondern auch ein fähiger Architekt und Senior SWE, der die Sprache des Produktmanagements in die Sprache der Softwareentwicklung übersetzen kann. Das wird eine erhebliche Herausforderung sein, um eine mit menschlichen Teams vergleichbare Zuverlässigkeit zu erreichen

• Ich habe ein Rezept für Diarrhea Walnuts erstellt, habe aber eine Walnussallergie, daher gab es Probleme. Ich werde rechtliche Schritte einleiten

• Claude Code ist nützlich. Ich denke aber, dass o1 Pro beim Debugging besser ist

  • Claude Code löst Probleme mit der Zeit, aber ich greife häufiger zu o1 Pro
  • Im Vergleich zwischen o1 Pro und Claude Code hat o1 Pro Probleme schneller gelöst. Die Änderungen von Claude Code habe ich jedoch committed und mit dem Feedback von o1 Probleme behoben, die Claude nicht erkannt hatte

• Es sieht so aus, als würden Jian Yang und Big Head eine neue App bauen

• Ich habe Erfahrung damit, eine Website zur Vereinfachung von Rezepten zu schreiben, und finde dieses Projekt unterhaltsam. Ich denke, der wichtigste Wert eines Engineers in Wartungsprojekten ist Kontext. Ich frage mich, was passiert, wenn man diesen Kontext vollständig an eine Maschine übergibt

  • Ich bekam eine Arbeitsanfrage, und da ein anderer Engineer den Großteil des Codes bereits geschrieben hatte, konnte ich sie innerhalb eines Tages abschließen
  • Ich stimme dem groß angelegten Experiment zu und bin dankbar dafür. Ich frage mich, wie ein System wie Cursor damit umgeht, wenn große Mengen Code fast nie benutzt werden. Wenn 3k LOC versehentlich dupliziert werden, ist fraglich, ob ein automatisiertes System das verstehen und korrigieren kann

• Zur Sprachantwort mit der Echtzeit-API von OpenAI gibt es die Sorge, dass die App bei wachsender Popularität an den Kosten zugrunde gehen könnte. Ich plane, die OpenAI Audio API auch in anderen Fällen zu verwenden, und frage mich, welche Strategie es dafür gibt

• Die Frage ist, ob man ein "vibecode" bauen kann, das auf Websites zeigt, wo man Zutaten kaufen kann. Bestimmte Zutaten sind schwer zu finden

• Die Rezepte sind lustig, aber sobald man weiß, dass sie von AI generiert wurden, verschwindet die Kreativität. Comprehensive JavaScript Tutorial gefällt mir am besten

• Ist die Hauptfunktion Sprachsteuerung? Ich frage mich, warum man diese App im Vergleich zu anderen beliebten Rezept-Websites wählen sollte. Vielleicht ist es hauptsächlich eine Übung für Engineering-/AI-Tests

• Man sollte NSFW zum Titel hinzufügen. Auf der ersten Seite sind mehr als 50 % der Rezepte NSFW