18 points par GN⁺ 2025-04-03 | 1 commentaires | Partager sur WhatsApp
  • Une appli de cuisine développée en 20 heures de vibe coding par un investisseur ancien fondateur de startup
  • Fonction clé : un assistant vocal permettant de l’utiliser sans les mains pendant la cuisine
  • Backend API Rails 8 + frontend React + API vocale temps réel d’OpenAI
  • Exploitation de la fonctionnalité function calling d’OpenAI pour permettre une navigation en temps réel dans le site
  • Utilisation de Claude Code et Gemini 2.5 Pro pour compléter les fonctionnalités complexes
  • Taille totale du code : environ 35 000 lignes
  • Les commandes vocales permettent aux utilisateurs d’explorer différentes recettes sans toucher l’appareil
  • Fournit une interface conversationnelle naturelle
  • Commencé comme projet hobby, mais le résultat atteint un niveau élevé avec des fonctionnalités réellement utiles et une bonne expérience utilisateur

Terminer une appli de cuisine avec le vibecoding

  • Une appli de cuisine conçue et réalisée en seulement 20 heures : recipeninja.ai
  • L’auteur est un ancien fondateur de startup, aujourd’hui investisseur chez Y Combinator, et un développeur rouillé qui n’avait presque plus utilisé Ruby depuis 2015
  • Passionné de cuisine, il gardait depuis longtemps l’idée d’une « appli de cuisine mains libres »
  • Il reproche aux sites de cuisine existants d’être centrés sur le SEO, aux apps d’avoir une UX vieillissante, et à des apps comme Paprika d’avoir encore un look de 2009

Choix des outils et lancement du projet

  • Au départ, il a tenté de créer une app de jeu de mots avec Lovable, mais a vite atteint ses limites
  • Il est ensuite passé à Windsurf avec une architecture backend API Rails 8 + frontend React
  • Homebrew, npm, la configuration de version de Ruby, les clés SSH et même la configuration Heroku ont été automatisés
  • Les migrations Rails ont aussi été traitées automatiquement selon les conventions standard

Développement des fonctions de base

  • Une simple saisie comme « Lasagne » suffit à générer une recette complète
  • Génération du texte des recettes via OpenAI, et génération vocale via ElevenLabs
  • Ajout de guides vocaux étape par étape et d’un affichage d’images
  • L’auteur a aussi été marqué par la fermeté de Windsurf sur la détection des risques de sécurité, notamment pour éviter l’exposition de clés API

Extension des fonctionnalités et cycle de développement itératif

  • Une fonction avancée d’« import de recette » à partir d’une photo a été implémentée en quelques minutes
  • En copiant-collant les logs console ou les messages d’erreur, Windsurf proposait automatiquement les correctifs
  • Lors de l’intégration de Google OAuth, le simple collage d’une capture d’écran de configuration a permis de repérer immédiatement les erreurs
  • L’ajout de fonctions comme l’enregistrement de recettes par utilisateur ou les réglages public/privé s’est fait presque automatiquement

Déploiement et configuration DNS

  • Le déploiement Heroku a été automatisé, et certains problèmes liés à d’anciennes API ont été résolus via des liens vers la documentation
  • La connexion du domaine GoDaddy a aussi été simplifiée, Windsurf indiquant exactement où cliquer et quelles valeurs saisir

Expérience avec Windsurf comme outil IA

  • Certaines fonctions ont tout de même été testées manuellement avec des requêtes curl ou la prévisualisation web
  • Les commits Git et les déploiements Heroku ont aussi été automatisés depuis le terminal intégré
  • En revanche, des modifications trop larges ou des commits sans validation nécessitaient une intervention humaine
  • Pour une simple demande d’ajout d’analytics, l’outil a par exemple créé plus de 100 événements, signe d’une tendance à en faire trop

Limites et points à améliorer

  • L’absence de tests automatiques impose de tester manuellement après chaque modification du code
  • Faute de fonction de tail des logs, il faut copier les logs à la main pour détecter des problèmes comme les requêtes N+1
  • Le refactoring du code dupliqué ne fonctionne pas correctement : pour modulariser sans casser les fonctionnalités, il faut donner des consignes très précises
  • Le format de réponse des API change souvent, ce qui casse régulièrement le frontend
  • L’intégration de Posthog a échoué, et les commandes vocales sont parfois entrées en conflit avec l’audio existant

Optimisation des performances et réduction des coûts

  • Problème d’images haute résolution → génération automatique de miniatures et de versions en résolution intermédiaire
  • Correction automatique des problèmes N+1
  • Déplacement de la clé API ElevenLabs vers le backend et ajout d’un cache vocal pour réduire les coûts

Explosion de la productivité

  • À chaque session, 10 à 15 idées de fonctionnalités étaient listées puis toutes implémentées en moins de 30 minutes
  • Des tâches qui auraient auparavant pris plusieurs heures étaient réalisées en 1 à 2 minutes
  • Les améliorations de design pouvaient aussi être demandées via captures d’écran, avec à la clé une UI visuellement très aboutie
  • En s’inspirant du carrousel de l’app DoorDash, il a recréé un design similaire — jugé même plus réussi

