Testei fazer vibe coding em um app de culinária com 35.000 linhas

• Um investidor ex-fundador desenvolveu um app de culinária em 20 horas de trabalho com vibe coding
• A funcionalidade principal é um assistente de voz que permite controlar tudo sem usar as mãos durante o preparo
• Backend em Rails 8 API + frontend em React + API de voz em tempo real da OpenAI
• Uso do recurso de function calling da OpenAI para navegação em tempo real dentro do site
• Uso de Claude Code e Gemini 2.5 Pro para complementar funcionalidades complexas
• O código total tem cerca de 35.000 linhas
• Comandos de voz permitem explorar várias receitas sem tocar na tela
• Interface conversacional natural
• Começou como projeto de hobby, mas acabou resultando em um produto de alto nível, com recursos úteis e boa experiência de usuário

Concluindo um app de culinária com vibecoding

• App de culinária criado e planejado pelo autor em apenas 20 horas: recipeninja.ai
• O autor é um ex-fundador de startup, hoje investidor da Y Combinator, e um "desenvolvedor enferrujado" que quase não usava Ruby desde 2015
• Gosta de cozinhar e guardava havia muito tempo a ideia de um “app de culinária hands-free”
• Reclama que os sites de receita existentes são centrados em SEO, que os apps têm UX ultrapassada, e que apps como Paprika parecem parados em 2009

Escolha de ferramentas e início do projeto

• No começo, tentou criar um app de jogo de palavras com Lovable, mas esbarrou em limitações
• Depois passou a usar Windsurf para montar um backend Rails 8 API + frontend React
• Automatizou Homebrew, npm, configuração de versão do Ruby, chaves SSH e setup do Heroku
• Até as migrations do Rails foram tratadas automaticamente seguindo as convenções padrão

Desenvolvimento das funções básicas

• Com uma entrada simples como “Lasagne”, o app gera a receita completa
• Geração do texto da receita com OpenAI e geração de voz com ElevenLabs
• Inclui guia por voz passo a passo e exibição de imagens
• Também chamou atenção o fato de o Windsurf detectar riscos de segurança e insistir fortemente para evitar exposição de chaves de API

Expansão de recursos e fluxo iterativo de desenvolvimento

• Implementou em poucos minutos um recurso avançado de importação de receita por foto
• Ao colar logs de console ou mensagens de erro, o Windsurf corrigia automaticamente
• Ao colar screenshots da configuração do Google OAuth, ele identificava na hora o que estava errado
• Adições como salvar receitas por usuário e configurar público/privado também aconteceram quase automaticamente

Deploy e configuração de DNS

• Automatizou o deploy no Heroku, e alguns problemas com APIs antigas foram resolvidos com links para a documentação
• Na conexão do domínio da GoDaddy, ele indicou até onde clicar e quais valores preencher, facilitando toda a configuração

Experiência de uso do Windsurf como ferramenta de IA

• Em algumas funções, o autor testou manualmente com requisições curl ou preview web
• Commits no Git e deploy no Heroku também foram executados automaticamente pelo terminal embutido
• Mesmo assim, mudanças excessivas ou commits sem verificação ainda exigiam intervenção humana
• Ao pedir analytics, por exemplo, a ferramenta chegou a adicionar mais de 100 eventos, mostrando uma tendência a exagerar

Pontos fracos e limitações

• Sem testes automatizados, foi preciso testar manualmente após cada alteração no código
• Como não havia recurso de tail de logs, foi necessário copiar logs manualmente para detectar coisas como queries N+1
• O refactoring de código duplicado não funcionava bem — para modularizar sem quebrar funcionalidades, eram necessárias instruções bem específicas
• Mudanças frequentes no formato de resposta da API quebravam o frontend
• Houve falha na adoção do Posthog, e comandos de voz entravam em conflito com o áudio existente

Otimização de performance e redução de custos

• Problema com imagens em alta resolução → geração automática de thumbnails e versões em resolução intermediária
• Correção automática de problemas N+1
• Economia de custos ao mover a chave da API da ElevenLabs para o backend e adicionar cache de voz

Ganho explosivo de produtividade

• Em cada sessão, o autor listava de 10 a 15 ideias de funcionalidades e implementava todas em 30 minutos
• Tarefas que antes levariam horas passaram a ser feitas em 1 a 2 minutos
• Melhorias de design também eram feitas apenas com instruções baseadas em screenshots, gerando uma UI visualmente refinada
• Um carrossel inspirado no app do DoorDash foi reproduzido com design parecido — e alguns acharam até mais bonito

Etapas finais e questões de segurança

