Dashboard Bancario II (Angular 19 SPA)

Projeto desenvolvido para a ADA no curso de Frontend Angular, feito em Angular 19.

Este projeto e uma evolucao direta do primeiro projeto publicado em:

https://github.com/thiagocredico/ada-dashboard-bancario

No projeto atual, a base inicial foi refatorada e otimizada para uma arquitetura moderna com Angular 19, incluindo SPA com roteamento, autenticacao, internacionalizacao, integracao REST, reatividade com Signals e foco em performance.

Documentacao do Projeto Final: Refatoracao e Otimizacao do Sistema Bancario

1. Visao Geral

O objetivo deste projeto final foi transformar a versao inicial do sistema bancario em uma aplicacao de nivel empresarial:

• Single Page Application (SPA) com roteamento completo
• Integracao real com API (json-server)
• Fluxo de autenticacao e protecao de rotas
• Interface reativa com Signals e Control Flow
• Estrategias de performance como Lazy Loading, SSR e Hydration

2. Objetivos de Aprendizagem Atendidos

• Arquitetura com rotas avancadas, injeção de dependencias, guard e interceptor
• Reatividade moderna com signal(), computed() e toSignal()
• Integracao REST com CRUD e tratamento de erros
• Seguranca com fluxo de token e rotas protegidas
• Performance com SSR, loadComponent, @defer, OnPush e preloading

3. Requisitos Funcionais Atendidos

• Login: autenticacao de usuario com sessao baseada em token
• Dashboard: saldo com ocultar/mostrar e fatura carregada sob demanda
• Transferencia: criacao de transacao e atualizacao de saldo
• Extrato (Transacoes): listagem, filtro, comprovante e exclusao
• Emprestimo: simulador com carregamento sob interacao
• Perfil: rotas aninhadas para Dados e Seguranca
• Internacionalizacao: seletor global com PT-BR e PT-PT

4. Criterios Tecnicos e Arquiteturais (Checklist)

4.1 Roteamento e SPA

• router-outlet aplicado como base da navegacao
• Rotas parametrizadas implementadas (/transacoes/:id)
• Rotas aninhadas implementadas em Perfil (/perfil/dados, /perfil/seguranca)
• Rotas coringa (**) para 404 interno e externo

4.2 Reatividade e Views

• Uso de Signals e computed para estado e derivacoes
• Uso de novo Control Flow (@if, @for)
• @defer aplicado em:
  • Simulador de emprestimo (on interaction)
  • Fatura do cartao no dashboard (on viewport)

4.3 Integracao de API e RxJS

• HttpClient conectado ao json-server
• Leitura com toSignal em pontos de interface
• catchError aplicado no fluxo de requisicoes
• Indicadores de loading e feedback de erro/sucesso para usuario

4.4 Seguranca, Guard e Interceptor

• Functional Guard (CanActivate) protegendo rotas privadas
• Functional Interceptor anexando Authorization: Bearer <token>

4.5 Internacionalizacao (i18n)

• ngx-translate configurado
• Arquivos de traducao em frontend/public/i18n
• Sidebar e Header com chaves de traducao e pipe | translate

4.6 Performance

• Lazy Loading com componentes standalone via loadComponent
• Preloading com withPreloading(PreloadAllModules)
• Componentes com ChangeDetectionStrategy.OnPush
• SSR e Hydration ativos com provideClientHydration()

Conclusao

Este projeto atende aos requisitos solicitados para o projeto final, consolidando a evolucao da primeira versao em uma aplicacao Angular mais robusta, reativa, segura e preparada para escala.

Requisitos para Executar

• Node.js 18+
• npm 9+

Como Executar

1. Instalar dependencias do frontend:

cd frontend
npm install

2. Subir backend (json-server):

cd ../backend
npx json-server --watch db.json --port 3000

3. Em outro terminal, subir frontend:

cd ../frontend
ng serve

4. Acessos:

• Frontend: http://localhost:4200
• API: http://localhost:3000

Estrutura Principal

• frontend/src/app/app.routes.ts: roteamento da SPA
• frontend/src/app/app.config.ts: providers globais (router, interceptor, preloading, hydration)
• frontend/src/app/core/guards/auth.guard.ts: protecao de rotas privadas
• frontend/src/app/core/interceptors/auth.interceptor.ts: token em requests HTTP
• frontend/src/app/core/services/account-state.service.ts: estado global reativo da conta/transacoes
• frontend/public/i18n/*.json: traducoes

Testes

cd frontend
ng test