I built a bridge system that allowed us to modernize with React while avoiding a legacy uplift

Role: Technical Lead, Software Architect
Technologies: Angular, React, TypeScript, JavaScript
Impact: 99.9% platform reliability, enabled React adoption without full rewrite, 300+ agents onboarded

The Challenge

American Express needed to modernize their customer care platform that handled millions of daily interactions. The existing Angular system was becoming hard to maintain, but a complete rewrite was too risky for a business-critical application. We needed a way to gradually introduce React without disrupting the platform's 99.9% uptime requirement or blocking teams from shipping new features.

The Solution

I designed TimeMachine as a bridge system that let teams build new features in React while keeping the existing Angular platform running. Instead of a risky rewrite, we could modernize the platform piece by piece.

The system had three main parts:

1. DOM Integration Layer

A portal system that let React components live inside Angular's DOM. This meant teams could build independent React features that worked within the existing app structure.

// Angular directive for React components
@Directive({
  selector: '[reactPortal]'
})
export class ReactPortalDirective {
  @Input() componentId: string;
  @Input() props: any;
 
  ngOnInit() {
    // Register DOM element as a mount point
    this.portalService.registerMountPoint(
      this.componentId,
      this.el.nativeElement,
      this.props
    );
  }
}

2. Cross-Framework Communication

An event system that let React and Angular components talk to each other through a standard API.

3. State Synchronization

A system to keep data in sync between both frameworks, which was crucial for features that used both technologies.

// React hook for Angular state
function useAngularState(stateKey) {
  const [state, setState] = useState(null);
 
  useEffect(() => {
    // Get initial state
    setState(window.angularApp.getState(stateKey));
 
    // Subscribe to changes
    const unsubscribe = eventBus.subscribe(
      `state:${stateKey}:changed`,
      newState => setState(newState)
    );
 
    return unsubscribe;
  }, [stateKey]);
 
  return [
    state,
    newState => window.angularApp.setState(stateKey, newState)
  ];
}

Implementation Process

We rolled out the system in phases:

1. Proof of Concept: Tested with low-risk features first
2. Framework Adoption: Built tools and docs for teams to use the system
3. Strategic Rollout: Started with high-value features
4. Scaled Implementation: Expanded to more teams and business units

Results & Impact

TimeMachine delivered clear results:

• Kept 99.9% uptime while modernizing a system handling millions of daily customer interactions
• Helped launch a new travel vertical with 300+ specialized agents
• Sped up feature development by letting teams use modern tools right away
• Created a pattern for modernizing other legacy systems
• Let engineers use new tech while supporting existing systems

Technical Architecture

The system was designed to be lightweight yet robust, with careful attention to performance optimization for high-traffic scenarios. React components could be dynamically loaded and rendered within Angular views, with bidirectional data flow maintaining state consistency across frameworks.

The modularity of the design allowed teams to incrementally adopt React where it made the most sense, while keeping critical, stable functionality in the existing Angular codebase until it was strategic to migrate it.

Lessons Learned

This project highlighted several important principles for successful legacy modernization:

1. Incremental approaches often succeed where "big bang" rewrites fail
2. Creating bridges between technologies can be more practical than forcing complete migration
3. Empowering teams to use the right tool for each task improves both delivery speed and quality
4. Technical solutions must balance innovation with reliability, especially in business-critical systems