Edrolo

Frontend modernisation of a legacy React codebase in a production SaaS environment.

Overview

I'm driving the frontend modernisation of a complex legacy React codebase while continuing to support production delivery.

This is ongoing work inside a mature product environment, not a greenfield rewrite. The useful work is sequencing change safely: modernising patterns, improving developer experience, and reducing frontend drag without disrupting feature delivery.

Role and context

I've spent more than 24 months in the codebase as a senior frontend engineer, working across product features, shared UI, review, testing, and migration planning.

Within the migration, I own the frontend stack selection and patterns: TanStack Query for data fetching and caching, shadcn/ui and Tailwind for the design system, and the hooks and component architecture that sit on top. Our CTO owns the underlying monorepo and build architecture. The work described here is the frontend application layer.

That long production tenure matters. It means the modernisation work is grounded in real constraints: existing routes, older patterns, team habits, release risk, and the need to keep shipping while improving the foundation.

Stack direction

I selected the frontend stack the modernisation is moving toward: TypeScript, TanStack Query, shadcn/ui, Tailwind, and clearer frontend boundaries between application code, shared UI, and data layers.

The goal is not change for its own sake. It is to make the codebase easier to extend, easier to test, and less expensive for engineers to work in over time. Each pattern was chosen to be incrementally adoptable, so older screens can move to newer conventions without forcing a risky all-at-once rewrite.

Developer experience

A large part of the value has been improving the day-to-day engineering experience around the migration.

That includes clearer component ownership, more predictable data-fetching patterns through TanStack Query, reusable UI primitives via shadcn/ui, better local reasoning about state, and a stronger path for moving older screens into newer conventions one surface at a time.

Testing infrastructure

I've also worked on frontend testing infrastructure and related development workflows so modernisation work can happen with more confidence.

This is the kind of engineering foundation that lets a team modernise a long-running React application without turning every change into a regression hunt. It is the unglamorous prerequisite for any serious migration in a live production system.

What this shows

This work demonstrates the broader React / TypeScript generalist lane: understanding a complex existing system, choosing a practical migration path, defining frontend patterns and conventions, improving developer experience, and making technical change possible inside a real production environment.

Where Crate Clothing demonstrates greenfield headless commerce execution, this work demonstrates senior judgment inside a larger legacy React codebase.

Stack and focus

← Back to portfolio