Pular para o conteúdo principal

CPE Inscrição

Repositório: cpe-inscricao

Portal público (SPA em React) onde a população faz a inscrição da Chamada Escolar. É a "ponta" que as famílias acessam; toda a regra de negócio fica no console, cuja API este app consome.

Manual de uso: Chamada Escolar.

Acesso, contexto e permissões​

Por ser um portal público, não há cadastro de usuários, login, perfis nem menus por permissão — qualquer cidadão acessa.

  • Identificação por documento. O responsável se identifica pelo CPF; a partir daí o portal monta e consulta as inscrições daquela pessoa.
  • O que aparece é controlado pela chamada. As rotas são renderizadas conforme a configuração da chamada vinda da API (appService.getLocalPublicCall()): se um recurso está desligado para aquele cliente/edição, a tela nem é montada.
  • Antifraude. O reCAPTCHA protege o envio de inscrições (validado contra o console em /public_call/validate_recaptcha).
  • Contexto. Quem define cliente, regras e identidade visual é o console; o portal apenas reflete o que a API entrega.

Stack​

  • Base: React (Create React App / react-scripts), Node 18.17.1
  • UI: Material UI (v4)
  • Rotas: React Router 5
  • Monitoramento: Sentry

Bibliotecas de apoio: react-google-recaptcha (o bloqueador de robôs descrito no manual), cpf-cnpj-validator e react-text-mask (validação e máscara de documentos), moment e react-helmet.

Como rodar localmente​

  1. Use o Node do .tool-versions (18.17.1).
  2. Ajuste a configuração em src/utils/constants.js (veja a seção seguinte).
  3. Rode em desenvolvimento com npm start (react-scripts start) ou docker-compose up — a porta padrão é a 3002.
  4. Para produção, gere o build estático com npm run build.

Configuração (no lugar do ENV)​

Este app não usa arquivo .env: a configuração fica em src/utils/constants.js. O que mora ali:

  • app.name — nome exibido no portal.
  • api.currentVersion e os caminhos da API (public_call, offers, addresses, customer...) — endpoints relativos consumidos do console.
  • params.recaptcha — site key do reCAPTCHA.
  • params.sentry.dsn — DSN do Sentry para monitoramento de erros.
  • routes — definição das rotas do portal.

Padrões do projeto​

Organização em src/:

  • screens/ — telas do fluxo: Home, Instructions, PreEnrollmentCheck, Subscriptions (Create, Search), RenewEnrollments (ForgotPassword, Request), RequestInclusion, WaitingList, NotFound.
  • api/ e services/ — comunicação com a API do console.
  • components/, hooks/, routes.js.
  • utils/constants.js — configuração central.

Padronização de código com Prettier.

BigPicture​

Fluxo do portal de inscrição

Deploy​

Build estático publicado na Cloudflare. A imagem Docker de produção também é publicada no Amazon ECR (chamada-publica).