Finitions et enjeux de sécurité

  • La configuration du favicon a elle aussi été automatisée via un script Bash
  • Après un post sur Twitter, des centaines d’utilisateurs ont visité le site et près de 1 000 recettes ont été générées
  • Mais un utilisateur malveillant a provoqué 700 $ de frais OpenAI
  • Windsurf a alors proposé 15 stratégies de défense, dont la plupart ont été appliquées en 10 minutes pour résoudre le problème

Projets à venir et perspectives techniques

  • Une fonction de génération de recettes en streaming basée sur WebSocket est prévue
    • Exemple : prendre en compte en temps réel des demandes comme « ajoute des noix », « passe à 8 portions » ou « convertis en système métrique »
  • Une interface d’agent vocal est aussi prévue pour pouvoir poser des questions pendant la cuisine sans toucher l’écran
    • Exemple : « Je n’ai pas de coriandre, il y a un substitut ? », « mets un minuteur de 30 minutes »
  • Pour les utilisateurs ayant une base technique, les outils IA deviennent un superpouvoir
  • L’évolution vise aussi les non-développeurs : tailing de logs, tests automatiques et intégration du versioning sont prévus
  • L’auteur évoque la possibilité, dans un futur proche, d’un monde où 95 % du code serait écrit par l’IA

Résumé des principales fonctions de RecipeNinja

  • Concept central : cette app est une application d’assistance à la cuisine qui fournit des instructions vocales étape par étape afin de permettre aux utilisateurs de cuisiner sans utiliser leurs mains

Fonctionnalités backend (base API Rails)

  • Authentification utilisateur et gestion des permissions

    • Connexion via intégration Google OAuth
    • Gestion des comptes utilisateurs avec sécurité renforcée
    • Les utilisateurs ne peuvent accéder qu’à leurs propres recettes privées, et seules les recettes publiques peuvent être partagées
  • Fonctions de gestion des recettes

    • Modèle de recette
      • Attribution d’un ID public unique pour la sécurité (format : r_ + chaîne aléatoire de 14 caractères)
      • Clarification de la propriété utilisateur (user_id, contrainte NOT NULL)
      • Possibilité de basculer une recette en public/privé (valeur par défaut : privé)
      • Stockage de nombreuses informations : titre, ingrédients, étapes, temps de cuisson, etc.
      • Comprend une fonction d’upload d’images avec Active Storage et S3
    • Système de tags
      • Relation many-to-many (M:N) entre recettes et tags
      • Les tags sont implémentés comme un modèle distinct avec un nom unique
      • Utilisation d’un modèle intermédiaire (RecipeTag) pour relier recettes et tags
      • Méthodes helper fournies pour ajouter et supprimer des tags
    • Endpoints de l’API de recettes
      • Support des opérations CRUD
      • Pagination avec métadonnées (current_page, per_page, etc.)
      • Tri par défaut : plus récent d’abord (created_at DESC)
      • Support du filtrage par tags
      • Utilisation de sérialiseurs distincts pour la liste et le détail (RecipeSummarySerializer, RecipeSerializer)
  • Fonction de génération vocale

    • Système d’enregistrement vocal
      • Génération d’un guidage vocal pour chaque étape d’une recette
      • Conversion texte-vers-voix via l’API Eleven Labs
      • Les fichiers audio sont mis en cache sur S3 pour réduire les coûts API lors des appels répétés
      • Génération d’un identifiant unique combinant ID de recette, ID d’étape et ID vocal
      • Possibilité de forcer la régénération des fichiers vocaux
    • Traitement audio
      • Analyse audio via la gem streamio-ffmpeg
      • Gestion des fichiers audio avec Active Storage
      • En production, stockage reposant sur S3
  • Import et génération de recettes

    • Service RecipeImporter
      • Génération automatique de recettes via intégration OpenAI
      • Conversion de recettes textuelles vers un format structuré
      • Normalisation et parsing des ingrédients et étapes
      • Comprend une fonction d’import de recette par photo

Fonctionnalités frontend (base React)

  • Composants d’interface utilisateur

    • Sélection et exploration des recettes
      • Consultation d’une liste de recettes paginée
      • Mises à jour en temps réel toutes les 10 secondes
      • Filtrage par tags
      • Cartes recette affichant un résumé sans image
      • Boutons « Voir le détail » et « Commencer à cuisiner » pour chaque recette
  • Affichage détaillé des recettes

    • Affichage complet des informations de la recette
    • Affichage de l’image de la recette
    • Liste de tags cliquables
    • Possibilité de commencer à cuisiner directement depuis cette page
  • Interface pendant la cuisine

    • Guidage de cuisine étape par étape
    • Instructions vocales pour chaque étape
    • Raccourcis clavier pour une utilisation mains libres :
      • Flèches (←/→) : navigation entre les étapes
      • Touche Space : lecture/pause audio
      • Touche ESC : retour à la liste des recettes
    • Suivi de l’étape via le chemin d’URL (ex. : /recipe/r_xlxG4bcTLs9jbM/classic-lasagna/steps/1)

