Interface moderna e responsiva para controle financeiro pessoal, conectada a uma API REST Spring Boot com autenticação JWT.
- Front-end (Vercel): meu-financeiro-pessoal.vercel.app
- Back-end (Repositório): github.com/claudiondev/financeiro
- Documentação da API (Swagger): disponível ao rodar o backend localmente em
/swagger-ui.html
Front-end do Sistema de Controle Financeiro — uma aplicação Full Stack desenvolvida para gerenciamento de gastos e salários pessoais.
A interface consome uma API REST Spring Boot com autenticação JWT, exibindo dados financeiros em tempo real através de gráficos interativos e tabelas com filtros dinâmicos.
- 🔐 Autenticação JWT com auto-logout em token expirado
- 📊 Dashboard com resumo financeiro mensal
- 💸 CRUD completo de gastos com filtros por mês e categoria
- 💼 CRUD completo de salários com breakdown de comissões e adicionais
- 🥧 Gráficos interativos com Recharts (PieChart e BarChart)
- 📁 Exportação de relatórios em CSV
- 📱 Layout responsivo — sidebar fixa no desktop
| Tecnologia | Uso |
|---|---|
| React 18 | Biblioteca principal |
| Vite | Build tool |
| Tailwind CSS | Estilização |
| Axios | Requisições HTTP + interceptor JWT |
| Recharts | Gráficos interativos |
| Lucide React | Ícones |
| React Router DOM | Navegação |
- Node.js 18+
- Backend rodando em
localhost:8080— ver instruções
# Clone o repositório
git clone https://github.com/claudiondev/financeiro-front
# Entre na pasta
cd financeiro-front
# Instale as dependências
npm install
# Configure a variável de ambiente
cp .env.example .env
# Edite o .env com a URL do backend
# Inicie o servidor de desenvolvimento
npm run devAcesse http://localhost:3000
src/ ├── components/ # Componentes reutilizáveis (Sidebar, Layout, Modal) ├── pages/ # Páginas da aplicação │ ├── Login/ │ ├── Resumo/ │ ├── Gastos/ │ ├── Salarios/ │ └── Relatorios/ └── services/ # Configuração do Axios com interceptor JWT
Claudio Nascimento 🔗 github.com/claudiondev