A real-time IoT monitoring dashboard built with React 17 and Vite, featuring Recharts and Chart.js data visualizations, Firebase Firestore real-time sync, device health monitoring, inventory movement tracking, batch-level cold-chain analytics, and Tailwind CSS responsive design — the operational brain of the AgriSense ecosystem.
Dashboard Capabilities
The Problem
The AgriSense IoT platform generates thousands of temperature, humidity, and location data points from sensors deployed across cold-chain storage facilities. Without a dashboard, this data exists only in database tables — invisible to the warehouse managers, logistics coordinators, and quality control teams who need it most.
Existing IoT dashboards are generic — they show graphs but don't understand the cold-chain context. They can't distinguish between a normal cooling cycle and a spoilage-risk event. They don't track batches, don't predict maintenance needs, and don't correlate device health with data quality.
The Solution
A React-based dashboard purpose-built for cold-chain operations. Firebase Firestore provides real-time data sync — temperature readings, alerts, and device status updates appear within seconds of sensor transmission. Recharts handles time-series visualizations (temperature over time, humidity trends) while Chart.js powers aggregate analytics (spoilage rates, energy consumption).
The dashboard understands cold-chain context: threshold-based alerts color-coded by severity, batch-level tracking from farm to shelf, device health scores that predict maintenance windows, and inventory movement timelines that identify bottlenecks. Every screen is designed for the specific role consuming it.
Features
Tech Stack
Functional components with hooks. Vite for instant HMR during development and optimized production builds. Code splitting by route for fast initial load.
Recharts for composable, interactive time-series charts (LineChart, AreaChart, Brush). Chart.js for aggregate analytics (Doughnut, Radar, Bar). Two libraries, zero overlap.
Firestore real-time listeners for sensor data. Authentication for role-based access. Cloud Messaging for push alerts. Hosting for static dashboard deployment.
Utility-first styling for rapid layout iteration. Custom theme colors matching AgriSense brand. Dark mode support via Tailwind's dark: variant.
Architecture
Temperature, humidity, and gas sensors transmit readings via MQTT to the AgriSense middleware, which writes to Firebase Firestore
Real-time document database with onSnapshot listeners. Collections: devices, readings, batches, alerts, inventory. Sub-second propagation to dashboard
Custom hooks (useFirestore, useDeviceHealth, useBatchTracker) manage subscriptions. Recharts + Chart.js render visualizations. Context API for global state
Cloud Functions evaluate threshold rules on each reading. Triggers in-app notifications (Firestore), push alerts (FCM), and email escalations for critical events
Ecosystem
The backend ML/IoT engine that powers sensor data collection, spoilage prediction, and digital twin simulations. This dashboard is the visual layer for that platform.
FastAPI middleware that processes sensor data, applies ML predictions, and writes results to Firebase. The dashboard reads from the same Firestore collections the middleware populates.
React Native app for field workers — scan QR codes on batches, log observations, receive push alerts. Data syncs with the same Firebase backend the dashboard uses.
Python-based spoilage prediction and anomaly detection. Results surfaced on the dashboard as risk scores, predicted shelf life, and recommended actions for each batch.