📊 Capítulo 20: Projeto Integrador: Portal Financeiro

Especialização em Frontend com Angular

🗺️ A Arquitetura do Portal Corporativo Enterprise em Angular 18+

flowchart TD
    CLIENT["Navegador Web (Desktop & Mobile)"]
    --> SSR["Angular SSR Node.js Server (Non-Destructive Hydration)"]
    --> ROUTER["Functional Router (authGuard, withComponentInputBinding)"]
    --> STORE["NgRx SignalStore (Gerenciamento de Estado Reativo Global)"]
    STORE --> SIGNALS["Signal Inputs / Outputs & @defer Views"]
    STORE --> HTTP["HttpClient com Functional Interceptors (JWT Bearer Token)"]
    HTTP --> BACKEND["API REST de Alta Vazão"]

    style CLIENT fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style SSR fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style ROUTER fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style STORE fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style SIGNALS fill:#c8e6c9,stroke:#2e7d32,stroke-width:1.5px
    style HTTP fill:#ffebee,stroke:#d32f2f,stroke-width:1.5px
    style BACKEND fill:#b2dfdb,stroke:#00796b,stroke-width:2px

🎯 Slide 1: O Desafio de Engenharia do Projeto Integrador

• Missão: Construir um portal corporativo de gestão financeira completo com dashboard analítico, tabela transacional com ordenação e paginação, formulários reativos com validações estritas, autenticação JWT com renovação automática, SSR com hidratação não-destrutiva e carregamento sob demanda com @defer.

• Pilha Tecnológica: Angular 18+, Standalone Components, Signals, NgRx SignalStore, RxJS, Reactive Forms, Vitest e Tailwind CSS.

🎯 Slide 2: Padrões Arquiteturais Implementados

• 100% Standalone: Zero NgModules em todo o código.

• Reatividade Híbrida: Signals na interface e RxJS no pipeline HTTP/WebSockets.

• Deferrable Views: Gráficos analíticos carregados apenas quando o usuário rolar a página até eles.

🎯 Slide 3: Checklist de Homologação Final

1. Zero Memory Leaks: 100% dos observables cancelados com takeUntilDestroyed().
2. Type Safety: Typed Forms sem campos any.
3. Core Web Vitals: Nota 95+ no Google Lighthouse com SSR e @defer.
4. Qualidade: Suíte de testes unitários com TestBed e Vitest 100% aprovada.