Diagrama da arquitetura de front-end do Novi

Este diagrama de arquitetura ilustra a cadeia técnica completa do frontend do Novi, desde as requisições do usuário até a renderização da página. Ele utiliza o framework de renderização do lado do servidor Next.js, gerenciando as requisições por meio de roteamento multinível (roteamento de página e roteamento de API). O gerenciamento de estado do frontend utiliza o Redux Toolkit em conjunto com o React Context para gerenciamento em camadas. A biblioteca de componentes da interface do usuário foi desenvolvida sob medida com base no Ant Design e encapsula componentes de negócios comuns. A arquitetura inclui uma camada de interceptação de requisições (encapsulamento Axios, tratamento de erros unificado), uma camada de cache de dados (React Query combinado com localStorage), aceleração de CDN para recursos estáticos e estratégias de otimização de build (divisão de código, carregamento lento de imagens e importação sob demanda). Também integra um sistema de monitoramento de frontend (Sentry) e rastreamento de eventos, suportando um sistema completo de engenharia de frontend, desde o desenvolvimento e depuração até as operações online.