03 · Serviços financeiros · Arquitetura frontend
Evoluir uma plataforma financeira sem quebrar a confiança
Migração de funcionalidades React para microfrontends com single-spa, com fronteiras claras entre componentes, design system compartilhado e testes que protegem o comportamento existente.
- Empresa
- Unicred
- Cargo
- Desenvolvedor Full Stack Sênior
- Período
- 2022 — 2024
- Stack
- React
- single-spa
- Next.js
- NestJS
- Jest
- Testing Library
01 · O problema
As aplicações digitais de uma cooperativa financeira precisavam evoluir sem mudar aquilo de que as pessoas dependiam. Mudanças de arquitetura, componentes compartilhados e proteção contra regressões eram partes do mesmo problema — em um projeto cujo CI bloqueava merges abaixo de 95% de cobertura de linhas no escopo testado.
02 · O que eu fiz
- Migrei páginas e componentes React para microfrontends com single-spa, configurando rotas e carregamento das aplicações sem alterar o comportamento existente.
- Levei estado, integrações, carregamento e tratamento de erros para componentes container, deixando os componentes de apresentação renderizarem a partir de props — mais fáceis de testar e de entender pelo time.
- Participei do desenvolvimento do design system interno com Material UI e Tailwind CSS.
- Escrevi testes com Jest e React Testing Library para estados de carregamento, erro e interação, aplicando TDD quando fazia sentido.
- Conduzi treinamentos internos sobre Figma para código, BFFs em NestJS e o padrão container/apresentação, e apoiei cerca de seis a oito desenvolvedores com orientação e revisões de pull requests.
03 · A decisão principal
Tornar as responsabilidades visíveis.
Quando a lógica de integração sai da camada de apresentação, existe um lugar óbvio para mudar o comportamento e um lugar óbvio para testá-lo. A cobertura era o requisito; testar o que o usuário realmente faz era o objetivo.
04 · Diagrama interativo
Ilustração original da ideia de engenharia — não é uma captura do produto.
Fronteiras que tornam a mudança mais segura
root do single-spa
Microfrontend 01
Container
- · Estado
- · Integrações
- · Carregamento e erros
Apresentação
- · Renderiza a partir de props
- · Partes do design system
- · Fácil de testar
Microfrontend 02
Container
- · Estado
- · Integrações
- · Carregamento e erros
Apresentação
- · Renderiza a partir de props
- · Partes do design system
- · Fácil de testar
Microfrontend 03
Container
- · Estado
- · Integrações
- · Carregamento e erros
Apresentação
- · Renderiza a partir de props
- · Partes do design system
- · Fácil de testar
Gate do CI · ≥ 95% de cobertura de linhas no escopo testado
Cada microfrontend mantém o comportamento nos containers e a renderização nos componentes de apresentação — assim toda mudança tem um lugar óbvio e um teste óbvio.
05 · O que mudou
As funcionalidades migradas ficaram mais fáceis de entender, testar e manter. O time passou a aplicar os padrões com menos orientação individual, e os pull requests ficaram mais consistentes. Foi um trabalho colaborativo em uma plataforma compartilhada, não uma reformulação solo.
06 · Escopo, com transparência
Os 95% são um requisito do CI para o escopo testado, não uma métrica pessoal. As melhorias são qualitativas; não há números de desempenho ou taxa de defeitos atribuídos.