https://github.com/jeffinp/gestao_financeira
https://github.com/jeffinp/gestao_financeira
dashboard data-visualization expense-tracker finance fintech frontend personal-finance react responsive-design tailwindcss vite zustand
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jeffinp/gestao_financeira
- Owner: Jeffinp
- License: mit
- Created: 2025-06-02T23:44:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-27T16:43:44.000Z (12 months ago)
- Last Synced: 2025-06-27T17:41:28.579Z (12 months ago)
- Topics: dashboard, data-visualization, expense-tracker, finance, fintech, frontend, personal-finance, react, responsive-design, tailwindcss, vite, zustand
- Language: TypeScript
- Homepage: https://gestao-financeira-three.vercel.app
- Size: 512 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MeuCofre – Sistema de Gestão Financeira Pessoal
Organize suas finanças, transforme seu futuro 💰
Um sistema moderno e intuitivo para controle financeiro pessoal
Reportar Bug
·
Sugerir Feature
·
Ver Demo
---
## 📋 Índice
- [Sobre o Projeto](#-sobre-o-projeto)
- [Demo](#-demo)
- [Features](#-features)
- [Screenshots](#-screenshots)
- [Tecnologias](#-tecnologias)
- [Arquitetura](#-arquitetura)
- [Instalação](#-instalação)
- [Como Usar](#-como-usar)
- [Roadmap](#-roadmap)
- [Contribuindo](#-contribuindo)
- [Autores](#-autores)
- [Licença](#-licença)
- [Agradecimentos](#-agradecimentos)
---
## 🎯 Sobre o Projeto
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.
### Por que o MeuCofre?
- **🎨 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
---
## 🌐 Demo
---
## ✨ Features
### 🎯 Principais Funcionalidades
Dashboard Inteligente
Visão geral completa de suas finanças com gráficos interativos e KPIs em tempo real
Gestão de Transações
Cadastre e categorize suas receitas e despesas com poucos cliques
Simulador de Compras
Teste o impacto de futuras compras no seu orçamento
### 🔧 Funcionalidades Técnicas
- **🌓 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
---
## 📸 Screenshots
Dashboard Principal
Gestão de Transações
Análises e Gráficos
Modo Escuro
---
## 🛠 Tecnologias
### Frontend
- **[React 19](https://react.dev/)** - Biblioteca UI de última geração
- **[TypeScript 5](https://www.typescriptlang.org/)** - Superset JavaScript com tipagem estática
- **[Vite 5](https://vitejs.dev/)** - Build tool extremamente rápido
- **[Tailwind CSS 3](https://tailwindcss.com/)** - Framework CSS utility-first
### Gerenciamento de Estado e Roteamento
- **[Zustand](https://zustand-demo.pmnd.rs/)** - Estado global simples e poderoso
- **[React Router DOM](https://reactrouter.com/)** - Roteamento declarativo
### Visualização de Dados
- **[Recharts](https://recharts.org/)** - Gráficos construídos com React
### Ferramentas de Desenvolvimento
- **ESLint** - Linting de código
- **Prettier** - Formatação de código
- **Git Hooks** - Husky + lint-staged
---
## 🏗 Arquitetura
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
```
### Padrões e Convenções
- **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
---
## 🚀 Instalação
### Pré-requisitos
- Node.js 18+
- npm ou yarn
- Git
### Passo a Passo
1. **Clone o repositório**
```bash
git clone https://github.com/Jeffinp/MeuCofre.git
cd MeuCofre
```
2. **Instale as dependências**
```bash
npm install
# ou
yarn install
```
3. **Configure as variáveis de ambiente (opcional)**
```bash
cp .env.example .env.local
```
4. **Inicie o servidor de desenvolvimento**
```bash
npm run dev
# ou
yarn dev
```
5. **Acesse a aplicação**
Abra [http://localhost:5173](http://localhost:5173) no seu navegador
### Comandos Disponíveis
```bash
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
```
---
## 💡 Como Usar
### Primeiros Passos
1. **Adicione sua primeira transação**
- Clique no botão "Nova Transação"
- Escolha entre Receita ou Despesa
- Preencha os detalhes e salve
2. **Visualize seus dados**
- Acesse o Dashboard para ver o resumo
- Explore os gráficos interativos
- Use os filtros para análises específicas
3. **Simule compras futuras**
- Acesse a Loja de Simulação
- Adicione produtos ao carrinho
- Veja o impacto no seu orçamento
### Dicas de Uso
- 💡 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
---
## 📅 Roadmap
### Versão 1.0 (Atual)
- ✅ Dashboard interativo
- ✅ CRUD de transações
- ✅ Temas claro/escuro
- ✅ Design responsivo
### Versão 2.0 (Em Desenvolvimento)
- [ ] Sistema de autenticação
- [ ] Backend com Node.js/Express
- [ ] Banco de dados PostgreSQL
- [ ] Sincronização em nuvem
### Versão 3.0 (Planejado)
- [ ] App mobile (React Native)
- [ ] Importação de extratos bancários
- [ ] Metas financeiras com acompanhamento
- [ ] Relatórios PDF/Excel
- [ ] Notificações push
### Features Futuras
- [ ] Integração com APIs bancárias
- [ ] Carteira de investimentos
- [ ] Planejamento de aposentadoria
- [ ] Modo família (contas compartilhadas)
- [ ] IA para insights financeiros
---
## 🤝 Contribuindo
Contribuições são sempre bem-vindas! Veja como você pode ajudar:
### Como Contribuir
1. **Fork o projeto**
2. **Crie sua Feature Branch**
```bash
git checkout -b feature/MinhaFeature
```
3. **Commit suas mudanças**
```bash
git commit -m 'feat: Adiciona MinhaFeature'
```
4. **Push para a Branch**
```bash
git push origin feature/MinhaFeature
```
5. **Abra um Pull Request**
### Diretrizes de Contribuição
- 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
### Tipos de Contribuição
- 🐛 Reportar bugs
- 💡 Sugerir novas features
- 📝 Melhorar documentação
- 🌐 Traduções
- 🎨 Melhorias de UI/UX
---
## 👨💻 Autores
---
## 📄 Licença
Este projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
---
## 🙏 Agradecimentos
- [React Icons](https://react-icons.github.io/react-icons/) pelos ícones
- [Tailwind UI](https://tailwindui.com/) pela inspiração de design
- [Vercel](https://vercel.com/) 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!
