Back to All Projects
CompanySyntax GenieYear: 2024

Thermal Transformer Diagnostics — Industrial Asset & Thermal Inspection System

Industrial asset tracking, thermal canvas annotations, & DGA oil analysis platform

React 19TypeScriptVite 7Redux ToolkitRTK QueryKonvaReact-KonvaBootstrap 5SCSS ModulesReact Hook FormZodReact Router v7
Live Website
Thermal Transformer Diagnostics — Industrial Asset & Thermal Inspection System screenshot preview

Overview

Thermal Transformer Diagnostics is an enterprise-grade industrial monitoring and inspection platform designed for high-voltage transformer asset tracking across regional electrical utility grids.

The system combines HTML5 Canvas-based thermal image annotation with automated oil Dissolved Gas Analysis (DGA) digital workflows, allowing engineers and technicians to detect critical insulation anomalies and track degradation over time.

Key Engineering Contributions

01

Engineered the Frontend UI implementation and seamless API integration using React 19, TypeScript, and RTK Query for real-time asset tracking, inspection workflows, and health monitoring of high-voltage transformers across regional networks.

02

Engineered an interactive canvas annotation tool using Konva / React-Konva for side-by-side thermal image analysis, allowing engineers to annotate fault bounding boxes, adjust aspect ratios, and perform AI human review verdicts.

03

Developed complex multi-step digital inspection and oil analysis forms using React Hook Form and Zod schema validation, ensuring strict data integrity for electrical, physical, and Dissolved Gas Analysis (DGA) parameters.

04

Designed and integrated a centralized RTK Query API state management layer featuring automated JWT bearer token injection, global error transformations, tag-based cache invalidation, and optimistic UI updates for seamless data fetching.

05

Implemented multi-tier Role-Based Access Control (RBAC) across Admin, Engineer, and Technician roles with dynamic route guards, regional filter panels (CSC/Feeder/Branch), and PDF inspection report generation pipelines.

Technical Skill Groups

Frontend Core

React 19TypeScript 5.9HTML5 Canvas / KonvaVite 7SCSS ModulesBootstrap 5

State & Data Fetching

Redux ToolkitRTK QueryNormalized API CachingRESTful APIs

Forms & Security

React Hook FormZod Schema ValidationRBACJWT Authentication

Domain

Industrial IoT DashboardsThermal Image DiagnosticsAsset Lifecycle Management

Key Features

Industrial asset tracking
Transformer health monitoring
Thermal image analysis
Canvas annotations
Fault bounding boxes
AI-assisted human review
Multi-step inspection workflows
Oil analysis
DGA data validation
RTK Query architecture
JWT authentication
RBAC
Regional filtering
PDF report generation

Engineering Impact

Delivered high-performance architecture, optimized state management, and reliable offline/real-time integrations enforcing strict compliance, role-based security, and domain data integrity across all operational environments.

Project Snapshot

CategoryCompany
CompanySyntax Genie
Year2024
Features14 Items
View Live Demo

Top Feature Highlights

  • 1Industrial asset tracking
  • 2Transformer health monitoring
  • 3Thermal image analysis
  • 4Canvas annotations
  • 5Fault bounding boxes

Technologies Used

React 19TypeScriptVite 7Redux ToolkitRTK QueryKonvaReact-KonvaBootstrap 5SCSS ModulesReact Hook FormZodReact Router v7
Previous ProjectOversight EMS — AI-Powered Energy Intelligence & Telemetry Platform
Back to All Projects
Next ProjectRemote Monitoring Platform — Multi-Vendor Solar Fleet & Smart Grid Management System