💰 PocketWise - Sistema de Gestão Financeira Pessoal/Familiar
PocketWise é um SaaS B2C para controle financeiro pessoal e familiar. Permite que famílias compartilhem e gerenciem suas finanças juntas, com múltiplos usuários editando os mesmos dados.
✨ Funcionalidades Principais
- 📊 Dashboard Interativo: Visão geral completa do patrimônio e finanças
- 💸 Gestão de Transações: Lançamento de despesas e receitas de qualquer lugar
- 💳 Controle de Cartões: Gerenciamento de cartões de crédito e parcelamentos
- 📈 Projeções Financeiras: Projeção de gastos futuros baseada no histórico
- 👨👩👧👦 Compartilhamento Familiar: Múltiplos usuários gerenciando as mesmas finanças
- 🎯 Orçamentos: Definição e acompanhamento de limites de gastos por categoria
🚀 Stack Tecnológica
Frontend
- React 18 - Framework principal
- TypeScript - Type safety
- Vite - Build tool e dev server
- TailwindCSS 3 - Estilização com design system dark mode
- React Router DOM - Navegação
- Zustand - State management
- Recharts - Gráficos e visualizações
- Lucide React - Ícones
- Sonner - Toast notifications
- date-fns - Manipulação de datas
Backend & Infraestrutura (Próximas Fases)
- Supabase - Banco de dados PostgreSQL + Auth + RLS
- Stripe - Sistema de pagamentos e assinaturas
- Vercel - Hospedagem e deploy
🎨 Design System
- Tema: Dark mode com estética tech moderna
- Cores:
- Background:
#0f0f0f (dark-900)
- Primary:
#0ea5e9 (Azul tech)
- Secondary:
#a855f7 (Roxo)
- Estilo: Cards com glassmorphism, bordas arredondadas, sombras suaves
- Tipografia: Inter
📁 Estrutura do Projeto
src/
├── components/
│ ├── ui/ # Componentes de UI reutilizáveis (Button, Card, Input)
│ ├── layout/ # Componentes de layout (Sidebar, Layout)
│ └── features/ # Componentes específicos de features
├── pages/ # Páginas da aplicação
├── hooks/ # Custom React hooks
├── store/ # Zustand stores
├── types/ # TypeScript types e interfaces
├── utils/ # Funções utilitárias (currency, date)
├── lib/ # Configurações de bibliotecas
└── services/ # Serviços (localStorage, futuramente Supabase)
🛠️ Como Executar
Pré-requisitos
- Node.js 18+ instalado
- npm ou yarn
Instalação
- Clone o repositório:
git clone https://github.com/Mateush01silva/Pocket_Wise.git
cd Pocket_Wise
- Instale as dependências:
npm install
- Execute o projeto em modo desenvolvimento:
npm run dev
- Acesse no navegador:
http://localhost:5173
Scripts Disponíveis
npm run dev # Inicia servidor de desenvolvimento
npm run build # Compila para produção
npm run preview # Preview da build de produção
npm run lint # Executa o ESLint
🌐 Deploy na Vercel
O projeto está configurado para deploy automático na Vercel!
Deploy Rápido
- Acesse vercel.com e faça login com GitHub
- Clique em "Add New..." → "Project"
- Importe o repositório "Pocket_Wise"
- Adicione a variável de ambiente:
VITE_USE_LOCAL_STORAGE=true
- Clique em "Deploy"
- 🎉 Pronto! Seu site estará no ar em poucos minutos
Documentação Completa
Para instruções detalhadas, veja o arquivo VERCEL_DEPLOY.md
Atualizações Automáticas
Após o primeiro deploy, toda vez que você fizer git push, a Vercel:
- ✅ Detecta as mudanças automaticamente
- ✅ Faz build da nova versão
- ✅ Atualiza o site em produção
🗺️ Roadmap de Desenvolvimento
✅ Fase 1 - Setup Inicial (Concluído)
🚧 Fase 2 - MVP com LocalStorage (Em Planejamento)
📋 Fase 3 - Funcionalidades Avançadas
🔐 Fase 4 - Integração Supabase
💳 Fase 5 - Monetização
🚀 Fase 6 - Deploy
🤝 Contribuindo
Este é um projeto em desenvolvimento. Contribuições são bem-vindas!
📄 Licença
Este projeto está sob a licença MIT.
Desenvolvido com 💜 usando Claude Code
