arquitetura.md

-<table>
-<tr>
+| [**Home**](home) | [Escopo e Cronograma](escopo) | [Processo](processo) | [Design/Mockups](design_mockups) | [Configuração](configuracao) | [Arquitetura](arquitetura) | [Código](codigo) | [BD](banco_dados) | [Qualidade](qualidade) | [Utilização](utilizacao) |
+| :--------------: | :---------------------------: | :------------------: | :--------------: | :--------------------------: | :------------------------: | :--------------: | :---------------: | :--------------------: | :----------------------: |
+
+# 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.  
 
-<th>
-
-[Home](home)
-
-</th>
-
-<th>
-
-[Escopo](escopo)
-
-</th>
-
-<th>
-
-[Arquitetura](arquitetura)
-
-</th>
-
-<th>
-
-[Configuração](configuracao)
-
-</th>
-
-<th>
-
-[Mockups](mockups)
-
-</th>
-
-<th>
-
-[BD](banco_dados)
-
-</th>
-
-<th>
-
-[Instalação](instalação)
-
-</th>
-
-<th>
-
-[Gerência](gerencia)
-
-</th>
-
-<th>
-
-[Qualidade](qualidade)
-
-</th>
-
-<th>
-
-[Processo](processo)
-	
-</th>
-
-</tr>
-</table>
\ No newline at end of file