Arquitetura do Frontend

Descrição

O frontend foi desenvolvido utilizando Next.js com React, buscando uma arquitetura componentizada, que facilite manutenção, testes e escalabilidade.
A aplicação segue um padrão de rotas baseado em pastas, aproveitando a estrutura do Next para criação automática de rotas a partir do diretório app/.

Tecnologias

• Next.js → Framework React para rotas e renderização.
• React → Biblioteca de UI, base do frontend.
• Axios → Consumo de APIs.
• Tailwind CSS → Estilização utilitária com paleta customizada.
• ESLint → Padronização de código.
• Docker → Conteinerização do ambiente.
• GitLab → Versionamento, Wiki e CI/CD.

Estrutura de Arquivos do Frontend

Explicativo dos Diretórios

• app/ → raiz da aplicação, organiza as rotas e páginas.
• page.tsx → ponto de entrada de cada rota.
• loading.tsx → tela/estado de carregamento da rota.
• error.tsx → fallback para tratamento de erros da rota.
• components/ → componentes exclusivos da tela, cada um em sua pasta com index, skeleton e error.
• components (nível raiz) → componentes compartilhados entre várias telas.
• lib/ → utilitários gerais (funções auxiliares, hooks globais etc.).

Justificativa da Arquitetura

A arquitetura foi escolhida para:

• Facilitar debug e manutenção, isolando erros e loaders por tela e por componente.
• Seguir o padrão de componentização do React, reaproveitando blocos de UI.
• Permitir futura expansão para testes unitários e testes de integração mais claros, já que erros e estados de loading estão isolados.
• Melhorar a organização visual do projeto, facilitando a navegação pelo código.