Probé vibecodificar una app de cocina de 35,000 líneas

• Un inversionista exfundador desarrolló una app de cocina en 20 horas de trabajo de vibecoding
• La función principal es un asistente de voz que se puede manejar mientras cocinas sin usar las manos
• Backend API en Rails 8 + frontend en React + API de voz en tiempo real de OpenAI
• Aprovecha la función de function calling de OpenAI para navegar por el sitio en tiempo real
• Usó Claude Code y Gemini 2.5 Pro para complementar funciones complejas
• El código total alcanza aproximadamente 35,000 líneas
• Mediante comandos de voz, los usuarios pueden explorar distintas recetas sin tocar nada
• Ofrece una interfaz conversacional natural
• Empezó como un proyecto hobby, pero terminó siendo un resultado de alto nivel, con funciones realmente útiles y una buena experiencia de usuario

Completar una app de cocina con vibecoding

• Una app de cocina planeada y creada directamente por su autor en solo 20 horas: recipeninja.ai
• El autor es un exfundador de startup que hoy es inversionista en Y Combinator y un "desarrollador oxidado" que casi no usaba Ruby desde 2015
• Le gusta cocinar y llevaba mucho tiempo guardando la idea de una “app de cocina manos libres”
• Su queja era que los sitios de cocina existentes están centrados en SEO, que las apps tienen una UX anticuada y que apps como Paprika siguen sintiéndose como de 2009

Selección de herramientas e inicio del proyecto

• Al principio intentó hacer una app de juegos de palabras con Lovable, pero se topó con sus límites
• Después usó Windsurf para armar un backend API en Rails 8 + frontend en React
• Automatizó Homebrew, npm, la configuración de versiones de Ruby, llaves SSH y la configuración de Heroku
• Incluso las migraciones de Rails se procesaron automáticamente siguiendo las convenciones estándar

Desarrollo de funciones básicas

• Con una entrada simple como “Lasagne”, genera la receta completa
• Generación de texto de recetas con OpenAI y generación de voz con ElevenLabs
• Incluye guía por voz paso a paso y salida de imágenes
• También le impresionó cómo Windsurf detectó riesgos de seguridad y exigió con fuerza evitar la exposición de API keys

Expansión de funciones y flujo iterativo de desarrollo

• Implementó en minutos una función avanzada para “importar recetas” a partir de fotos
• Si copiaba y pegaba logs de consola o mensajes de error, Windsurf los corregía automáticamente
• Al pegar capturas de pantalla de la configuración de Google OAuth, detectaba de inmediato qué estaba mal
• Agregar funciones como guardar recetas por usuario y opciones públicas/privadas también se hizo casi automáticamente

Despliegue y configuración de DNS

• Automatizó el despliegue en Heroku, y algunos problemas por uso de APIs antiguas los resolvió con enlaces a la documentación
• Incluso para conectar el dominio en GoDaddy, le indicó exactamente qué botón presionar y qué valores ingresar, así que la configuración fue muy sencilla

Experiencia usando Windsurf como herramienta de IA

• Algunas funciones las probó ejecutando directamente solicitudes curl o vistas previas web
• Los commits en Git y los despliegues a Heroku también se manejaron automáticamente desde la terminal integrada
• Aun así, los cambios excesivos o commits sin verificación seguían requiriendo intervención del usuario
• Por ejemplo, al pedir una función de analítica llegó a agregar más de 100 eventos, mostrando una tendencia a sobrerreaccionar

Puntos débiles y mejoras necesarias

• Como no había pruebas automáticas, después de cada cambio de código era necesario probar manualmente
• Como no tenía función de tail de logs, había que copiar y pegar los logs manualmente para detectar cosas como consultas N+1
• La refactorización de código duplicado no funcionó bien: si se quería modularizar el código sin romper funciones, había que dar instrucciones muy específicas
• Los cambios frecuentes en el formato de respuesta de la API provocaban que el frontend se rompiera
• Falló la incorporación de analítica con Posthog y también hubo conflictos entre los comandos de voz y el audio existente

Optimización de rendimiento y reducción de costos

• Problemas con imágenes en alta resolución → generación automática de miniaturas y versiones de resolución intermedia
• Corrección automática de problemas N+1
• Redujo costos moviendo la API key de ElevenLabs al backend y agregando caché de voz

Aumento explosivo de productividad

• En cada sesión hacía una lista de 10 a 15 ideas de funciones y las implementaba todas en 30 minutos
• Tareas que antes habrían tomado horas se implementaban en 1 a 2 minutos
• También mejoró el diseño con solo dar instrucciones usando capturas de pantalla, generando una UI visualmente muy pulida
• Tomó como referencia el carrusel de la app de DoorDash para implementar un diseño similar, y algunos incluso opinaron que se veía mejor

Trabajo final y problemas de seguridad

