Simulador bancário desenvolvido com Next.js, TypeScript e Tailwind CSS, permitindo depósitos, saques, simulação/contratação de empréstimos e acompanhamento de histórico financeiro — tudo em uma interface moderna com tema escuro.
- Dashboard — Visão geral do saldo, estatísticas e acesso rápido às demais telas
- Depósito / Saque — Movimentação de conta com validação de formulário
- Empréstimo — Simulação com valor, parcelas e taxa de juros, com opção de contratação
- Histórico — Listagem de todas as transações e empréstimos, com filtros por categoria
- NavBar persistente — Presente em todas as rotas via
layout.tsx, exibindo o saldo em tempo real
| Categoria | Stack |
|---|---|
| Framework | Next.js (App Router) |
| Linguagem | TypeScript |
| Estilização | Tailwind CSS |
| Componentes UI | shadcn/ui |
| Gerenciamento de estado | Zustand |
| Formulários | React Hook Form + Zod |
| Ícones | Lucide React |
| Datas | date-fns (locale pt-BR) |
app/
├── layout.tsx # Layout raiz com NavBar global
├── page.tsx # Dashboard (Home)
├── transacao/
│ └── page.tsx # Depósito e saque
├── emprestimo/
│ └── page.tsx # Simulação e contratação de empréstimo
└── historico/
└── page.tsx # Histórico de transações
components/
└── NavBar.tsx # Barra de navegação fixa
store/
└── bancoStore.ts # Estado global (Zustand): saldo, transações, empréstimos
# Clonar o repositório
git clone https://github.com/seu-usuario/bancosim.git
cd bancosim
# Instalar dependências
npm install
# Rodar em modo desenvolvimento
npm run devAcesse http://localhost:3000 no navegador.
O cálculo da parcela utiliza o sistema de amortização Price, com a fórmula:
PMT = (VP × i × (1 + i)^n) / ((1 + i)^n - 1)
Onde:
VP= valor solicitadoi= taxa de juros mensal (decimal)n= número de parcelas
- Autenticação de usuário
- Persistência dos dados (atualmente em memória via Zustand)
- Exportação do histórico em PDF/CSV
- Gráficos de evolução do saldo
- Modo responsivo completo (menu mobile)
Este projeto é livre para fins de estudo e portfólio.
Desenvolvido por Caio 🚀