• Até a configuração do favicon foi automatizada com um script Bash
• Depois de postar no Twitter, centenas de usuários visitaram o app e cerca de 1.000 receitas foram geradas
• Mas um usuário abusivo gerou US$ 700 em custos com a OpenAI
• O Windsurf sugeriu 15 estratégias de defesa, e a maioria foi aplicada em 10 minutos para resolver o problema

Próximos passos e visão técnica

• Pretende adicionar geração de receitas por streaming via WebSocket
  • Ex.: “adicione nozes”, “mude para 8 porções”, “converta para sistema métrico” com aplicação em tempo real
• Também planeja criar uma interface de agente por voz — permitindo fazer perguntas durante o preparo sem tocar na tela
  • Ex.: “não tenho coentro, tem algum substituto?”, “defina um timer de 30 minutos”
• Para quem tem base técnica, ferramentas de IA viram superpoderes
• A evolução também está tornando isso mais acessível a não desenvolvedores: log tailing, testes automáticos e integração com versionamento estão no horizonte
• O autor menciona a possibilidade de, em um futuro próximo, 95% da escrita de código ser feita por IA

---

Resumo das principais funções do RecipeNinja

• Conceito principal: este app é uma aplicação de apoio ao preparo com instruções por voz passo a passo, pensada para permitir que o usuário cozinhe sem usar as mãos

Recursos de backend (baseados em Rails API)

• Autenticação de usuários e controle de permissões

  • Login via integração com Google OAuth
  • Gestão de contas de usuário com segurança reforçada
  • Cada usuário só pode acessar suas receitas privadas, e apenas receitas públicas podem ser compartilhadas com outras pessoas

• Recursos de gerenciamento de receitas

  • Estrutura do modelo de receita
    • Atribuição de um ID público único por segurança (formato: r_ + string aleatória de 14 caracteres)
    • Definição clara de propriedade do usuário (user_id, com restrição NOT NULL)
    • Alternância entre receita pública e privada (padrão: privada)
    • Armazenamento de várias informações, como título, ingredientes, etapas e tempo de preparo
    • Inclui upload de imagem com Active Storage e S3
  • Sistema de tags
    • Relação muitos-para-muitos (M:N) entre receitas e tags
    • Tags implementadas como modelo separado com nome único
    • Uso de modelo intermediário (RecipeTag) para a ligação entre receita e tag
    • Métodos auxiliares para adicionar e remover tags
  • Endpoints da API de receitas
    • Suporte a operações CRUD
    • Paginação com metadados (current_page, per_page etc.)
    • Ordenação padrão por data de criação, da mais recente para a mais antiga (created_at DESC)
    • Suporte a filtro por tags
    • Lista e detalhes usam serializers diferentes (RecipeSummarySerializer, RecipeSerializer)

• Geração de voz

  • Sistema de gravação de voz
    • Geração de guia de voz para cada etapa da receita
    • Integração com a API da Eleven Labs para converter texto em voz
    • Arquivos de áudio são armazenados em cache no S3 para reduzir custos de API em chamadas repetidas
    • Geração de identificador único combinando ID da receita, ID da etapa e ID da voz
    • Recurso para forçar a regeneração dos arquivos de voz
  • Processamento de áudio
    • Análise de áudio com a gem streamio-ffmpeg
    • Gerenciamento de arquivos de áudio com Active Storage
    • Em produção, armazenamento baseado em S3

• Importação e geração de receitas

  • Serviço RecipeImporter
    • Geração automática de receitas com integração da OpenAI
    • Conversão de texto de receita para formato estruturado
    • Normalização e parsing de ingredientes e etapas
    • Inclui recurso de importação de receita por foto

Recursos de frontend (baseados em React)

• Componentes da interface do usuário

  • Seleção e exploração de receitas
    • Lista paginada de receitas
    • Atualização em tempo real a cada 10 segundos
    • Filtro por tags
    • Cards de receita com informações resumidas e sem imagem
    • Botões “Ver detalhes” e “Começar a cozinhar” para cada receita

• Visualização detalhada da receita

  • Exibição de todas as informações da receita
  • Exibição da imagem da receita
  • Lista de tags clicáveis
  • Possibilidade de começar a cozinhar diretamente nessa página

• Interface durante o preparo

  • Guia de culinária passo a passo
  • Suporte a instruções por voz em cada etapa
  • Atalhos de teclado para operação hands-free:
    • Setas (←/→): mover entre etapas
    • Tecla Space: reproduzir/pausar áudio
    • Tecla ESC: voltar à lista de receitas
  • Rastreamento de etapa pela URL (ex.: /recipe/r_xlxG4bcTLs9jbM/classic-lasagna/steps/1)

Gerenciamento de estado e fluxo de dados

• Recipe Service

  • Carregamento dos dados de receita via API
  • Suporte a parâmetros de paginação
  • Filtro por tags
  • Mecanismo de cache de dados de receita
  • Tratamento de URL de imagem para uso na tela de detalhes

