React microfrontend inside a legacy AngularJS platform
Oobj by Avalara · 2023 – 2024
ReactTypeScriptSingle-SPAAngularJSMicrofrontends
Challenge
A new NFCom invoice module had to ship inside a large legacy AngularJS application — looking native to it — without piling conditional logic onto a codebase owned by another team, and without a risky rewrite.
Approach
As the sole developer, I prototyped three integration strategies — iframes, Module Federation, and Single-SPA — and chose Single-SPA parcels with import maps. The React + TypeScript page exports lifecycles consumed by the host, renders on the same page and host — reusing the existing authentication token — and ships behind a per-client module toggle.
Impact
The NFCom frontend deploys independently and the legacy team never had to touch it. The module serves a client issuing millions of fiscal documents per day.
Includes an advanced query builder where users compose SQL-like filters over document fields, with nested AND/OR groups.