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

src/ └── app/ # Diretório principal da aplicação (Next.js) ├── page.tsx # Página inicial (landing page) ├── globals.css # Estilos globais ├── layout.tsx # Layout base da aplicação │ ├── screen1/ # Tela específica 1 │ ├── page.tsx # Landing page da tela │ ├── loading.tsx # Componente de loading da tela │ ├── error.tsx # Tratamento de erros da tela │ └── components/ # Componentes exclusivos dessa tela │ ├── component1/ │ │ ├── index.tsx # Componente principal │ │ ├── skeleton.tsx # Skeleton loader do componente │ │ └── error.tsx # Tratamento de erro do componente │ └── component2/ │ ├── index.tsx │ ├── skeleton.tsx │ └── error.tsx │ ├── screen2/ # Tela específica 2 │ ├── page.tsx │ ├── loading.tsx │ └── error.tsx │ ├── components/ # Componentes compartilhados entre telas └── lib/ # Funções utilitárias e libs customizadas

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.