Voltar aos projetos
ReactTypescriptMicrofrontends

Internet Banking Unicred

Reconstrução completa do frontend de um Internet Banking cooperativo — do legado crítico a uma arquitetura moderna, escalável e mantida por múltiplas squads.

20222+ anosTech Lead Frontend
Capa do projeto Internet Banking Unicred

O contexto

A Unicred é uma cooperativa financeira com presença nacional. O Internet Banking existente era funcional, mas havia chegado num ponto crítico: cada mudança custava caro, cada deploy era arriscado, e a base de código legada tornava a evolução do produto cada vez mais lenta e frágil.

A missão era clara: reconstruir o canal do zero, sem derrubar o que estava em produção e sem comprometer a operação de milhares de cooperados.

O desafio real

O maior risco nesse tipo de projeto não é a reescrita em si — é o "big bang": jogar tudo fora de uma vez e torcer para funcionar. Em um ambiente financeiro regulado, isso não é uma opção.

A estratégia foi substituir o sistema legado incrementalmente, módulo a módulo, enquanto o novo crescia em paralelo — sem downtime, sem pressa e sem comprometer ninguém no processo.

A arquitetura

A escolha de Microfrontends foi central. Cada domínio de negócio tornou-se uma unidade independente, com:

  • Ciclo de deploy próprio, sem bloquear outros times
  • Fronteira clara de responsabilidade e domínio
  • Squad dedicada com autonomia técnica real
    A camada de integração foi resolvida com BFFs (Backend for Frontend) — controlando os contratos entre o frontend e os serviços de negócio, abstraindo complexidade e protegendo o front de mudanças no backend.
    A autenticação seguiu padrões compatíveis com as exigências regulatórias do setor financeiro.

Design System

Para garantir consistência visual e velocidade de entrega entre as squads, estruturamos um Design System compartilhado — com componentes documentados, tokens de design e padrões de acessibilidade aplicados desde a base.

O resultado prático: times diferentes entregando interfaces coerentes, sem depender de aprovação centralizada para cada componente.

CI/CD e qualidade

Defini as réguas de qualidade do projeto: cobertura mínima de testes, Code Review estruturado, análise estática e pipelines que impediam merge de código fora dos padrões.

O objetivo não era burocracia — era criar uma rede de segurança que permitisse ao time evoluir rápido sem medo de quebrar produção.

O papel de liderança

Técnica foi só parte do trabalho. O dia a dia era ser o ponto de conexão entre mundos diferentes:

  • Traduzir requisitos de negócio em decisões de arquitetura
  • Apoiar PMs e POs no discovery técnico e priorização de backlog
  • Mentorar desenvolvedores e estruturar as squads para autonomia progressiva
  • Conduzir análise de causa raiz em situações de alta pressão
    O maior orgulho não foi a arquitetura que ficou. Foi ver membros do time tomando decisões técnicas complexas sem precisar escalar para mim — sinal de que o ambiente estava funcionando.

Stack aplicada

CamadaTecnologia
FrontendReact + TypeScript
ArquiteturaMicrofrontends (importmap)
IntegraçãoBFF pattern (Node.js)
DesignDesign System + tokens de acessibilidade
QualidadeCI/CD, testes, análise estática

O que ficou

  • Canal web reconstruído do zero em produção
  • Arquitetura de Microfrontends escalável, mantida por múltiplas squads
  • Design System adotado como padrão nos canais digitais da cooperativa
  • Times com autonomia técnica real e processo de qualidade consolidado

Alguns detalhes de implementação foram abstraídos intencionalmente — o foco aqui são as decisões de arquitetura e liderança, não a especificação técnica de um sistema financeiro em produção.