← All case studies

ZF Group · 02/2022 to 07/2023

Twin Model Builder

The problem

Engineers needed one place to monitor and configure 1,000+ connected industrial devices. The tool had to show live data on a canvas of connected nodes without slowing down.

My role

Front End Engineer. I designed and built the portal from scratch in React, HTML5 and CSS3.

Approach

  • A node-and-canvas editor, so a device model is drawn as a graph instead of filled in as a form.
  • Live telemetry over WebSockets and REST APIs.
  • Profiled memory in Chrome DevTools to find leaks and wasted re-renders, then fixed component rendering logic.

Result

Smooth canvas rendering at 60 FPS with complex node graphs and high-frequency telemetry. I also built collaborative data visualization dashboards, which cut handoff time between teams by about 35%.

No internal screenshots or confidential details are shown here.