Quatro empresas, um só produto.

Em uma imagem

A plataforma inteira, para entender olhando

Siga os números de 1 a 8. O resto deste guia detalha cada parte.

1 · O mapa

O caminho de um projeto, do edital à prestação de contas

Cada etapa é um módulo com dono. O proponente não sabe, nem precisa saber, que quatro empresas trabalham por trás: para ele, é um sistema só.

2 · A montagem

Um domínio, um app por módulo, cada um no seu framework

Cada empresa publica o app do seu módulo como imagem de contêiner. Um gateway Nginx recebe todo o tráfego do domínio e encaminha cada prefixo de URL para o app certo. O Anexo 3 já prevê o "Nginx (como servidor de aplicação e proxy reverso)" R1 p.57 · Anexo 3 §2.2. Nenhum framework manda nos outros.

Por que um app por módulo, e não um app único com os módulos dentro

Montar tudo num app só, com cada módulo instalado como pacote (por exemplo, Nuxt Layers), tem dois problemas. Obriga todas as empresas a usar o mesmo framework. E cada mudança de qualquer módulo exige gerar e publicar o app inteiro de novo. O artigo de referência sobre micro-frontends, de Cam Jackson no site de Martin Fowler, chama isso de integração em tempo de build e é direto: "we would recommend strongly against this kind of approach". O mesmo artigo recomenda dividir o produto por página, cada uma "owned end-to-end by a single team".

Como cada framework roda debaixo do seu prefixo

Os três wrappers do DSGov estão na versão 2.6.0. Angular precisa de justificativa no ADR, porque o Anexo 3 da FAPESB cita só "Vue.js/React.js" R1 p.57. O próprio R2 lista Angular para outra entidade R2 p.73 · Anexo 3 §2.3.

