All projects
IoT & DashboardsFrontend Developer

Real Time Gas Monitoring

A real time gas monitoring application for tracking volume of gases consumed and distributed across different facilities, generating of reports

Tech Stack

NextJSTSRedux Toolkit QueryTailwindCSSShadcn UIIOTWebSocketChartJSMicrosoft SAML

The Problem

Gas distributors needed a reliable way to get real, up-to-date readings from the gas stations through to their various distribution channels. Without live visibility, volumes consumed and distributed across facilities had to be reconciled after the fact, leaving operators blind to what was actually happening on the ground in real time.

My Role

I led the frontend, building the dashboard that surfaces live station data and turning the raw IoT/WebSocket stream into readable, monitorable views and reports for operators.

Key Technical Decision

Live sensor readings arrive continuously over WebSocket, so the challenge was rendering them into ChartJS without the UI stuttering as new points streamed in. I kept the socket layer decoupled from the charts and fed updates through Redux Toolkit Query so the visualizations stayed smooth under a constant flow of data.

Outcome

The platform is live at web.tetracorehub.com, giving operators a single dashboard to monitor gas volumes across facilities in real time and generate reports from the same data.