• Hasta la configuración del favicon se automatizó con un script de Bash
• Después de publicarlo en Twitter, llegaron cientos de usuarios y se generaron unas 1,000 recetas
• Pero un usuario abusivo generó un cobro de $700 en OpenAI
• Windsurf propuso 15 estrategias de defensa y en 10 minutos aplicó la mayoría para resolver el problema

Planes futuros y perspectiva técnica

• Planea introducir una función de generación de recetas en streaming basada en WebSocket
  • Ej.: reflejar en tiempo real instrucciones como “agrégale nueces”, “cámbialo para 8 porciones” o “convierte esto al sistema métrico”
• También planea construir una interfaz de agente de voz para poder hacer preguntas mientras cocinas sin tocar la pantalla
  • Ej.: “no tengo cilantro, ¿hay algún ingrediente sustituto?” o “pon un temporizador de 30 minutos”
• Para usuarios con base técnica, las herramientas de IA pueden convertirse en un superpoder
• También están avanzando hacia un uso más accesible para no desarrolladores: tailing de logs, pruebas automáticas e integración de control de versiones
• Menciona la posibilidad de que en un futuro cercano el 95% de la escritura de código quede en manos de la IA

---

Resumen de funciones principales de RecipeNinja

• Concepto central: esta app es una aplicación de asistencia para cocinar que ofrece guía por voz paso a paso para que el usuario pueda cocinar sin usar las manos

Funciones del backend (basado en Rails API)

• Autenticación de usuarios y gestión de permisos

  • Inicio de sesión mediante integración con Google OAuth
  • Gestión de cuentas de usuario con seguridad reforzada
  • Los usuarios solo pueden acceder a sus recetas privadas, y solo las recetas públicas pueden compartirse con otros

• Funciones de gestión de recetas

  • Estructura del modelo de receta
    • Asignación de un ID público único por seguridad (formato: r_ + cadena aleatoria de 14 caracteres)
    • Definición clara de propiedad del usuario (user_id, restricción NOT NULL)
    • Posibilidad de alternar entre receta pública/privada (valor por defecto: privada)
    • Almacenamiento de diversa información como título, ingredientes, pasos de cocina y tiempo de preparación
    • Incluye subida de imágenes usando Active Storage y S3
  • Sistema de etiquetas
    • Relación muchos a muchos (M:N) entre recetas y etiquetas
    • Las etiquetas se implementan como un modelo separado con nombre único
    • Usa un modelo intermedio (RecipeTag) para conectar recetas y etiquetas
    • Ofrece métodos helper para agregar y eliminar etiquetas
  • Endpoints de la API de recetas
    • Soporte para operaciones CRUD
    • Función de paginación y entrega de metadatos (current_page, per_page, etc.)
    • El orden por defecto es del más reciente al más antiguo por fecha de creación (created_at DESC)
    • Soporta filtrado por etiquetas
    • Usa serializadores distintos para listado y detalle (RecipeSummarySerializer, RecipeSerializer)

• Función de generación de voz

  • Sistema de grabación de voz
    • Genera guía por voz para cada paso de la receta
    • Convierte texto a voz mediante integración con la API de Eleven Labs
    • Los archivos de audio se almacenan en caché en S3 para reducir costos de API en llamadas repetidas
    • Genera un identificador único combinando ID de receta, ID de paso e ID de voz
    • Ofrece una función para regenerar a la fuerza los archivos de voz
  • Procesamiento de audio
    • Realiza análisis de audio usando la gema streamio-ffmpeg
    • Gestiona archivos de audio con Active Storage
    • En producción aplica un esquema de almacenamiento basado en S3

• Importación y generación de recetas

  • Servicio RecipeImporter
    • Generación automática de recetas mediante integración con OpenAI
    • Conversión de recetas en texto a un formato estructurado
    • Normalización y parsing de ingredientes y pasos
    • Incluye función para importar recetas a partir de fotos

Funciones del frontend (basado en React)

• Componentes de la interfaz de usuario

  • Selección y exploración de recetas
    • Consulta de lista de recetas con paginación
    • Actualización en tiempo real cada 10 segundos
    • Filtrado por etiquetas
    • Tarjetas de recetas con información resumida mostrada sin imágenes
    • Botones de “Ver detalle” y “Empezar a cocinar” para cada receta

• Vista detallada de receta

  • Muestra toda la información de la receta
  • Muestra la imagen de la receta
  • Ofrece una lista de etiquetas clicables
  • Permite empezar a cocinar directamente desde esa página

• Interfaz durante la cocina

  • Ofrece guía de cocina paso a paso
  • Soporte de guía por voz para cada paso
  • Atajos de teclado para operación manos libres:
    • Flechas (←/→): moverse entre pasos
    • Tecla Space: reproducir/pausar voz
    • Tecla ESC: volver a la lista de recetas
  • Permite seguir el paso mediante la ruta URL (ej.: /recipe/r_xlxG4bcTLs9jbM/classic-lasagna/steps/1)

