Removed cross-microfrontend style leaks and made one schema the contract between services.
React product engineering on the web platform of a listed multinational, built as a multi-team micro-frontend architecture across multiple regions and languages. I work on the shared layer: the React component library those teams build on, a two-layer CSS isolation system that stops one microfrontend's styles from reaching another, and a templating monorepo I scaffolded from zero where Zod schemas emit JSON Schema as the contract between services. Client identity available on request.
What changed
Made isolation and contracts structural: prefixed selectors plus design-token variables at two layers, and Zod schemas that emit the JSON Schema both services validate against.
Why it matters
Platform work at enterprise scale, where one change to a shared package reaches every team at once. The isolation system removed a recurring failure mode instead of patching instances of it, and the schema layer replaced hand-kept API assumptions with a generated contract both sides validate against.
Readouts
- 108+
- 2 layers
- 0
Highlights
- Built a two-layer CSS isolation system: postcss-prefix-selector scoping every rule a microfrontend emits, plus design-token CSS variables so themes resolve per host instead of leaking globally. Style bleed stopped being a recurring bug and became a property of the build.
- Scaffolded a templating monorepo from zero on pnpm workspaces, with Zod 4 schemas emitting JSON Schema, so the payload a service sends and the shape the renderer expects are one generated artifact instead of two hand-written assumptions.
- Built a dual-runtime email renderer: one React component tree and a Handlebars build that run identically in Node and in the browser, so the preview a reviewer approves is the output the service actually sends.
- Wired Changesets into CI so shared packages version and publish on merge, and every consuming team upgrades against a changelog instead of a message in chat.
- Contributed 108+ commits to the shared React component library that product teams render. Library-first: add a prop, do not fork the component.
Outcomes
- Cross-microfrontend style leaks stopped being a class of bug. Isolation is enforced by the build, not by a review checklist.
- Two services validate against the same generated JSON Schema, so a payload change breaks CI instead of production.
- Shared packages version and publish on merge, and consuming teams upgrade against a readable changelog.
- The shared library grew by props rather than forks across multiple product teams.
Stack
- React
- TypeScript
- Module Federation
- pnpm workspaces
- Zod 4
- JSON Schema
- Handlebars
- PostCSS
- Changesets
- Node.js