Skip to main content

Case study · 2023

CARDI

Rebuilding a map-heavy cable-network pre-vetting tool so operational teams could navigate dense infrastructure data with less friction.

CARDI cable network pre-vetting web application
Role
Lead Front-end Engineer
Status
Rebuilt for production
Year
2023

Problem

CARDI’s legacy workflow made an important network-planning task harder than it needed to be. Navigation was difficult, and the map became increasingly resource-intensive as large numbers of SVG network elements rerendered during interaction, leading to slow performance and memory issues. The product needed a more reliable foundation for teams working with dense fiber-optic network data every day.

Primary audience

Internal network-planning and field-operation teams preparing and managing fiber-optic node-splitting work.

Constraints

The replacement needed to handle dense geospatial data, integrate with existing REST services, and improve performance without disrupting established operational workflows. It also had to remain understandable and maintainable for an outsourced engineering team that would continue adding features over time.

Validation

The rebuilt application went through the team’s normal review and delivery process and received positive stakeholder feedback around usability and performance. The new structure was also used as the foundation for continued development by the wider team.

Outcome

CARDI moved from a difficult, resource-heavy legacy experience to a more scalable Angular application with a smoother and more manageable map workflow. The rebuild improved the foundation for future feature development while making the product easier for both users and engineers to work with.

My contribution

I led the front-end architecture for the rebuilt Angular application, selected and configured the core libraries, and established patterns the wider team could continue building on. I focused on turning the redesigned experience into a performant and maintainable product, including the geospatial workflow, REST integrations, component structure, and application behavior. I also helped onboard local engineers and supported the team as development expanded. The broader product team owned the visual redesign, while I was responsible for translating that direction into a stable, scalable front-end implementation.

Scope

  • Web Application
  • Frontend Development

Stack

  • Angular
  • TypeScript
  • Node.js
  • Ant Design
  • REST APIs
  • Leaflet
  • GeoJSON