Context & Problem
The telecom provider was running on severely outdated legacy POS terminals that frequently crashed during complex multi-line activations, causing massive customer churn in-store. They needed a modern, resilient application that stayed responsive on both current tablets and older desktop machines.
Building a POS system is fundamentally an exercise in robust state management. A single transaction might involve credit checks, inventory reservation, trade-in valuations, and payment processing. If the network drops or the hardware glitches mid-flow, the application must recover perfectly without double-charging the customer or losing the cart.
Design Constraints
- platformMust run seamlessly on both iPad (touch) and Windows desktop (mouse/keyboard) from a single codebase.
- legacyRequired integration with 15+ legacy SOAP APIs for inventory and billing.
Architecture Overview
We architected a unified frontend using React Native Web, allowing us to share 95% of the codebase between the native iOS app (for iPads) and the web app (for desktops). We implemented a strict unidirectional data flow using Redux Toolkit, modeling every step of the checkout process as a deterministic transactional state. We introduced a Backend-for-Frontend (BFF) layer in Node.js to aggregate the legacy SOAP APIs into a clean GraphQL graph for the client.
Key Engineering Decisions
Outcomes & Lessons Learned
Terminals
Successfully deployed and actively powering hundreds of retail terminals across North America.
Code Sharing
Achieved 95% code sharing between the iOS tablet application and the desktop web application.
Retrospective
- React Native Web is an incredibly powerful paradigm for enterprise applications where feature parity across platforms is more important than bespoke platform aesthetics.
- A Backend-for-Frontend (BFF) is absolutely mandatory when modernizing a frontend against a sprawling legacy SOAP backend.