← Back to projects

CNS Redesign: Web-based SCADA-like Platform

Plain-English summary: I redesigned CNS/HVAC operations into a web interface that improves real-time visibility and operational decision speed.

Scope

Redesigned legacy monitoring workflows into a modern web runtime focused on operational visibility, alarm triage speed, and field-service usability.

Next.js 16 React 19 WebSockets Zustand SWR SVG + R3F

Project Visuals

Technical Architecture

Problem/Context

  • Operators needed faster alarm visibility with less screen switching.
  • Cabinet and floor-plan context was hard to map to active issues.
  • Service views were fragmented between monitoring and documentation.

What I Built

  • Built real-time state flow with socket events and predictable store layers.
  • Designed SVG cabinet schematics tied to live state overlays.
  • Added floor mini-map context and alarm severity filters.
  • Structured component system for dashboards, schedules, and service notes.

Responsibilities

  • I handled architecture and component decisions for the operational frontend.
  • I shaped real-time state behavior for monitoring and alarm handling workflows.
  • I aligned interface decisions with field-service needs and documentation flows.

Constraints

  • Needed to preserve operational continuity while improving core workflows.
  • Had to keep implementation practical for mixed technical and field-user contexts.
  • Project-specific infrastructure details remain private.

Outcome/Value

  • Faster issue triage and clearer handoff to field technicians.
  • Better alignment between control-room monitoring and on-site execution.
  • More reliable reporting for service and maintenance cycles.

System Concepts

  • Designed for incremental rollout with minimal operator retraining overhead.
  • UI modules prioritized by operational impact, not cosmetic complexity.
  • Real-time context mapping between alarms, floor areas, and equipment state.