03 · Financial services · Frontend architecture
Evolving a financial platform without breaking trust
Migrating React features to single-spa microfrontends with clearer component boundaries, a shared design system, and tests that protect existing behavior.
- Company
- Unicred
- Role
- Senior Full Stack Developer
- Period
- 2022 — 2024
- Stack
- React
- single-spa
- Next.js
- NestJS
- Jest
- Testing Library
01 · The problem
A financial cooperative’s digital applications needed to evolve without changing what people relied on. Architecture changes, shared UI, and regression protection were parts of the same problem — in a project where CI blocked merges below 95% line coverage in the tested scope.
02 · What I did
- Migrated React pages and components to single-spa microfrontends, configuring routing and application loading while preserving existing behavior.
- Moved state, integrations, loading, and error handling into container components, leaving presentational components to render from props — easier to test, and easier for colleagues to follow.
- Co-developed the internal design system with Material UI and Tailwind CSS.
- Wrote Jest and React Testing Library tests for loading, error, and interaction states, using TDD where it fit.
- Ran internal training on Figma-to-code, NestJS backends-for-frontend, and container/presentational patterns, and supported roughly six to eight developers through guidance and pull request reviews.
03 · The key decision
Make responsibilities visible.
When integration logic leaves the presentational layer, there’s one obvious place to change behavior and one obvious place to test it. Coverage was the gate; tests of what users actually do were the point.
04 · Interactive diagram
Original illustration of the engineering idea — not a product screenshot.
Boundaries that make change safer
single-spa root
Microfrontend 01
Container
- · State
- · Integrations
- · Loading & errors
Presentational
- · Renders from props
- · Design-system parts
- · Easy to test
Microfrontend 02
Container
- · State
- · Integrations
- · Loading & errors
Presentational
- · Renders from props
- · Design-system parts
- · Easy to test
Microfrontend 03
Container
- · State
- · Integrations
- · Loading & errors
Presentational
- · Renders from props
- · Design-system parts
- · Easy to test
CI gate · ≥ 95% line coverage in tested scope
Each microfrontend keeps behavior in containers and rendering in presentational components — so every change has an obvious home and an obvious test.
05 · What changed
Migrated features became easier to understand, test, and maintain. Teammates applied the shared patterns with less one-on-one guidance, and pull requests became more consistent. This was collaborative work on a shared platform, not a solo redesign.
06 · Scope, honestly
The 95% figure is a CI requirement for the tested scope, not a personal metric. Improvements are qualitative; no performance or defect-rate numbers are claimed.