Microsoft Xbox · Tech Mahindra
Leading the rebuild of an old, end-of-life admin tool from Angular 1.x to modern React and TypeScript, inside a large shared codebase. It matches the old features across about 20 pages, and the patterns I set up were reused by the rest of the team.
Ongoing rebuild, sanitized for sharing. Full implementation details available on request.
Problem
An old Angular 1.x tool that internal users relied on to configure features had fallen behind. It looked different from the rest of the product, made you load a whole new page just to edit one thing, and had no dark mode, weak error messages, and poor accessibility. Everything else had already moved to modern React.
Approach
Set up the shared foundation first (data handling, login, layout, and a local connection helper), so each page could focus on the screen and its data instead of plumbing.
Rebuilt one page at a time using a fixed template, so after the first two example pages, every other page followed the same shape.
Gave each feature area its own data module that mirrored the old app exactly, making it easy to delete the old code as each part was finished.
Wrapped all server data in a clear 'loading / loaded / error' pattern, removing a whole class of confusing 'is it loading or empty?' bugs.
Replaced 'open a new page to edit' with pop-up edit windows, so users keep their place on the screen.
Engineering Challenges
Most of the real work was in the small integration details that only show up in a large, live system.
A server setting broke loading images the normal way. I loaded them through the build tool instead and documented it for other developers.
An import action returned the same error code for a real conflict and for 'nothing changed.' I detected the 'nothing changed' case and showed it as a harmless note instead of a scary error, and the bug reports stopped within a week.
Two related services stored the same version tag in different spots, causing silent 'saved over your changes' bugs. I centralized reading it so the wrong spot could not be used by mistake.
Two look-alike IDs only failed deep in the backend when mixed up. I used the type system to make them impossible to swap by accident, and chose the right one in a single place.
One helper picked the correct server address for development versus production automatically, so there were no hard-coded addresses anywhere in the feature code.
Built With
I stuck to the team's existing tools instead of adding new ones, so other engineers could jump in right away.
Impact
20+
Admin pages
Zero
Backend changes
React 18 + TS
New stack
What This Shows
Beyond matching the old features, the real win was a set of shared patterns that other engineers reused page by page, keeping the code consistent as it grew. Nice extras like dark mode and clearer error messages came for free with the clean rebuild.