FinTrack

Interface web do FinTrack, uma aplicação de controle financeiro pessoal para acompanhar receitas, despesas, saldo mensal e evolução dos gastos ao longo do tempo.

O projeto está publicado em produção e integrado à API oficial do FinTrack.

Produção

• Frontend oficial: https://fintrackwallet.vercel.app
• API oficial: https://fin-track-api-60lr.onrender.com
• Status: publicado em produção

Demonstração

Home

Login

Dashboard

Nova Transação

Página 404

Funcionalidades

• Login com Google usando Firebase Authentication.
• Dashboard financeiro com visão mensal.
• Acompanhamento de receitas, despesas e saldo.
• Gráfico de despesas por categoria.
• Histórico mensal para análise da evolução financeira.
• Criação, edição e exclusão de transações.
• Filtros por busca, tipo e categoria.
• Listagem de transações por mês.
• Página 404 interna para rotas não encontradas.
• Layout responsivo com tema escuro.

Tecnologias

• React
• TypeScript
• Vite
• Tailwind CSS
• Firebase Authentication
• Axios
• Recharts
• React Router
• React Toastify
• Lucide React
• ESLint
• Biome

Estrutura do Projeto

fin-track-interface/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── config/
│   ├── context/
│   ├── layout/
│   ├── pages/
│   ├── routes/
│   ├── services/
│   ├── types/
│   ├── utils/
│   ├── App.tsx
│   ├── index.css
│   └── main.tsx
├── vercel.json
├── .env.example
├── eslint.config.js
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

Qualidade Técnica

• Aplicação SPA preparada para deploy na Vercel.
• Redirecionamento permanente do domínio antigo para o domínio oficial.
• Fallback de rotas para o React Router.
• Validação de variáveis públicas obrigatórias no frontend.
• Serviços separados para comunicação com a API.
• Rotas privadas protegidas por autenticação.
• Componentes reutilizáveis para formulários, navegação e indicadores financeiros.

Autor

André Vinícius Branches Cunha