AngularJS to React Migration
Supply Chain Visibility Platform
Led the full frontend modernization of a B2B supply chain visibility platform used by logistics operators tracking global shipments across five transport modes. Migrated from AngularJS to React through 300%+ client growth, reducing load times by 60%+ and accelerating feature delivery.
Product Screenshots
Shipment tracking dashboard — real-time shipment search across ground, ocean, air, parcel, and intermodal modes
Interactive mapping — Bing Maps integration with live shipment pins, weather radar overlay, and disruption layers
The Problem
A large-scale B2B supply chain visibility platform was built on AngularJS — a framework reaching end-of-life that was slowing feature delivery, hurting performance, and creating mounting technical debt. The product needed a full frontend modernization without disrupting a production platform used by logistics operators tracking global shipments across every transport mode.
What I Built
Shipment Search & Tracking
Real-time search across ground, ocean, air, parcel, and intermodal shipments with a dynamic Elasticsearch-backed filter system driven entirely by tenant metadata APIs.
Interactive Mapping
Three independent Bing Maps instances with live shipment pins, weather radar overlay, geohash cluster decoding, disruption overlays, and port/facility layers.
Redux Architecture
Full Redux store with Immutable.js state, redux-saga for all async flows, and a clean container/component separation pattern.
Real-Time Collaboration
Socket.IO powered in-app conversation and commenting system with live typing indicators per shipment.
Supply Chain Dashboards
Historical and in-transit health dashboards surfacing supply chain health by mode (ocean, ground, air, parcel) alongside trending shipments — built with Recharts visualizations.
Dynamic Filter System
Data-driven filter framework generated entirely from API responses, with URL-persisted filter state and saveable named filter sets.
Auth & Multi-Tenancy
Auth0 implicit flow integration with per-tenant configuration and permission-based routing across clients.
Testing
Jest + Enzyme unit test coverage and Nightwatch end-to-end test suite for critical user flows.
Key Technical Decisions
Preserve container/component split from Angular
Maintained Angular's container/component pattern as a React pattern — containers as Redux-connected logic, components as pure presentation — to reduce migration risk and keep the team productive during transition.
URL query strings as filter source of truth
Used URL query strings to persist filter state, enabling shareable, bookmarkable search views that matched the original Angular $location behavior.
Redux-Saga over Thunks
Chosen for complex async flows involving multi-step API calls, debouncing, and incident pre-fetching alongside shipment search — saga's structured model made these patterns far cleaner.
Bing Maps as imperative SDK wrapped in React lifecycle
Pragmatic decision given the complexity of the existing map layer logic. Wrapped the imperative SDK in React component lifecycle rather than a full rewrite.
Results
300%+
Client base growth during tenure
60%+
Reduction in page load times post-migration
5
Transport modes covered (Ground, Ocean, Air, Parcel, Intermodal)
3
Independent Bing Maps instances across the platform