# Building a shared React system across healthcare micro-frontends

Case 03 · Frontend architecture · Healthcare · Jordão Qualho, Senior Software Engineer

> A US healthcare product needed a custom experience for a large hospital client, spread across several React micro-frontends. In a short engagement, I built a Storybook-documented library of 50+ components from the Figma designs, so those frontends could share one UI foundation.

Technologies: React, TypeScript, Storybook, ArgoCD, Micro-frontends

## Context

I worked through Tecla on a short engagement for a US healthcare company. Its existing product used audio transcription and AI agents to support care workflows in hospitals, such as organizing clinical information and looking up medical knowledge and papers. A large hospital client asked for a customized experience, which touched several frontends that had to evolve consistently.

## Constraints

- Several applications: a main shell whose menu routed to separate frontends.
- Micro-frontends had been chosen before I joined.
- Every frontend had to follow the same Figma designs.
- Direct work with US-based stakeholders.
- A short timeline.

## What I built

- A Storybook for the team.
- An internal React component library built from the Figma designs: 50+ components, including buttons, inputs, chat and modals.
- Integration of the library into the micro-frontends, adapting it where each one needed.
- ArgoCD manifests for the new services, adapted from the existing ones by changing the service and resources.

## Architecture: what was mine

- Already in place: the micro-frontend architecture, the shell routing to separate frontends, and the ArgoCD deployment setup used by other services.
- My implementation: the component library, Storybook as the visual reference, the library's integration into the frontends, and the ArgoCD manifests for the new services.

## FHIR data in the UI

Part of the domain data followed FHIR, the healthcare interoperability standard used by the backend. I helped adapt the FHIR data the interface needed into a shape the frontend could display.

## Result

- A shared library of 50+ reusable components in use.
- Storybook as the team's reference for visual implementation.
- Multiple frontends built on the same foundation.
- A working MVP.

## Project ending

The engagement ended after the client chose not to continue the contract for commercial reasons related to timeline and cost.

## Engineering takeaway

> Micro-frontends buy independence, but every boundary is also a place where buttons, inputs and modals get rebuilt slightly differently. Without a shared foundation, that independence turns into fragmentation and duplication. One component library with one visual reference lets the frontends stay separate in code and still read as one product.

---

Canonical: https://jordaoqualho.com/work/healthcare-react-component-system/ · Full profile: https://jordaoqualho.com/llms-full.txt · Contact: jordaoqualho@gmail.com