# gateway da plataforma: um domínio, um app por módulo
location /submissao/        { proxy_pass http://submissao-web:3000; }   # Nuxt · Z Future
location /contratacao/      { proxy_pass http://contratacao-web:3000; } # framework da Myappnow
location /prestacao/        { proxy_pass http://prestacao-web:3000; }   # framework da MTM
location /bolsas/           { proxy_pass http://bolsas-web:3000; }      # Empresa D
location /api/submissao/    { proxy_pass http://submissao-api:8080/; }  # uma regra por API
location /_plataforma/shell/ { root /srv/plataforma; }                  # @fapesb/shell compilado
location /                   { root /srv/plataforma/portal; }           # página inicial comum

Passo a passo: colocar o seu módulo no ar

1. Crie o app a partir do modelo do seu framework. Há um repositório-modelo para Nuxt, Next e Angular, com prefixo, shell, estilo, login e CI já configurados. Você cria o seu projeto no seu próprio GitHub ou GitLab.
2. Configure o prefixo do módulo. Exemplo no Next:

   // next.config.ts
   export default { basePath: '/contratacao' }

3. Aponte o escopo @fapesb para o Verdaccio. O token fica no cofre do CI, nunca no Git.

   # bunfig.toml
   [install.scopes]
   "@fapesb" = { token = "$FAPESB_NPM_TOKEN", url = "https://pacotes.<domínio-da-plataforma>/" }

4. Coloque o shell e o estilo. O mesmo HTML vale em qualquer framework (seção 3).
5. Garanta a qualidade. bun check, a checagem de tipos do framework, os testes e a acessibilidade passam no CI.
6. Publique a imagem e peça a rota. A imagem vai para a homologação integrada. A rota no gateway só é criada uma vez; depois, cada empresa publica no seu ritmo.

3 · O que é comum

Tudo o que se repete vai em pacote no Verdaccio

Os apps são independentes, mas não começam do zero. O que precisa ser igual em todos fica em pacotes @fapesb/*, publicados num registry privado e neutro, o Verdaccio. Os pacotes são escritos para funcionar em qualquer framework. Para código comum entre zonas em repositórios separados, o Next indica justamente "public or private NPM packages".

O cabeçalho comum: Web Components, para servir a todos

O @fapesb/shell traz o cabeçalho, o menu, o rodapé, o botão de login e o aviso de cookies como Web Components, escritos em Lit (TypeScript). É um padrão do navegador: funciona igual em Vue, React e Angular. O React 19 "adds full support for custom elements" (React). O Angular e o Vue também consomem e produzem custom elements (Angular Elements, Vue e Web Components). Escolhemos Lit, e não Vue, para o shell: assim nenhum framework fica no centro, e o Vue cobraria "~16kb" de runtime em cada app que não usa Vue.

<!-- igual em Nuxt, Next e Angular -->
<script type="module" src="/_plataforma/shell/v1/fapesb-shell.js"></script>

<fapesb-cabecalho modulo="contratacao"></fapesb-cabecalho>
<main> … telas do seu módulo … </main>
<fapesb-rodape></fapesb-rodape>

O Verdaccio: cada um no seu Git, pacotes num lugar só

Cada empresa trabalha no seu GitHub ou GitLab. Os pacotes vão para o Verdaccio, que é neutro, gratuito (MIT) e roda em Node 24. O GitHub Packages e o registry do GitLab exigiriam conta de todos na mesma plataforma. A escolha atende ao pedido de "soluções não proprietárias, que não necessitem de aquisições" R1 p.53 · Anexo 3 §1.1(ii).

# config.yaml do Verdaccio — quem lê e quem publica
packages:
  '@fapesb/shell':      { access: $authenticated, publish: zfuture }
  '@fapesb/estilo':     { access: $authenticated, publish: zfuture }
  '@fapesb/contratos':  { access: $authenticated, publish: ci-contratos }
  '@fapesb/base':       { access: $authenticated, publish: [dono-base] }
  '@fapesb/widgets-*':  { access: $authenticated, publish: [zfuture, myappnow, mtm] }
  '**':                 { access: $all, proxy: npmjs }   # o resto vem do npm público, com cache
uplinks:
  npmjs: { url: https://registry.npmjs.org/ }

Widgets entre módulos (ex.: o status do instrumento dentro da tela de submissão) também podem virar Web Components em pacote. Mas a regra é usar pouco. Fowler recomenda que os módulos se comuniquem "as little as possible"; na maioria das vezes, um link para o outro módulo resolve.

4 · Governança

Autonomia dentro do módulo, acordo nas fronteiras

O que só afeta o seu módulo, a sua empresa decide, inclusive o framework, dentro da lista comum. O que afeta outra empresa passa pelo Comitê de Arquitetura, com uma pessoa de cada empresa.

Quando a mudança vai ao comitê? Basta um critério

O caminho de uma mudança

5 · Identidade

Um login para tudo, em qualquer framework

A MTM configura o Keycloak da FAPESB (Realm FAPESB). Cada app de módulo é um client dele. Quem já entrou num módulo passa direto pelo Keycloak ao abrir outro: o login é um só, mesmo com frameworks diferentes.

Fundamento: as soluções devem "observar os requisitos de segurança, proteção de dados e conformidade tecnológica" R2 p.5-6 · §4.4.

6 · Integração

Contrato antes de código

Módulos de empresas diferentes conversam só por API, com JSON. O contrato é aprovado antes da implementação, e nenhum módulo acessa o banco de outro. O edital pede "Arquitetura baseada em microsserviços e integração via API RESTful" R1 p.57 · Anexo 3 §2.2.

// Recusa com descrição: o sistema de origem corrige e reenvia
{
  "type": "https://plataforma.fapesb.ba.gov.br/erros/prestacao/campo-fora-do-catalogo",
  "title": "Campo não previsto no catálogo",
  "status": 422,
  "detail": "O bloco 3 não aceita o campo 'patente_depositada'. Atualize o catálogo por RFC (A3).",
  "codigo": "PRESTACAO_BLOCO_CAMPO_FORA_DO_CATALOGO",
  "correlation_id": "01JC..."
}

7 · Identidade visual

A cara do governo, em Sass, nos três frameworks

Usamos o Padrão Digital de Governo (DSGov). Ele é escrito em Sass (SCSS), sem Bootstrap nem Tailwind, e Nuxt, Next e Angular compilam Sass nativamente. Por isso todo estilo da plataforma é Sass. A acessibilidade é exigência do edital: "Compatibilidade com padrões de acessibilidade e usabilidade institucional (ex: e-MAG)" R1 p.58 · Anexo 3 §2.2.

Como se escreve um componente (vale para os três frameworks)

@use "@fapesb/estilo" as govbr;           // ponte para os mixins e funções do DSGov

.contratacao-cartao {
  padding: var(--spacing-scale-2x);          // sempre token, nunca valor solto
  font-size: var(--font-size-scale-up-01);
  border: var(--surface-width-sm) solid var(--border-color);

  &__titulo { font-weight: var(--font-weight-semi-bold); }
  &:focus-visible { @include govbr.focus; }     // foco acessível do próprio DSGov
}

Esse SCSS entra num <style lang="scss" scoped> no Vue, num .module.scss no Next e no styleUrl de um componente Angular. Foi testado com o DSGov 3.7.0 e o Sass 1.108.1. O Stylelint 17 com stylelint-config-standard-scss barra cor hexadecimal solta.

8 · Stack e banco

TypeScript em primeiro lugar, framework de front à escolha

O edital diz que Python é a "principal linguagem para IA e NLP" e pede "Node.js e Vue.js/React.js para frontend" R1 p.57 · Anexo 3 §2.2. O resto é TypeScript, de ponta a ponta.

Um banco por módulo, leitura e escrita no mesmo lugar

Por que tem de ser o PostgreSQL 18

// tsconfig.json base — testado com bun check e Node 24
{ "compilerOptions": {
    "target": "ES2024", "module": "NodeNext", "moduleResolution": "NodeNext",
    "strict": true, "noUncheckedIndexedAccess": true, "exactOptionalPropertyTypes": true,
    "verbatimModuleSyntax": true, "erasableSyntaxOnly": true,   // sem enum: o Node 24 executa o .ts direto
    "allowImportingTsExtensions": true, "noEmit": true } }
// vale para APIs e pacotes; cada framework de front estende o tsconfig dele

9 · Nomes, URLs e slugs

A mesma coisa tem o mesmo nome em todo lugar

Com quatro frameworks, nomes iguais são o que deixa o código legível para quem chegar depois. E quem chega depois é a FAPESB, que recebe o código R1 p.58 · Anexo 3 §2.3.2.

10 · Metodologia

O mesmo ritmo nas quatro empresas

O edital pede "Princípios da metodologia ágil (Scrum)" e "DevOps e CI/CD com versionamento Git" R1 p.57 · Anexo 3 §2.2. Com quatro empresas e frameworks diferentes, o que evita surpresa é a sprint nas mesmas datas e uma demonstração conjunta a cada duas semanas.

Princípios de código: o básico bem feito

11 · Para decidir

Decisões e pendências

Propostas para o comitê. Cada uma vira um ADR depois de aprovada.

Pendências que precisam de dono

Fontes

• Edital FAPESB nº 027/2025, Rodada 1: PDF oficial (78 p.) · página do edital. As citações "R1 p.N" abrem o PDF na página N.
• Edital FAPESB nº 017/2026, Rodada 2: PDF oficial (100 p.).
• Micro-frontends: Cam Jackson, martinfowler.com · Next Multi-Zones · React 19 · Angular Elements · Vue e Web Components.
• Documentos da MTM Tecnologia, versão 4 (05/11/2026): cadastro e autenticação; dados da prestação de contas; formulários dos editais.
• Diagramas feitos com Apache ECharts 6.1 (licença Apache 2.0), hospedado junto com o site.

12 · Glossário

Os termos deste guia, num lugar só

Uma explicação curta de cada termo técnico usado aqui, com um link para a referência oficial.

12-Factor

Doze regras para apps que rodam bem em contêiner: configuração por variável de ambiente, logs na saída padrão, o mesmo artefato em todo ambiente. 12factor.net (PT)

ADR

Registro de decisão de arquitetura: uma página com o contexto, a decisão e as consequências. Toda decisão que cruza módulos vira um ADR. MADR

Angular

Framework de front do Google. Uma das três opções para o app de um módulo. angular.dev

API REST

Forma de um sistema oferecer dados a outro por HTTP, com URLs para cada recurso e respostas em JSON. RFC 9457 (erros)

axe

Ferramenta que verifica acessibilidade automaticamente. Roda junto com o Playwright no CI. Playwright + axe

BEM

Convenção de nomes de classe CSS: bloco__elemento--modificador. Evita que o estilo de um módulo afete outro. getbem.com

Bun

Ferramenta JavaScript/TypeScript que instala pacotes, roda testes, confere tipos (bun check) e publica pacotes. Em produção, quem roda é o Node 24. bun.sh/docs

C4

Modelo de diagramas em níveis: C1 (sistemas), C2 (contêineres), C3 (componentes). As RFCs usam C2 e C3. c4model.com

CI / CD

Integração e entrega contínuas: a cada mudança, o servidor de build roda testes e checagens e, se tudo passar, publica.

CloudEvents

Formato padrão para descrever um evento (o que aconteceu, quando, onde) entre sistemas. cloudevents.io

Contêiner (Docker)

Pacote executável de um programa com tudo de que ele precisa para rodar. Cada app, API e banco de módulo roda num contêiner nos servidores. docs.docker.com

Conventional Commits

Padrão de mensagem de commit (feat:, fix:, chore:) que permite gerar o histórico de mudanças automaticamente. conventionalcommits.org (PT)

Custom element / Web Component

Componente HTML criado com padrões do próprio navegador. Funciona igual em Vue, React e Angular; por isso o cabeçalho comum é feito assim. MDN (PT)

Drizzle

Biblioteca TypeScript para acessar o PostgreSQL com tipos e gerar migrações em SQL. orm.drizzle.team

DSGov

Padrão Digital de Governo: o design system do governo federal (cores, fontes, componentes acessíveis), escrito em Sass. gov.br/ds · Web Components do DSGov

e-MAG / WCAG

Modelos de acessibilidade: o e-MAG é o brasileiro, a WCAG é a referência internacional. O nível AA é critério de aceite. e-MAG · WCAG 2.2

FastAPI

Framework Python para APIs. Usado só no serviço de IA. tutorial (PT)

Fastify

Framework Node para APIs, rápido e com validação por schema. Padrão das APIs TypeScript. fastify.dev

Gateway

O servidor (Nginx) que recebe todo o tráfego do domínio e encaminha cada prefixo de URL para o app do módulo certo. Next Multi-Zones

JWKS / token

O token é o comprovante de login que o Keycloak entrega. O JWKS é o conjunto de chaves públicas que as APIs usam para conferir se o token é verdadeiro.

Keycloak

Servidor de login da FAPESB. Guarda as contas e os perfis; cada módulo é um client dele. proteger apps com OIDC

LGPD

Lei Geral de Proteção de Dados (Lei 13.709). Por ela, CPF e outros dados pessoais não vão para logs e só trafegam quando necessário. planalto.gov.br

Lit

Biblioteca pequena para criar Web Components em TypeScript. Usada no @fapesb/shell para não depender de nenhum framework. lit.dev

Locust

Ferramenta em Python para teste de carga. Gera o relatório de carga exigido pelo edital. docs.locust.io

Micro-frontend

Dividir o front de um produto grande em partes de times diferentes. Aqui, cada módulo é um app próprio atrás do gateway. Cam Jackson, martinfowler.com · micro-frontends.org

MLflow

Ferramenta para registrar versões de modelos de IA, métricas e artefatos. mlflow.org

Monorepo

Um repositório com o código de vários projetos. Não usamos: cada empresa tem os próprios repositórios.

Next

Framework de front sobre React. Uma das três opções para o app de um módulo. nextjs.org · React (PT)

Node 24 LTS

O motor que roda JavaScript e TypeScript no servidor, em produção. LTS significa versão com suporte longo. rodar TypeScript direto

Nuxt

Framework de front sobre Vue. É o que a Z Future usa. nuxt.com · Vue (PT)

OIDC

OpenID Connect: o protocolo de login que o Keycloak fala com os módulos.

OpenAPI

Formato para descrever uma API (rotas, campos, erros) antes de escrever o código. É o contrato entre as empresas. learn.openapis.org

Outbox

Padrão para não perder evento: o evento é gravado na mesma transação do dado e enviado depois por um processo separado. microservices.io

OWASP Top 10 / ASVS

Listas de referência de segurança de aplicações web. Base do relatório de vulnerabilidades. Top 10 · ASVS

Pacote npm / escopo

Código empacotado e versionado que outros projetos instalam. O escopo @fapesb agrupa os nossos pacotes. pacotes · escopos

Pact

Teste de contrato: o consumidor descreve o que espera da API, e o provedor prova que entrega. docs.pact.io

pgBackRest

Ferramenta de backup do PostgreSQL, com restauração para qualquer momento (PITR). guia

PostgreSQL 18

O banco de dados da plataforma. Cada módulo tem o seu. tutorial · novidades do 18

RFC (proposta de mudança)

Documento curto que propõe uma mudança que afeta outras empresas, com impacto e diagramas. Vai ao comitê; aprovada, vira ADR.

Sass / SCSS

Linguagem que estende o CSS com variáveis, funções e mixins. O DSGov é escrito nela, e todo o estilo da plataforma também. sass-lang.com

Scrum

Forma de trabalho em ciclos curtos (sprints), com planejamento, reunião diária, demonstração e retrospectiva. Guia do Scrum (PT)

SemVer

Versionamento semântico: MAJOR.MINOR.PATCH. Mudar o primeiro número significa que algo deixou de ser compatível. semver.org (PT)

Shell

O cabeçalho, o menu, o rodapé e o botão de login comuns a todos os módulos (@fapesb/shell).

Slug

O trecho legível de uma URL gerado do título, como chamada-universal-2026.

SSR

Renderização no servidor: a página já chega pronta do servidor, o que ajuda velocidade e buscadores.

Trunk-based development

Forma de trabalhar com branches curtas que voltam rápido para a main, que fica sempre pronta para publicar. trunkbaseddevelopment.com

TypeScript

JavaScript com tipos. É a linguagem principal da plataforma. Handbook

Verdaccio

Registry npm privado onde ficam os pacotes @fapesb. Neutro: funciona com quem usa GitHub ou GitLab. verdaccio.org

Zod

Biblioteca TypeScript que valida dados e gera o tipo a partir da mesma definição. zod.dev

Nenhum termo encontrado.