Rebuilding an offshore-built restaurant app to in-house quality with Laravel + React + Inertia

What changed

• Incident-response time
  Shortened
• Feature-addition lead time
  Shortened
• Codebase
  Types put in place via TypeScript

Challenge

The existing system had thin documentation, and every fix broke something else. With the time-zone and language gap on the offshore side, even minor fixes took anywhere from several days to several weeks. The codebase had no types and its dependencies were never documented, making it hard for in-house engineers to touch as well. A vicious cycle had set in where every release caused an incident, and handling it delayed the next release. To resolve the "nobody who can fix it" situation at the root, both the codebase and the operational flow had to be rebuilt.

Approach

1. 01 Reverse-engineered the current app's use cases screen by screen
2. 02 Adopted a 'server-anchored, SPA experience' configuration with Laravel + Inertia + React
3. 03 Fixed API inputs and outputs with types via TypeScript to prevent regressions
4. 04 Ensured reproducibility from local to production with Docker
5. 05 Established code-review standards and a documentation policy so in-house engineers could get their hands in
6. 06 Automated the release flow on a GitHub Actions basis, structurally eliminating accidents caused by manual work

Key success factors

Reverse engineering

We read the thinly documented current app screen by screen and restored it to a state where the rationale for each feature could be explained in-house.

Coupling via Inertia

With InertiaJS we tightly coupled the Laravel-side logic and React-side UI, reconciling the SPA experience with the clarity of a server-anchored approach.

Regression prevention via TypeScript types

By fixing API inputs and outputs with TypeScript types, we structurally resolved the situation where every fix broke something else.

A reproducible development environment

With Docker we curbed the differences between local and production, lowering the round-trip cost of investigation and fixes.

Solution

Using InertiaJS as the hub, we tightly coupled the Laravel-side logic with the React-side UI while delivering an SPA-like experience. Sharing types with TypeScript also lowered the cost of adding and modifying features after the replacement. Once replaced, in-house engineers could touch the code directly, and both incident-response time and feature-addition lead time shortened significantly. The codebase is back to one where "you can tell what is where."