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.
• 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.

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).
• 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.

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 para instruções técnicas.
2. Leia o arquivo 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.