ROP

ROP

React js
Node js
Express js
⭐ Featured Project

🛠️ Project Overview

This Industrial Performance Dashboard is a sophisticated, enterprise-grade web application designed for high-stakes industrial monitoring. It provides engineering teams with real-time insights and data-driven recommendations to optimize complex mechanical processes. The platform bridges the gap between raw edge-device telemetry and actionable operational intelligence by combining low-latency data streaming with advanced ML modeling.

🌟 Key Features

  • Real-Time Telemetry Streaming: Instant visualization of active process parameters and sensor data via WebSockets.
  • ML-Powered Forecasting: Simultaneous execution of multiple Machine Learning models (XGBoost, Random Forest, Artificial Neural Networks) to predict performance metrics.
  • Automated Parameter Optimization: A dedicated optimization engine that calculates ideal mechanical setpoints to maximize efficiency within defined safety and operational constraints.
  • Hybrid Data Ingestion: Support for both live industrial sensor streams and historical dataset analysis.
  • Project & Session Management: Full-featured user authentication and project persistence for tracking diverse industrial operations.

🏗️ Technical Architecture

The system is built on a high-performance microservices architecture, engineered for scalability and sub-second latency.

The Stack

  • Frontend: React, Vite, Zustand (State Management), ECharts (Data Visualization), Tailwind CSS.
  • API Gateway: Kong Gateway (Traffic routing & security).
  • Backend (Management): Node.js, Express, Prisma ORM, PostgreSQL.
  • Machine Learning Service: Python, FastAPI, XGBoost, Scikit-Learn, MLflow.
  • Big Data Storage: Snowflake (Time-series telemetry storage).

🔄 High-Level Workflow

2026-03-31 10 26 41.png


🚀 Technical Deep Dive

1. High-Frequency Real-Time Pipelines

Standard industrial sensors often emit telemetry at sub-second intervals. I implemented a bi-directional WebSocket protocol between the client and the analytical service. This allows for:

  • Zero-Overhead Streaming: Data frames are pushed without the latency of repeated HTTP handshakes.
  • Asynchronous Feedback: While the system streams data up, the ML service independently triggers optimization calculations and pushes "recommendation packets" back to the UI only when a computation finishes.

2. Atomic Performance with Zustand

Handling 60fps chart updates alongside complex UI state (modals, forms, sidebars) often leads to interface lag. I utilized Zustand to decouple data ingestion from UI rendering. By subscribing components to atomic slices of state, the dashboard updates smoothly without triggering unnecessary re-renders in the administrative layers.

3. Dual-Database Strategy

We handle two distinct data profiles:

  • Relational Data: User profiles, encrypted credentials, and session metadata are stored in PostgreSQL for ACID compliance.
  • Analytical Data: High-volume time-series telemetry (millions of rows per asset) is offloaded to Snowflake. This prevents primary database lockups and enables the ML service to pull massive historical training horizons instantly.

🖥️ User Experience & Interface

The dashboard is designed for high-stress operational environments where clarity and speed are paramount.

  • Unified Monitoring: A "Single Pane of Glass" view comparing Actual Performance vs. Predicted Metrics in real-time.
  • Dynamic Constraints: Operators can set safety bounds for controllable parameters and toggle Auto-Optimization, letting the engine dynamically suggest optimal setpoints.
  • Granular History: A comprehensive history viewer that allows users to drill down into past sessions, comparing predictive accuracy across different time intervals.

📈 Impact & Results

  • Optimized Performance: Provides immediate feedback to operators, potentially reducing downtime and operational costs.
  • Model Transparency: By displaying confidence scores and error metrics (R², RMSE) alongside predictions, the system builds operator trust in the AI-driven forecasts.
  • Scalable Foundation: The microservice-first approach allows for the addition of new models (e.g., PyTorch-based Deep Learning) without disrupting the existing pipeline.

[!TIP] This project demonstrates my ability to build complex, full-stack industrial applications that integrate Real-Time Data Science, Microservices Architecture, and High-Performance Frontend Engineering.