Skip to main content
The Predictive Maintenance Dashboard is a React-based web application that provides real-time monitoring of industrial asset health. Built with modern glassmorphism design, it offers operators and engineers a comprehensive view of sensor data, anomaly detection, and system health.

​
Live Demo

The dashboard is deployed on Vercel and accessible at:

Production Dashboard

Live monitoring dashboard with real-time updates from the Render-hosted backend

​
Key Features

Real-Time Updates

3-second polling interval fetches latest sensor data, health scores, and anomaly status

Glassmorphism Design

Modern dark theme with frosted glass cards, smooth animations, and color-coded risk levels

STATUS: LIVE Badge

Green indicator in the header confirms active backend connection and data streaming

60-Second Buffer

Streaming chart displays a sliding 60-second window of sensor telemetry with fixed Y-axis domains

​
Dashboard Layout

The interface is divided into two columns:

​
Left Column (Data Visualization)

  • System Control Panel — State management and demo lifecycle controls
  • Status Cards (4 across) — Health Score, Vibration, Voltage, Current with baseline targets
  • Streaming Chart — Multi-signal telemetry with anomaly shading
  • Log Watcher — Real-time event feed with state machine transitions

​
Right Column (Analysis & Controls)

  • Health Summary — Health score ring (0-100) with color-coded risk level
  • Insight Panel — Batch-feature explanations for anomalies
  • Operator Log — Maintenance event logging form
  • Performance Card — ML model validation metrics
  • Download Reports — PDF and Excel export buttons
  • What-If Analysis — Sandbox modal for scenario testing

​
Connection Status

The STATUS: LIVE badge in the header turns green when the backend health check (/health) succeeds. If the backend is unreachable, the badge turns gray and displays “OFFLINE”.

​
Keep-Alive Heartbeat

To prevent Render Free Tier cold starts, the dashboard automatically pings the backend every 10 minutes via the /ping endpoint. This ensures the backend container stays warm and responsive. 
const KEEPALIVE_INTERVAL = 10 * 60 * 1000  // 10 minutes

​
Technology Stack

ComponentTechnology
FrameworkReact 18 + Vite
ChartingRecharts
StylingCSS Modules
DeploymentVercel
BackendFastAPI on Render

​
Deployment

The frontend is deployed to Vercel with automatic proxy routing to the backend: 
{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://predictive-maintenance-uhlb.onrender.com/api/:path*"
    },
    {
      "source": "/health",
      "destination": "https://predictive-maintenance-uhlb.onrender.com/health"
    },
    {
      "source": "/ping",
      "destination": "https://predictive-maintenance-uhlb.onrender.com/ping"
    }
  ]
}

​
Next Steps

Metrics Display

Learn about the sensor metrics and health scoring system

System Controls

Explore calibration, fault injection, and system reset features

Operator Logs

Understand maintenance event logging for ML training

Build docs developers (and LLMs) love

Get started for freeTalk to us