Arquitetura do Frontend (React)

A aplicação frontend do Coopera-RS é construída utilizando React com TypeScript, seguindo uma arquitetura baseada em componentes para modularidade e reutilização de código. A estrutura do projeto visa separar responsabilidades, facilitando a manutenção e escalabilidade.

Tecnologias Principais

• React (v19): Biblioteca principal para construção da interface de usuário.
• TypeScript: Superset do JavaScript que adiciona tipagem estática, aumentando a robustez do código.
• Vite: Ferramenta de build e servidor de desenvolvimento rápido.
• React Router (v7): Gerenciamento de rotas da aplicação (navegação entre páginas).
• Axios: Cliente HTTP para realizar requisições à API backend.
• Material UI (MUI v6): Biblioteca de componentes UI para agilizar o desenvolvimento da interface.
• Sass: Pré-processador CSS para estilização avançada e organizada.
• Leaflet & React-Leaflet: Bibliotecas para integração e exibição de mapas interativos.
• Context API (React): Utilizada para gerenciamento de estado global, especialmente para autenticação.

Estrutura de Pastas (/src)

A organização do código fonte segue um padrão comum em projetos React:

• /components: Contém componentes React reutilizáveis em várias partes da aplicação (ex: CustomButton, Header, StoreCard, ProductGrid, StoreMap). A ideia é que esses componentes sejam genéricos e focados em UI.
• /pages: Define as páginas principais da aplicação, que geralmente compõem diferentes componentes e lidam com a lógica específica daquela tela (ex: Login, Register, Home, SearchPage, Store, AddProducts).
• /services: Agrupa a lógica de comunicação com a API backend. Inclui a configuração do axios (api.ts, httpService.ts) e funções específicas para cada recurso (ex: authService, FetchStore, LocationService). Também contém as interfaces (/interfaces) que definem os tipos de dados trocados com o backend (ex: Product, Store).
• /contexts: Armazena os contextos da aplicação, como o AuthContext, responsável por gerenciar o estado de autenticação do usuário (token, dados do usuário) e prover funções de login/logout para os componentes.
• /assets: (Não explicitamente listada, mas comum) Para armazenar arquivos estáticos como imagens, fontes, etc.
• /styles ou /scss: (Não explicitamente listada, mas comum ou implícita pelo uso de .scss) Arquivos de estilização global ou variáveis Sass.
• /utils: Funções utilitárias genéricas que podem ser usadas em diferentes partes do código (ex: validadores, formatadores).
• main.tsx: Ponto de entrada da aplicação React.
• App.tsx: Componente raiz que geralmente configura o roteamento principal.

Fluxo de Dados e Estado

• Estado Local: Componentes gerenciam seu próprio estado interno usando useState quando necessário.
• Estado Global: O estado de autenticação (usuário logado, token) é gerenciado globalmente através do AuthContext. Componentes que precisam acessar ou modificar esse estado utilizam o hook useAuth.
• Comunicação com API: As páginas e, em alguns casos, componentes, utilizam as funções definidas nos /services para buscar ou enviar dados para o backend. O httpService encapsula as chamadas axios, adicionando a baseURL (configurada via VITE_API_URL) e o prefixo /api.

Roteamento

O React Router é usado para definir as rotas da aplicação. Existe um componente PrivateRoute que provavelmente protege rotas que só podem ser acessadas por usuários autenticados, verificando o estado no AuthContext.

Estilização

A estilização combina o uso de Sass (arquivos .scss associados aos componentes/páginas) para estilos customizados e a biblioteca Material UI para componentes pré-construídos e um sistema de design consistente.