Upon taking over the frontend from a third-party agency, I led a comprehensive transition to transform a fragile legacy project into a robust and maintainable codebase. A primary focus of this initiative was engineering a significant increase in software quality, moving the project from a baseline of 45% code coverage to a much more resilient 90%. To support this, I established a sophisticated automated testing pipeline on CodeBuild that executes after every commit. I designed these tests using a flexible architecture where a simple configuration change—essentially the flip of a switch—converts them from fast, mocked integration tests into full end-to-end tests by disabling the backend mocking layer. This dual-purpose testing strategy ensured high confidence in both isolated logic and integrated system behavior without maintaining two separate test suites. To optimize the development lifecycle and reduce operational overhead, I introduced Storybook as a central tool for both unit testing and feature reviews. Recognizing that spinning up full cloud environments for every feature branch was prohibitively expensive, I implemented a workflow where Storybook is built automatically from each branch. This provided a lightweight and cost-effective environment for stakeholders to review UI changes and code functionality before they are merged into the main codebase. This shift not only saved significant infrastructure costs but also accelerated the feedback loop between development and design. The structural integrity of the application was further reinforced by a move toward an event-driven architecture. I re-engineered the platform so that all asynchronous operations are handled within a dedicated middleware layer, keeping the UI components themselves entirely synchronous. In this model, components simply dispatch actions in response to lifecycle events, such as mounting, or direct user inputs. These actions are then processed by the middleware in a pattern similar to a pub/sub architecture. This separation of concerns made the application state far more predictable and simplified the process of tracking complex side effects, which was a major pain point in the original agency-delivered code. In terms of performance and data management, I overhauled the application's loading strategy from an eager model to a more efficient lazy-loading approach. By decentralizing data fetching so that each component requests its own specific data, I made it much easier to track and manage individual data dependencies across the platform. To ensure this did not lead to an explosion of redundant network traffic, I engineered a sophisticated two-tier caching mechanism. The first tier resides within the global state management, while the second tier acts as a final check at the API level just before a request is dispatched to the backend. This ensures that even if multiple components request the same data simultaneously, only a single call is actually made. Finally, I implemented an on-demand loading system for translation strings. This ensures that the copy for components that are not currently visible is never downloaded, further reducing the initial bundle size and significantly improving the overall loading speed for the end user.