Replacing a major retailer's EC site and admin site with React + Lumen

What changed

• Replacement scope
  EC site + admin site
• Progress management
  Phased release as planned
• Operational cutover
  Business stoppage minimized

Challenge

Because the live EC site and admin site were to be replaced at the same time, cutover timing had to be adjusted to fit the circumstances of both the business and operations sides. Since the configuration was changing on both the front-end and API sides, grasping the scope of impact was also important. Moreover, retail's peak seasons are fixed, and a business stoppage during those periods is not acceptable. We had to sequence the phased release while watching both the replacement's progress and the business calendar. With the design changing over a wide range, it is easy to fall into a "no telling what breaks where" state unless the scope of impact is made visible.

Approach

1. 01 Took stock of the current site's features on a per-screen and per-API basis
2. 02 Redesigned the front end with React + Redux and the API layer with Lumen
3. 03 Unified the development, staging, and production environments with Docker
4. 04 Locked in a cutover plan with the business side and localized impact through phased release
5. 05 Agreed a release calendar with the business side that avoided the peak season, keeping progress management reasonable
6. 06 Mindful of operational handover after cutover, we prepared the operations documentation and monitoring items in parallel with the design

Key success factors

Per-screen and per-API stocktaking

We took stock of the live system on a per-screen and per-API basis, making the scope of the replacement's impact visible.

Phased-release operation

Running in parallel with the current system, we released in stages and advanced with a cutover plan—agreed with the business side—that minimized business stoppage.

Separating front-end and API responsibilities

We designed the React + Redux front end and the Lumen API as separate concerns, so changes on one side would not drag on the other.

Verification speed through a unified environment

By aligning the development, staging, and production environments with Docker, we ensured the number of verification passes possible during the replacement.

Solution

We built a React + Redux front end and a Lumen-based API on Docker, switching over in stages while running them in parallel with the current system. As PM, we handled coordination with the relevant departments and advanced the replacement while keeping business impact down. A phased release aligned with the business calendar minimized business stoppage, and we completed the migration of core features before the peak season. Separating the responsibilities of the front end and the API also lowered the cost of adding features after the replacement.