Gestión de estado y flujo de datos

• Recipe Service

  • Carga datos de recetas a través de la API
  • Soporta parámetros de paginación
  • Filtrado por etiquetas
  • Aplica un mecanismo de caché de datos de recetas
  • Manejo de URLs de imágenes para la vista detallada

• Flujo de autenticación

  • Integración con Google OAuth usando variables de entorno
  • Gestión de sesión de usuario
  • Manejo automático de headers de autenticación en solicitudes a la API

Funciones de PWA (Progressive Web App)

• Se ofrece como PWA instalable en distintos dispositivos
• Diseño responsivo adaptado a todos los tamaños de pantalla
• Soporte para favicon e íconos de la app

Arquitectura de despliegue

• Estructura de doble app

  • cook-voice-api: backend en Rails desplegado en Heroku
  • cook-voice-wizard: frontend en React y PWA desplegados en Heroku

• Infraestructura del backend

  • Usa Ruby 3.2.2
  • Base de datos configurada con el add-on Heroku PostgreSQL
  • Almacenamiento de archivos con Amazon S3
  • Gestión de configuración mediante variables de entorno

• Infraestructura del frontend

  • Aplicación basada en React
  • Gestión de información sensible como API keys mediante variables de entorno
  • Uso del static buildpack de Heroku
  • Configuración de enrutamiento SPA (Single Page Application)

• Medidas de seguridad

  • Uso forzado de HTTPS
  • Uso del sistema Rails Credentials
  • Separación de información sensible en variables de entorno
  • Protección de la estructura interna usando Public ID en lugar del ID de la base de datos

[GN⁺]

Opiniones en Hacker News

• Impresionante. 35 kLOC es una cantidad considerable. Me pregunto qué tan intuitiva y mantenible es esta app. Habría que revisar el código fuente. Un buen código en Rails es conciso, pero el frontend puede ser bastante extenso

  • La opinión de que esto podría lograrse en unos meses una vez que se implementen pruebas automatizadas y gestión nativa de versiones es algo optimista. Pero al final, todo eso será posible
  • Sobre la opinión de que esta es una herramienta poderosa con la que personas no técnicas pueden escribir apps con calidad de producción, no creo que las personas no técnicas tengan por qué pensar en hacer tailing de logs o en control de versiones. La IA no solo tiene que convertirse en una programadora competente, sino también en una arquitecta competente y una SWE senior capaz de traducir el lenguaje de gestión de producto al lenguaje de desarrollo de software. Eso será un reto considerable para alcanzar un nivel de confiabilidad similar al de un equipo humano

• Alguien hizo la receta de Diarrhea Walnuts, pero es alérgico a las nueces, así que hubo un problema. Va a tomar acciones legales

• Claude Code parece útil. Pero creo que o1 Pro es mejor para depurar

  • Claude Code termina resolviendo los problemas con el tiempo, pero termino usando más seguido o1 Pro
  • Al comparar o1 Pro con Claude Code, o1 Pro resolvió el problema más rápido. Sin embargo, hice commit de los cambios de Claude Code y usé el feedback de o1 para resolver problemas que Claude no detectó

• Parece que Jian Yang y Big Head están creando una nueva app

• Tengo experiencia escribiendo un sitio web para simplificar recetas, así que este proyecto me parece divertido. Creo que el principal valor de un ingeniero en proyectos de mantenimiento es el contexto. Me pregunto qué pasará si ese contexto se delega por completo a una máquina

  • Recibí una solicitud de trabajo, pero otro ingeniero ya había escrito la mayor parte del código, así que pude terminarlo en un solo día
  • Estoy de acuerdo con hacer experimentos a gran escala y lo agradezco. Me pregunto cómo manejará un sistema como Cursor una situación en la que grandes cantidades de código casi no se usan. Si 3k LOC se duplican por error, dudo que un sistema automatizado pueda entenderlo y corregirlo

• Sobre las respuestas por voz usando la API en tiempo real de OpenAI, existe la preocupación de que si la app se vuelve popular, podría quebrar por los costos. Tengo pensado usar la API de audio de OpenAI para otros casos, así que me da curiosidad la estrategia al respecto

• Pregunta sobre si se puede crear un 'vibecode' que indique en el sitio web dónde conseguir los ingredientes. Hay ingredientes específicos que son difíciles de encontrar

• Las recetas son divertidas, pero una vez que sabes que fueron generadas por IA, pierden su creatividad. Comprehensive JavaScript Tutorial es la que más me gustó

• Pregunta sobre si la función principal es el control por voz. En comparación con otros sitios populares de recetas, da curiosidad saber por qué alguien elegiría esta app. También queda la duda de si es principalmente un ejercicio para probar ingeniería/IA

• Comentario de que deberían agregar NSFW al título. Más del 50% de las recetas de la primera página son NSFW