|
|
|
# Frontend – WimBelemDon+
|
|
|
|
|
|
|
|
O **frontend do WimBelemDon+** é uma aplicação **Progressive Web App (PWA)** desenvolvida em **React + TypeScript**, com o objetivo de oferecer uma interface rápida, responsiva e simples de manter para os colaboradores da plataforma.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Visão Geral
|
|
|
|
|
|
|
|
- **O que é**: uma aplicação web que pode ser usada diretamente no navegador ou instalada como app (PWA).
|
|
|
|
- **Objetivo**: melhorar a experiência de usuários que interagem com a plataforma WimBelemDon.
|
|
|
|
- **Deploy**: disponível publicamente em [GitHub Pages](https://ages-wimbelemdon.github.io/frontend/).
|
|
|
|
- **Integração**: conecta-se a serviços internos e usa **Firebase** para autenticação de usuários.
|
|
|
|
|
|
|
|
Para detalhes técnicos de instalação, desenvolvimento e deploy, consulte o [repositório do frontend](https://github.com/AGES-WimBelemDon/frontend).
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Arquitetura em Alto Nível
|
|
|
|
|
|
|
|
A aplicação é organizada em **camadas** para separar responsabilidades:
|
|
|
|
|
|
|
|
1. **Interface (UI)**
|
|
|
|
- Construída com **React** e componentes do **Material UI (MUI)**.
|
|
|
|
- Páginas e componentes são organizados em `pages/` e `components/`.
|
|
|
|
|
|
|
|
2. **Navegação**
|
|
|
|
- Controlada com **React Router**.
|
|
|
|
- Cada rota corresponde a uma página principal da aplicação.
|
|
|
|
|
|
|
|
3. **Gestão de Estado e Dados**
|
|
|
|
- Uso de **React Query** para buscar e armazenar dados em cache.
|
|
|
|
- Comunicação com APIs feita via **Axios**.
|
|
|
|
- **Firebase** provê autenticação e gerenciamento de sessão.
|
|
|
|
|
|
|
|
4. **Serviços e Lógica de Negócio**
|
|
|
|
- Encapsulados na pasta `services/`.
|
|
|
|
- Hooks customizados (`hooks/`) facilitam o reuso de lógica.
|
|
|
|
|
|
|
|
5. **Configuração e Estilos Globais**
|
|
|
|
- Variáveis e constantes em `constants/`.
|
|
|
|
- Estilos globais em `styles/`.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Fluxo de Desenvolvimento e Publicação
|
|
|
|
|
|
|
|
O ciclo de vida do frontend segue este processo:
|
|
|
|
|
|
|
|
1. **Desenvolvedores** criam branches (`feature/*`, `fix/*`, etc.) a partir da `develop`.
|
|
|
|
2. As branches são revisadas e integradas na `develop`.
|
|
|
|
3. Quando se deseja gerar uma nova versão estável, é aberto um **Pull Request de `develop` para `main`**.
|
|
|
|
4. O merge na `main` dispara uma **GitHub Action**, que:
|
|
|
|
- compila o projeto,
|
|
|
|
- publica automaticamente no **GitHub Pages**.
|
|
|
|
5. Como o frontend é um **PWA**, basta o **usuário recarregar a página** para obter a versão mais recente do aplicativo.
|
|
|
|
|
|
|
|
> 💡 Abaixo está um diagrama visual desse fluxo:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Contribuição
|
|
|
|
|
|
|
|
- O desenvolvimento segue convenções de branches e commits (padrão [Conventional Commits](https://www.conventionalcommits.org/)).
|
|
|
|
- Pull requests são revisados antes de entrar na branch principal de desenvolvimento.
|
|
|
|
- Toda a contribuição deve manter a coerência com os padrões de código e estilo definidos no projeto.
|
|
|
|
|
|
|
|
Para detalhes sobre o fluxo de contribuição, veja o arquivo [CONTRIBUTING.md](https://github.com/AGES-WimBelemDon/frontend/blob/main/CONTRIBUTING.md).
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Tecnologias Principais
|
|
|
|
|
|
|
|
- **React + TypeScript** → base da aplicação.
|
|
|
|
- **React Router** → gerenciamento de rotas.
|
|
|
|
- **React Query + Axios** → consumo de APIs e cache de dados.
|
|
|
|
- **Firebase** → autenticação.
|
|
|
|
- **MUI** → componentes e estilização.
|
|
|
|
- **Vite** → build e ambiente de desenvolvimento.
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
## Para Novos Colaboradores
|
|
|
|
|
|
|
|
Se você deseja contribuir:
|
|
|
|
1. Consulte o [repositório do frontend](https://github.com/AGES-WimBelemDon/frontend) para instruções técnicas.
|
|
|
|
2. Leia o arquivo [CONTRIBUTING.md](https://github.com/AGES-WimBelemDon/frontend/blob/main/CONTRIBUTING.md) para entender convenções de branches, commits e pull requests.
|
|
|
|
3. Peça ajuda ao time se tiver dúvidas sobre o fluxo de trabalho ou sobre a organização do código. |