Gestion d’état et flux de données

  • Recipe Service

    • Chargement des données de recette via l’API
    • Support des paramètres de pagination
    • Filtrage par tags
    • Application d’un mécanisme de cache des données de recette
    • Traitement des URL d’image pour la vue détaillée
  • Flux d’authentification

    • Intégration Google OAuth via variables d’environnement
    • Gestion des sessions utilisateur
    • Gestion automatique des en-têtes d’authentification lors des requêtes API

Fonctionnalités PWA (Progressive Web App)

  • Proposée sous forme de PWA installable sur différents appareils
  • Design responsive adapté à toutes les tailles d’écran
  • Support du favicon et des icônes d’application

Architecture de déploiement

  • Structure en double app

    • cook-voice-api : backend Rails déployé sur Heroku
    • cook-voice-wizard : frontend React et PWA déployés sur Heroku
  • Infrastructure backend

    • Utilisation de Ruby 3.2.2
    • Base de données via l’add-on Heroku PostgreSQL
    • Stockage des fichiers sur Amazon S3
    • Gestion de la configuration via variables d’environnement
  • Infrastructure frontend

    • Application basée sur React
    • Gestion des informations sensibles comme les clés API via variables d’environnement
    • Utilisation du static buildpack de Heroku
    • Routage de type SPA (Single Page Application)
  • Mesures de sécurité

    • HTTPS imposé
    • Utilisation du système Rails Credentials
    • Séparation des informations sensibles dans des variables d’environnement
    • Protection de la structure interne grâce à l’usage d’un Public ID à la place de l’ID de base de données

1 commentaires

 
GN⁺ 2025-04-03
Commentaires sur Hacker News
  • Impressionnant. 35 kLOC, c’est une quantité conséquente. Je me demande à quel point cette appli est intuitive et maintenable. Il faudra jeter un œil au code source. Un bon code Rails est concis, mais le frontend peut être assez massif

    • L’idée selon laquelle ce sera possible d’ici quelques mois une fois les tests automatisés et une gestion de versions native mis en place paraît un peu optimiste. Mais au final, tout cela finira par être possible
    • À propos de l’idée que c’est un outil puissant permettant à des non-techniciens d’écrire des applis de qualité production, je ne vois pas pourquoi des non-techniciens auraient à penser au suivi des logs ou à la gestion de versions. L’IA ne doit pas seulement devenir un codeur compétent, elle doit aussi devenir un architecte compétent et un SWE senior capable de traduire le langage de la gestion produit en langage de développement logiciel. Ce sera un défi considérable pour atteindre un niveau de fiabilité comparable à celui d’une équipe humaine
  • Quelqu’un a créé une recette « Diarrhea Walnuts » alors qu’il est allergique aux noix, et ça a causé un problème. Des poursuites judiciaires vont être engagées

  • Avis selon lequel Claude Code est utile. Mais o1 Pro serait meilleur pour le débogage

    • Claude Code finit par résoudre les problèmes avec le temps, mais j’utilise plus souvent o1 Pro
    • En comparant o1 Pro et Claude Code, o1 Pro a résolu le problème plus rapidement. Cependant, j’ai commit les modifications de Claude Code et utilisé les retours de o1 pour corriger des problèmes que Claude n’avait pas détectés
  • Avis selon lequel Jian Yang et Big Head semblent être en train de créer une nouvelle appli

  • J’ai déjà créé un site web de simplification de recettes, donc je trouve ce projet amusant. Je pense que la principale valeur d’un ingénieur dans un projet de maintenance, c’est le contexte. Je me demande ce qui se passe si on confie entièrement ce contexte à une machine

    • J’ai reçu une demande de tâche, et comme un autre ingénieur avait déjà écrit l’essentiel du code, j’ai pu la terminer en une journée
    • Je suis d’accord avec cette expérimentation à grande échelle et je l’apprécie. Je me demande comment un système comme Cursor gérera les situations où de gros volumes de code sont à peine utilisés. Si 3k LOC sont dupliquées par erreur, je doute qu’un système automatisé puisse le comprendre et le corriger
  • Au sujet des réponses vocales utilisant l’API temps réel d’OpenAI, certains craignent que l’appli puisse faire faillite à cause des coûts si elle devient populaire. J’envisage d’utiliser l’API audio d’OpenAI dans d’autres cas, donc sa stratégie à ce sujet m’intéresse

  • Question sur la possibilité de créer un « vibecode » qui indique sur le site web où se procurer les ingrédients. Certains ingrédients sont difficiles à trouver

  • Avis selon lequel les recettes sont amusantes, mais que leur créativité disparaît dès qu’on apprend qu’elles ont été générées par IA. Comprehensive JavaScript Tutorial est le préféré

  • Question de savoir si la fonctionnalité principale est le contrôle vocal. On se demande pourquoi choisir cette appli plutôt qu’un autre site de recettes populaire. Doute sur le fait qu’il s’agisse surtout d’un exercice pour tester l’ingénierie/l’IA

  • Avis selon lequel il faudrait ajouter NSFW au titre. Plus de 50 % des recettes de la première page sont NSFW