Finance Tracker

Aplicação fullstack de controle financeiro pessoal

🚀 Ver Demo · 📖 API Docs

---

---

📋 Sobre o projeto

Finance Tracker é uma aplicação fullstack para controle de finanças pessoais. O usuário pode registrar receitas e despesas por categoria, visualizar o resumo mensal com gráficos e acompanhar o histórico de transações.

O projeto foi desenvolvido como portfólio técnico, com foco em boas práticas de desenvolvimento, testes automatizados e deploy em produção.

---

🖥️ Screenshots

---

🛠️ Stack

Frontend Tecnologia Uso Next.js 16 + TypeScript Framework principal Tailwind CSS v4 + Shadcn/ui Estilização e componentes TanStack Query Cache e sincronização de dados Zustand Gerenciamento de estado global React Hook Form + Zod Formulários e validação Recharts Gráficos interativos Vitest + Testing Library Testes unitários

Backend Tecnologia Uso Java 21 + Spring Boot 3.5 Framework principal Spring Security + JWT Autenticação stateless Spring Data JPA + Hibernate ORM e persistência PostgreSQL Banco em produção H2 Banco em desenvolvimento Swagger / OpenAPI Documentação da API JUnit 5 + Mockito Testes unitários

Infra & DevOps

Serviço	Uso
Vercel	Deploy do frontend
Railway	Deploy do backend + PostgreSQL
GitHub Actions	CI/CD com testes automáticos

---

✨ Funcionalidades

• 🔐 Autenticação — Registro e login com JWT
• 📊 Dashboard — Resumo financeiro mensal com cards e gráfico donut
• 💸 Transações — Criar, visualizar e deletar receitas e despesas
• 🏷️ Categorias — Gerenciar categorias customizadas por tipo
• 📅 Filtro por mês — Navegar entre meses no dashboard e nas transações
• 📱 Responsivo — Layout adaptado para mobile com menu hamburguer
• 🛡️ Rotas protegidas — Middleware de autenticação no frontend

---

🧪 Testes

37 testes cobrindo as principais camadas da aplicação.

Frontend — Vitest + Testing Library

cd frontend
npm run test:run

Arquivo	Testes	Cobertura
auth-store.test.ts	6	Store de autenticação
use-transactions.test.ts	4	Hook de transações
use-summary.test.ts	2	Hook de resumo mensal
use-categories.test.ts	2	Hook de categorias
login.test.tsx	5	Página de login
register.test.tsx	5	Página de registro

Backend — JUnit 5 + Mockito

cd backend
./mvnw test

Arquivo	Testes	Cobertura
AuthServiceTest	3	Serviço de autenticação
TransactionServiceTest	5	Serviço de transações
AuthControllerTest	4	Endpoints de autenticação
ApiApplicationTests	1	Contexto da aplicação

---

🚀 Rodando localmente

Pré-requisitos

• Java 21+
• Node.js 20+
• Maven (ou use o ./mvnw incluído no projeto)

1. Clone o repositório

git clone https://github.com/brunaszarin/finance-tracker.git
cd finance-tracker

2. Backend

cd backend
./mvnw spring-boot:run

O servidor sobe em http://localhost:8080

Recurso	URL
API	http://localhost:8080
Swagger UI	http://localhost:8080/swagger-ui/index.html
H2 Console	http://localhost:8080/h2-console

JDBC URL do H2: jdbc:h2:mem:financedb — usuário: sa — senha: (vazio)

3. Frontend

cd frontend
npm install
npm run dev

A aplicação sobe em http://localhost:3000

Cria o arquivo frontend/.env.local:

NEXT_PUBLIC_API_URL=http://localhost:8080

---

📁 Estrutura do projeto

finance-tracker/
├── .github/
│   └── workflows/
│       ├── ci-backend.yml       # CI do backend
│       └── ci-frontend.yml      # CI do frontend
├── backend/
│   └── src/
│       ├── main/java/com/financetracker/api/
│       │   ├── config/          # SecurityConfig, CorsConfig, SwaggerConfig
│       │   ├── controller/      # AuthController, TransactionController...
│       │   ├── dto/             # Request/Response DTOs
│       │   ├── model/           # Entidades JPA
│       │   ├── repository/      # Spring Data repositories
│       │   ├── security/        # JwtAuthFilter, JwtService
│       │   └── service/         # AuthService, TransactionService
│       └── test/                # Testes unitários e de integração
└── frontend/
    └── src/
        ├── app/                 # Rotas Next.js (login, register, dashboard)
        ├── components/          # Componentes UI (Shadcn/ui)
        ├── hooks/               # React Query hooks customizados
        ├── lib/                 # api.ts — fetch wrapper com JWT
        ├── middleware.ts        # Proteção de rotas
        └── store/               # Zustand auth store

---

📡 Endpoints da API

Método	Endpoint	Descrição	Auth
POST	/api/auth/register	Registrar usuário	❌
POST	/api/auth/login	Autenticar usuário	❌
GET	/api/categories	Listar categorias	✅
POST	/api/categories	Criar categoria	✅
DELETE	/api/categories/{id}	Deletar categoria	✅
GET	/api/transactions	Listar transações	✅
POST	/api/transactions	Criar transação	✅
PUT	/api/transactions/{id}	Atualizar transação	✅
DELETE	/api/transactions/{id}	Deletar transação	✅
GET	/api/summary?month=yyyy-MM	Resumo mensal	✅

Documentação completa disponível no Swagger UI

---

👩‍💻 Autora

Bruna Szarin

Desenvolvedora Fullstack