The latest articles on DEV Community by Murilo Pellegrini Fernandes (@murilopf). https://dev.to/murilopf https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F800103%2Fd4e500cc-0aae-48bf-bde9-9b5608d59c4a.jpeg https://dev.to/murilopf en Murilo Pellegrini Fernandes Sat, 02 Aug 2025 20:22:42 +0000 https://dev.to/murilopf/brincando-com-claude-e-o-nascimento-do-quantofoi-1ng1 https://dev.to/murilopf/brincando-com-claude-e-o-nascimento-do-quantofoi-1ng1 <h2> A História Por Trás da Ideia </h2> <p>Sábado à tarde, mercado cheio, e mais uma vez eu e minha namorada nos perguntamos:</p> <p>"Quanto foi isso mesmo da última vez?"</p> <p>Nunca lembramos. Aí bateu: por que não transformar essa dúvida em algo útil?</p> <p>Resolvi testar o poder das IAs e tirar essa ideia do papel, ou melhor, da cabeça, em algumas horas.</p> <p>De ideia a protótipo em poucas horas<br> Comecei testando com o Claude direto do navegador. Os primeiros resultados foram bons, mas logo atingi o limite do plano gratuito depois de algumas gerações de código. Então decidi investir no plano PRO para ver até onde conseguiria ir.</p> <p>Spoiler: fui longe com pouco esforço.</p> <p>Com descrições simples e algumas interações, consegui montar praticamente tudo que imaginava. Mesmo sendo um projeto relativamente simples (um CRUD com algumas análises), a velocidade e qualidade impressionaram.</p> <p>Mais do que só prototipar, consegui colocar algo real em produção, e que estamos usando no dia a dia.</p> <h2> O Que Foi Construído </h2> <p>🌐 <strong>App Live</strong>: <a href="https://quantofoi-ff7a9.web.app" rel="noopener noreferrer">quantofoi-ff7a9.web.app</a></p> <h3> Stack Técnica </h3> <ul> <li> <strong>Frontend</strong>: React 18 + TypeScript + Tailwind CSS</li> <li> <strong>Backend</strong>: Firebase (Authentication + Firestore)</li> <li> <strong>Build</strong>: Vite</li> <li> <strong>Deploy</strong>: Firebase Hosting</li> <li> <strong>Design</strong>: Dark Finance Pro (tema customizado)</li> </ul> <h3> Funcionalidades Implementadas </h3> <ul> <li>📱 <strong>Interface Responsiva</strong>: Mobile-first, funciona perfeitamente no celular</li> <li>🔐 <strong>Autenticação</strong>: Login com email/senha + Google OAuth</li> <li>💾 <strong>Sincronização</strong>: Dados salvos na nuvem, acesso de qualquer dispositivo</li> <li>📊 <strong>Analytics</strong>: Gráficos de evolução de preços</li> <li>📋 <strong>Relatórios</strong>: Análises mensais de gastos por categoria</li> <li>🏪 <strong>Multi-loja</strong>: Compare preços entre diferentes estabelecimentos</li> <li>🔍 <strong>Busca Inteligente</strong>: Autocomplete para produtos já cadastrados</li> <li>📈 <strong>Tendências</strong>: Identifica se preços subiram, desceram ou estão estáveis</li> <li>🌙 <strong>Dark Theme</strong>: Interface moderna e profissional</li> </ul> <h2> Como a IA Ajudou no Desenvolvimento </h2> <h3> Estruturação do Projeto </h3> <p>O Claude me ajudou desde o setup inicial:</p> <ul> <li>Configuração do Vite + React + TypeScript</li> <li>Estrutura modular de componentes</li> <li>Setup do Tailwind com design system customizado</li> </ul> <h3> Desenvolvimento das Features </h3> <p>Cada funcionalidade foi sendo construída iterativamente:</p> <ul> <li> <strong>Gerenciamento de Estado</strong>: Context API com hooks customizados</li> <li> <strong>Sincronização</strong>: Integração completa com Firebase</li> <li> <strong>UI/UX</strong>: Componentes responsivos com feedback visual</li> <li> <strong>Análise de Dados</strong>: Algoritmos para calcular tendências de preços</li> </ul> <h3> Segurança e Deploy </h3> <p>A IA também cuidou da parte de produção:</p> <ul> <li>Variáveis de ambiente para proteger chaves</li> <li>Regras de segurança do Firestore</li> <li>Build otimizado para produção</li> <li>Deploy automatizado no Firebase Hosting</li> </ul> <h2> Lições Aprendidas </h2> <h3> 1. Velocidade de Prototipação </h3> <p>Em <strong>poucas horas</strong> consegui:</p> <ul> <li>✅ Setup completo do projeto</li> <li>✅ UI funcional e bonita</li> <li>✅ Backend configurado</li> <li>✅ Deploy em produção</li> </ul> <h3> 2. Qualidade do Código </h3> <p>O Claude não só gera código rápido, mas também:</p> <ul> <li>Segue boas práticas (TypeScript, modularização)</li> <li>Implementa padrões modernos (hooks, context)</li> <li>Cuida de detalhes (responsividade, acessibilidade)</li> </ul> <h3> 3. Aprendizado Iterativo </h3> <p>A experiência foi bem natural:</p> <ul> <li>Descrevi o que queria</li> <li>A IA implementou</li> <li>Testei e pedi ajustes</li> <li>Evoluímos juntos a funcionalidade</li> </ul> <h2> O Futuro das IAs no Desenvolvimento </h2> <h3> Cenários Que Fazem Sentido </h3> <ul> <li>🚀 <strong>MVPs Rápidos</strong>: Validar ideias sem investir semanas</li> <li>🎯 <strong>Prototipação</strong>: Testar UX/UI antes do desenvolvimento real</li> <li>📚 <strong>Aprendizado</strong>: Entender tecnologias novas rapidamente</li> <li>🔧 <strong>Automação</strong>: Tarefas repetitivas (setup, boilerplate)</li> </ul> <h3> Limitações Atuais </h3> <ul> <li>🧠 <strong>Context</strong>: Projetos muito grandes podem ser desafiadores</li> <li>🎨 <strong>Criatividade</strong>: Designs muito específicos ainda precisam de humanos</li> <li>🐛 <strong>Debug Complexo</strong>: Problemas muito específicos podem ser difíceis</li> <li>🔍 <strong>Business Logic</strong>: Regras de negócio complexas precisam de supervisão</li> </ul> <h2> Resultado Final </h2> <p>🎯 <strong>Objetivo</strong>: Resolver um problema real (lembrar preços)<br> ✅ <strong>Entregue</strong>: App completo, seguro e funcional<br> ⏱️ <strong>Tempo</strong>: Algumas horas de sábado<br> 💰 <strong>Custo</strong>: Plano do Claude + Firebase (gratuito)</p> <h3> Stats do Projeto </h3> <ul> <li> <strong>Linhas de código</strong>: ~2.500</li> <li> <strong>Componentes</strong>: 15+</li> <li> <strong>Funcionalidades</strong>: 10+ features completas</li> <li> <strong>Performance</strong>: Lighthouse 90+</li> <li> <strong>Segurança</strong>: Totalmente protegido</li> </ul> <h2> Conclusão </h2> <p>O que mais me impressionou foi a <strong>naturalidade</strong> do processo. Não foi como programar com uma ferramenta, foi mais como <strong>conversar com um colega muito experiente</strong> que conhece todas as tecnologias e boas práticas.</p> <p>Para quem está pensando em experimentar:</p> <ul> <li>💡 <strong>Comece pequeno</strong>: Valide a ideia antes de investir muito</li> <li>🎯 <strong>Seja específico</strong>: Quanto mais detalhes, melhor o resultado</li> <li>🔄 <strong>Itere rápido</strong>: Teste, ajuste, melhore</li> <li>📚 <strong>Aprenda junto</strong>: Use como oportunidade de aprender novas tecnologias</li> </ul> <p>O QuantoFoi saiu do papel em um fim de semana, está funcionando perfeitamente, e já estamos usando no dia a dia.</p> <p><strong>Teste você mesmo</strong>: <a href="https://quantofoi-ff7a9.web.app" rel="noopener noreferrer">quantofoi-ff7a9.web.app</a></p> <p><strong>Código</strong>: Em breve no GitHub (ainda organizando a documentação)</p> <p><strong>Tags</strong>: #ai #claude #react #firebase #mvp #weekend-project</p> ai webdev programming javascript