Frontend.md

+# 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.
\ No newline at end of file