Brincando com Claude e o nascimento do “QuantoFoi”

Posted on by




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



Source link