• Fluxo de autenticação

  • Integração com Google OAuth usando variáveis de ambiente
  • Gerenciamento de sessão do usuário
  • Tratamento automático de headers de autenticação nas requisições da API

Recursos de PWA (Progressive Web App)

• Disponível como PWA instalável em vários dispositivos
• Design responsivo adaptado a todos os tamanhos de tela
• Suporte a favicon e ícones do app

Arquitetura de deploy

• Estrutura de app duplo

  • cook-voice-api: backend Rails implantado no Heroku
  • cook-voice-wizard: frontend React e PWA implantados no Heroku

• Infraestrutura de backend

  • Uso do Ruby 3.2.2
  • Banco de dados com addon Heroku PostgreSQL
  • Armazenamento de arquivos com Amazon S3
  • Gerenciamento de configuração com variáveis de ambiente

• Infraestrutura de frontend

  • Aplicação baseada em React
  • Gerenciamento de informações sensíveis, como chaves de API, por configuração de variáveis de ambiente
  • Uso do static buildpack do Heroku
  • Roteamento SPA (Single Page Application)

• Medidas de segurança

  • HTTPS obrigatório
  • Uso do sistema Rails Credentials
  • Separação de dados sensíveis em variáveis de ambiente
  • Proteção da estrutura interna com uso de Public ID em vez de ID do banco de dados

[GN⁺]

Comentários no Hacker News

• Impressionante. 35 kLOC é bastante coisa. Fico curioso sobre o quão intuitivo e fácil de manter esse app é. Vou precisar olhar o código-fonte. Um bom código Rails é conciso, mas o frontend pode ficar bem grande

  • A opinião de que isso deve ser possível dentro de alguns meses, quando testes automatizados e controle de versão nativo forem implementados, parece um tanto otimista. Mas, no fim, tudo isso deve acabar sendo possível
  • Sobre a opinião de que esta é uma ferramenta poderosa que permite que pessoas não técnicas escrevam apps com qualidade de produção, acho que pessoas não técnicas não têm motivo para pensar em acompanhar logs ou controle de versão. A IA precisa não só ser uma programadora competente, mas também uma arquiteta competente e uma SWE sênior capaz de traduzir a linguagem de gestão de produto para a linguagem de desenvolvimento de software. Isso será um desafio considerável para alcançar uma confiabilidade parecida com a de uma equipe humana

• Alguém comentou que fez a receita de Diarrhea Walnuts, mas tem alergia a nozes e isso causou um problema. Vai entrar com medidas legais

• Opinião de que Claude Code é útil. Porém, acha que o o1 Pro é melhor para depuração

  • Claude Code acaba resolvendo o problema com o tempo, mas a pessoa se vê usando mais o o1 Pro
  • Ao comparar o o1 Pro com o Claude Code, o o1 Pro resolveu o problema mais rápido. No entanto, a pessoa fez commit das mudanças do Claude Code e usou o feedback do o1 para corrigir problemas que o Claude não detectou

• Alguém comentou que parece que Jian Yang e Big Head estão criando um novo app

• Como já escreveu um site de simplificação de receitas, acha este projeto divertido. Considera que o principal valor de um engenheiro em projetos de manutenção é o contexto. Fica curioso para saber o que acontece quando esse contexto é totalmente entregue à máquina

  • Recebeu uma solicitação de trabalho, mas outro engenheiro já tinha escrito quase todo o código, então conseguiu terminar em um dia
  • Concorda com o experimento em larga escala e agradece por ele. Fica curioso sobre como sistemas como o Cursor vão lidar com situações em que grandes quantidades de código quase nunca são usadas. Se 3k LOC forem duplicadas por engano, questiona se um sistema automatizado conseguirá entender isso e corrigir

• Sobre respostas por voz usando a API em tempo real da OpenAI, há preocupação de que, se o app ficar popular, os custos possam levar à falência. A pessoa planeja usar a API de áudio da OpenAI em outros casos e tem curiosidade sobre a estratégia relacionada a isso

• Pergunta se dá para criar um "vibecode" que diga, em um site, onde conseguir os ingredientes. Certos ingredientes são difíceis de encontrar

• Opinião de que as receitas são divertidas, mas, ao saber que foram geradas por IA, a criatividade delas desaparece. Comprehensive JavaScript Tutorial é a favorita

• Pergunta se a principal funcionalidade é o controle por voz. Fica curioso sobre por que alguém escolheria este app em vez de outros sites populares de receitas. Questiona se isso é principalmente um exercício para testes de engenharia/IA

• Opinião de que deveria adicionar NSFW ao título. Mais de 50% das receitas na primeira página são NSFW