Brincando com Claude e o nascimento do "QuantoFoi"

A História Por Trás da Ideia

Eu e minha namorada sempre que vamos no mercado nunca lembramos o preço de quanto pagamos em algo e sempre nos perguntamos "quanto foi isso mesmo?" e nem sem lembramos ali na hora. Daí estava de bobeira em um sábado à tarde e resolvi testar o poder das AIs para tirar essa ideia do papel.

No começo acabei testando o site mesmo (Claude na web) e já tive bons resultados, porém atingi o limite rápido depois da IA gerar muito código. Então resolvi pegar o plano PRO para um teste mais pesado, e as primeiras impressões foram bem positivas.

Com apenas alguns inputs e nada muito complexo consegui chegar onde eu queria. Mesmo sendo um projeto bem simples, que é basicamente um CRUD, já deu para ver melhor o poder das IAs e onde sabe-se lá vamos chegar no futuro.

Acho que é um bom momento para tirar ideias do papel, principalmente para validar alguns cenários antes de investir muito tempo nisso.

O Que Foi Construído

🌐 App Live: quantofoi-ff7a9.web.app

Stack Técnica

• 
  Frontend: React 18 + TypeScript + Tailwind CSS


• 
  Backend: Firebase (Authentication + Firestore)


• 
  Build: Vite


• 
  Deploy: Firebase Hosting


• 
  Design: Dark Finance Pro (tema customizado)

Funcionalidades Implementadas

• 📱 Interface Responsiva: Mobile-first, funciona perfeitamente no celular


• 🔐 Autenticação: Login com email/senha + Google OAuth


• 💾 Sincronização: Dados salvos na nuvem, acesso de qualquer dispositivo


• 📊 Analytics: Gráficos de evolução de preços


• 📋 Relatórios: Análises mensais de gastos por categoria


• 🏪 Multi-loja: Compare preços entre diferentes estabelecimentos


• 🔍 Busca Inteligente: Autocomplete para produtos já cadastrados


• 📈 Tendências: Identifica se preços subiram, desceram ou estão estáveis


• 🌙 Dark Theme: Interface moderna e profissional

Como a IA Ajudou no Desenvolvimento

Estruturação do Projeto

O Claude me ajudou desde o setup inicial:

• Configuração do Vite + React + TypeScript


• Estrutura modular de componentes


• Setup do Tailwind com design system customizado

Desenvolvimento das Features

Cada funcionalidade foi sendo construída iterativamente:

• 
  Gerenciamento de Estado: Context API com hooks customizados


• 
  Sincronização: Integração completa com Firebase


• 
  UI/UX: Componentes responsivos com feedback visual


• 
  Análise de Dados: Algoritmos para calcular tendências de preços

Segurança e Deploy

A IA também cuidou da parte de produção:

• Variáveis de ambiente para proteger chaves


• Regras de segurança do Firestore


• Build otimizado para produção


• Deploy automatizado no Firebase Hosting

Lições Aprendidas

1. Velocidade de Prototipação

Em poucas horas consegui:

• ✅ Setup completo do projeto


• ✅ UI funcional e bonita


• ✅ Backend configurado


• ✅ Deploy em produção

2. Qualidade do Código

O Claude não só gera código rápido, mas também:

• Segue boas práticas (TypeScript, modularização)


• Implementa padrões modernos (hooks, context)


• Cuida de detalhes (responsividade, acessibilidade)

3. Aprendizado Iterativo

A experiência foi bem natural:

• Descrevi o que queria


• A IA implementou


• Testei e pedi ajustes


• Evoluímos juntos a funcionalidade

O Futuro das IAs no Desenvolvimento

Cenários Que Fazem Sentido

• 🚀 MVPs Rápidos: Validar ideias sem investir semanas


• 🎯 Prototipação: Testar UX/UI antes do desenvolvimento real


• 📚 Aprendizado: Entender tecnologias novas rapidamente


• 🔧 Automação: Tarefas repetitivas (setup, boilerplate)

Limitações Atuais

• 🧠 Context: Projetos muito grandes podem ser desafiadores


• 🎨 Criatividade: Designs muito específicos ainda precisam de humanos


• 🐛 Debug Complexo: Problemas muito específicos podem ser difíceis


• 🔍 Business Logic: Regras de negócio complexas precisam de supervisão

Resultado Final

🎯 Objetivo: Resolver um problema real (lembrar preços)

✅ Entregue: App completo, seguro e funcional

⏱️ Tempo: Algumas horas de sábado

💰 Custo: Plano do Claude + Firebase (gratuito)

Stats do Projeto

• 
  Linhas de código: ~2.500


• 
  Componentes: 15+


• 
  Funcionalidades: 10+ features completas


• 
  Performance: Lighthouse 90+


• 
  Segurança: Totalmente protegido

Conclusão

O que mais me impressionou foi a naturalidade do processo. Não foi como programar com uma ferramenta, foi mais como conversar com um colega muito experiente que conhece todas as tecnologias e boas práticas.

Para quem está pensando em experimentar:

• 💡 Comece pequeno: Valide a ideia antes de investir muito


• 🎯 Seja específico: Quanto mais detalhes, melhor o resultado


• 🔄 Itere rápido: Teste, ajuste, melhore


• 📚 Aprenda junto: Use como oportunidade de aprender novas tecnologias

O QuantoFoi saiu do papel em um fim de semana, está funcionando perfeitamente, e já estamos usando no dia a dia.

Teste você mesmo: quantofoi-ff7a9.web.app

Código: Em breve no GitHub (ainda organizando a documentação)

Tags: #ai #claude #react #firebase #mvp #weekend-project