How Modernizing an Internal Management System for a U.S. Energy Enterprise Led to a 90% Reduction in Developer Ramp-Up Time
A major U.S. energy infrastructure company operates one of the largest natural gas pipeline networks on the continent. It managed its internal operations through a legacy web platform. Over the years, the system became a mess of unsupported libraries and messy code. Engineers struggled to extend it and found it hard to trust.
STX Next rebuilt the entire frontend while keeping every feature and delivered a clean, well-documented, high-performance system. Now, the client's developers can easily maintain and expand it.
North American Energy Infrastructure Leader
Our client is a major energy infrastructure company in North America. They run a large network of natural gas pipelines, terminals, and storage facilities. The company manages thousands of miles of pipeline, serving millions of customers across the United States and Canada.
The client's engineering and project management teams used a custom internal web platform to coordinate every stage of the pipeline lifecycle. The platform pulled data from the IAM portal. This allowed teams to view past, present, and future projects.
Core functions are:
- Scheduling pipeline integrity assessments
- Performing risk analyses across the network
- Managing maintenance activities
- Tracking project budgets and reporting
The stakes were high as failures in pipeline management carry regulatory, safety, and financial consequences.
Legacy Platform that Became Impossible to Maintain and Scale
The internal management platform had been developed gradually over many years. By the time the client approached STX Next, the frontend codebase had accumulated huge technical debt.
The core problems were straightforward but severe:
- The codebase relied on libraries that were outdated and no longer supported. As a result, upgrading them through regular paths was impossible.
- The architecture was too complex and poorly structured. There was no clear separation of concerns, no documentation, and no shared component rules.
- The application was full of bugs, making daily tasks harder for engineers and project managers.
- Performance was poor, especially in the data table views central to the app. Tables loaded slowly, and the map was sluggish when panning.
- Adding a new feature meant dealing with a lot of complexity. This came with high costs and risks, making the product hard for the internal team to maintain.
The client had a clear request: create a working app that keeps all current features. It also needs to be fast and clean, so new features can be added easily. After reviewing the code with the client, we realized the technical debt was significant.
Therefore, we agreed that a full rewrite of the application would be more effective than a patch-by-patch refactor. This decision needed full feature parity with the production system. It also required strict security controls and timely delivery.
A Complete Platform Rebuild and a Modern, User-Friendly Frontend
STX Next assembled a cross-functional team that included a Solution Architect, a Full-Stack Engineer, a Project Manager, a Business Analyst, and a UX/UI Designer. Each member brought unique skills to ensure project success. The team began by auditing the existing application. They listed all features currently in use and planned the architecture for the new system.
The new platform frontend was created with a carefully selected tech stack, designed to meet the demands of a data-intensive internal operations platform.
React as the UI layer, chosen for its component model and ecosystem maturity.
TanStack Router for navigation, with type-safe URL search parameters used as shared state stores. Users can now copy a URL and share it with a colleague. This lets them show exactly what they see, including active filters, table state, and map position. This was not possible in the old system.
TanStack Query (React Query) for data fetching and cache management. The team made extensive use of prefetching to deliver a noticeably faster experience. Compared to the legacy Redux-based implementation, data management became significantly simpler to reason about and extend.
AG Grid upgraded from version 22.1.1 to 32.1.0, for the complex, high-performance data tables that form the operational core of the platform. The grid state is now reflected in the URL, enabling shareable views. Both Server-Side and Client-Side Row Models are supported.
React-Leaflet for interactive mapping. The team moved to this library and added several performance optimizations. They used TanStack Query's caching features. Now, map interactions are almost instant compared to the previous solution.
Shadcn/ui + Tailwind CSS for the interface layer. This combination let the team control styling fully. It also provided great accessibility right away and ensured a consistent design system. Plus, it avoided the burden of a heavy UI framework.
Zod + React Hook Form for runtime validation and form handling.
Security was treated as a first-class requirement throughout the engagement. The frontend was created solely in local environments. It didn’t connect to the client’s internal networks at all. Developer devices were encrypted with FileVault. API access was provided through a dedicated air-gapped device running IIS and MSSQL, completely isolated from the internet and populated only with a subset of data from the QA environment. The team operated under the principle of least privilege at all times.
The UX/UI Designer reviewed the existing design system and delivered updated mockups for the homepage, project details view, and map widget. They modernized the interface while preserving the workflows that internal users were already familiar with.
The client got a rebuilt application plus complete system documentation and a glossary. This helps the internal team maintain and grow the product on their own.
Modernizing a U.S. Energy Enterprise's Web Platform to Cut Initial Data Table Load Times by 70%
The rebuilt platform delivered a set of immediate improvements to the client's internal operations:
Noticeably faster data table performance
Data tables, the most heavily used part of the application, load 70% faster in the new system.
The AG Grid upgrade from v22 to v32, combined with TanStack Query prefetching, eliminated the delays that previously disrupted engineers working through large project datasets.
Near-instant map rendering
Map interactions that previously felt sluggish now load data in less than a second when panning, a direct result of the React-Leaflet migration and the caching strategy implemented with TanStack Query.
Shareable application state
For the first time, users can copy a URL and share the exact view they are working in, including active filters, sorted columns, and map position.
This removed a friction point that previously required teams to manually communicate which data they were looking at.
Significantly improved developer productivity
The new architecture is built on reusable components, significantly increasing developers' velocity. Here’s a real-life example: a new engineer who joined the client’s team was able to deliver the first feature after just one day of onboarding.
Compared to the previous process, which took several weeks, our client reduced developer ramp-up time by 90%.
Bugs resolved
The rewrite process surfaced and fixed a large number of bugs that had accumulated in the previous implementation.
The client received a cleaner product than they had in production, not just a faster one.
Richer dashboard customisation
The reworked dashboard layer supports far greater user customisation than the previous version, with sorting, filtering, column resizing, rearranging, preset saving, data export, and inline editing all retained and improved.
Delivered within budget and on schedule
The engagement was completed on time and within the agreed budget, with STX Next investing over 109 additional hours of UX/UI design and engineering support at no additional cost to the client, generating tangible savings.
Full documentation delivered
The client received comprehensive system documentation and a product glossary alongside the application itself, an asset the previous codebase entirely lacked.
Looking Ahead to an AI-Driven Future
Energy infrastructure companies rely on internal software that must be as reliable and easy to maintain as the physical systems it supports. When engineers can no longer trust or extend that software, costs rise. This affects every team that relies on it.
STX Next faced a tough challenge: rebuilding a key pipeline management platform. They had to keep all existing features, work without access to the client's network, and meet tight deadlines. The team created a clean, documented, high-performance application with a modern React stack. It includes faster data tables, quick map interactions, and shareable states. Client developers can jump in and contribute right from day one.
The result is a platform the client's own teams can maintain, extend, and rely on as the business scales. This project shows that STX Next can support large enterprise clients in sensitive industries. It also highlights our ability to handle complex frontend modernization projects with the necessary discipline and technical depth.
Are you ready to also transform your business?
Schedule a call with our experts to discover the benefits of partnering with STX Next.
Our customers love to work with us
