Um sistema moderno e intuitivo para controle financeiro pessoal
- Sobre o Projeto
- Demo
- Features
- Screenshots
- Tecnologias
- Arquitetura
- Instalação
- Como Usar
- Roadmap
- Contribuindo
- Autores
- Licença
- Agradecimentos
O MeuCofre nasceu da necessidade de transformar a maneira como gerenciamos nossas finanças pessoais. Em um mundo onde o controle financeiro é essencial, criamos uma ferramenta que não apenas registra transações, mas proporciona insights valiosos sobre seus hábitos financeiros.
- 🎨 Interface Intuitiva: Design moderno e amigável que torna o controle financeiro uma experiência agradável
- 📊 Insights Poderosos: Visualizações e análises que ajudam na tomada de decisões financeiras
- 🚀 Performance: Construído com tecnologias de ponta para garantir rapidez e eficiência
- 📱 Acesso Universal: Funciona perfeitamente em qualquer dispositivo
Visão geral completa de suas finanças com gráficos interativos e KPIs em tempo real |
Cadastre e categorize suas receitas e despesas com poucos cliques |
Teste o impacto de futuras compras no seu orçamento |
- 🌓 Tema Adaptável: Alterne entre modo claro e escuro
- 💾 Persistência Local: Seus dados salvos automaticamente no navegador
- 📈 Análises Avançadas: Gráficos e relatórios detalhados
- 🔍 Busca e Filtros: Encontre rapidamente qualquer transação
- 📅 Agenda Financeira: Programe lembretes e pagamentos recorrentes
- 🔐 Privacidade: Seus dados permanecem apenas no seu dispositivo
Dashboard Principal |
Gestão de Transações |
Análises e Gráficos |
Modo Escuro |
- React 19 - Biblioteca UI de última geração
- TypeScript 5 - Superset JavaScript com tipagem estática
- Vite 5 - Build tool extremamente rápido
- Tailwind CSS 3 - Framework CSS utility-first
- Zustand - Estado global simples e poderoso
- React Router DOM - Roteamento declarativo
- Recharts - Gráficos construídos com React
- ESLint - Linting de código
- Prettier - Formatação de código
- Git Hooks - Husky + lint-staged
O projeto segue uma arquitetura modular e escalável, inspirada em padrões modernos de desenvolvimento React:
src/
├── 📁 assets/ # Recursos estáticos
├── 📁 components/ # Componentes reutilizáveis
│ ├── 📊 charts/ # Componentes de visualização
│ ├── 🎯 dashboard/ # Componentes do dashboard
│ ├── 📝 forms/ # Formulários reutilizáveis
│ ├── 🏗 layout/ # Componentes de layout
│ ├── 🛒 shop/ # Loja de simulação
│ ├── 💸 transactions/# Componentes de transações
│ └── 🎨 ui/ # Componentes de UI base
├── 📁 context/ # Contextos React (tema, etc)
├── 📁 hooks/ # Custom hooks
├── 📁 pages/ # Páginas/Rotas da aplicação
├── 📁 store/ # Estado global (Zustand)
├── 📁 types/ # Definições TypeScript
├── 📁 utils/ # Funções utilitárias
├── 📄 App.tsx # Componente raiz
└── 📄 main.tsx # Entry point
- Componentes: Functional components com TypeScript
- Estado: Zustand para estado global, useState/useReducer para estado local
- Estilização: Tailwind CSS com classes utilitárias
- Nomeação: PascalCase para componentes, camelCase para funções/variáveis
- Node.js 18+
- npm ou yarn
- Git
-
Clone o repositório
git clone https://github.com/Jeffinp/MeuCofre.git cd MeuCofre -
Instale as dependências
npm install # ou yarn install -
Configure as variáveis de ambiente (opcional)
cp .env.example .env.local
-
Inicie o servidor de desenvolvimento
npm run dev # ou yarn dev -
Acesse a aplicação
Abra http://localhost:5173 no seu navegador
npm run dev # Inicia o servidor de desenvolvimento
npm run build # Gera a build de produção
npm run preview # Visualiza a build de produção
npm run lint # Executa o linter
npm run format # Formata o código com Prettier-
Adicione sua primeira transação
- Clique no botão "Nova Transação"
- Escolha entre Receita ou Despesa
- Preencha os detalhes e salve
-
Visualize seus dados
- Acesse o Dashboard para ver o resumo
- Explore os gráficos interativos
- Use os filtros para análises específicas
-
Simule compras futuras
- Acesse a Loja de Simulação
- Adicione produtos ao carrinho
- Veja o impacto no seu orçamento
- 💡 Use categorias consistentes para melhor organização
- 📊 Revise o dashboard semanalmente para acompanhar suas metas
- 🎯 Defina limites de gastos por categoria
- 📱 Adicione o app à tela inicial do seu celular
- ✅ Dashboard interativo
- ✅ CRUD de transações
- ✅ Temas claro/escuro
- ✅ Design responsivo
- Sistema de autenticação
- Backend com Node.js/Express
- Banco de dados PostgreSQL
- Sincronização em nuvem
- App mobile (React Native)
- Importação de extratos bancários
- Metas financeiras com acompanhamento
- Relatórios PDF/Excel
- Notificações push
- Integração com APIs bancárias
- Carteira de investimentos
- Planejamento de aposentadoria
- Modo família (contas compartilhadas)
- IA para insights financeiros
Contribuições são sempre bem-vindas! Veja como você pode ajudar:
- Fork o projeto
- Crie sua Feature Branch
git checkout -b feature/MinhaFeature
- Commit suas mudanças
git commit -m 'feat: Adiciona MinhaFeature' - Push para a Branch
git push origin feature/MinhaFeature
- Abra um Pull Request
- Siga o padrão de commits convencionais
- Mantenha o código limpo e bem documentado
- Adicione testes quando aplicável
- Atualize a documentação conforme necessário
- 🐛 Reportar bugs
- 💡 Sugerir novas features
- 📝 Melhorar documentação
- 🌐 Traduções
- 🎨 Melhorias de UI/UX
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
- React Icons pelos ícones
- Tailwind UI pela inspiração de design
- Vercel pelo hosting gratuito
- Comunidade open source pelos feedbacks e contribuições
Feito com ❤️ por Jeferson Reis
⭐ Se este projeto te ajudou, considere dar uma estrela!