A História Por Trás da Ideia
Sábado à tarde, mercado cheio, e mais uma vez eu e minha namorada nos perguntamos:
"Quanto foi isso mesmo da última vez?"
Nunca lembramos. Aí bateu: por que não transformar essa dúvida em algo útil?
Resolvi testar o poder das IAs e tirar essa ideia do papel, ou melhor, da cabeça, em algumas horas.
De ideia a protótipo em poucas horas
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.
Spoiler: fui longe com pouco esforço.
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.
Mais do que só prototipar, consegui colocar algo real em produção, e que estamos usando no dia a dia.
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
Top comments (0)