Experience the grid in high fidelity. We utilize React Three Fiber to render interactive 3D environments that provide X-Ray vision into critical assets like Transformers and Electrical Panels.
| Cinematic Landing Experience | X-Ray Digital Twin |
|---|---|
 |
 |
| WebGL-powered Parallax Environment | Real-time Internal Component Inspection |
A unified dashboard built with Glassmorphism aesthetics. It aggregates live telemetry data, visualizes consumption density via Heatmaps, and tracks financial metrics in real-time.
| Live Dashboard | Energy Heatmap |
|---|---|
 |
 |
| Real-time Telemetry & Status | Geospatial Consumption Density |
GridSense integrates a Python Microservice (Flask + Scikit-Learn) to perform Z-Score Anomaly Detection and Time-Series Energy Forecasting.
| Cost Breakdown | AI-Driven Forecast |
|---|---|
 |
 |
| Tiered Tariff Analysis (NREL API) | Predictive Modeling with Confidence Intervals |
Bridging the gap to the field. Security modules detect cyber-physical threats, while the built-in QR Scanner allows maintenance crews to access asset history on-site.
| Cyber-Physical Security | field Operations |
|---|---|
 |
 |
| Real-time Anomaly Alerts | Mobile-First Asset Scanning |
GridSense is built on a robust MERN + Python Hybrid Architecture.
| Category | Technologies Used |
|---|---|
| Frontend | React.js 18, Tailwind CSS, Framer Motion, Recharts |
| 3D Engine | Three.js, React Three Fiber (R3F), Drei, Post-Processing |
| Backend | Node.js, Express.js, REST API |
| Database | MongoDB Atlas (NoSQL), Firebase Authentication |
| AI / ML | Python 3.9, Flask, Pandas, NumPy, Scikit-Learn |
| Services | Stripe API (Payments), NREL API (Energy Rates), Nodemailer |
| DevOps | Git, GitHub, Vercel/Render (Deployment Ready) |
A detailed look at the project's hybrid microservices structure.
gridsense/
├── ml-server/ # 🧠 Python AI Microservice
│ ├── app.py # Flask Gateway (Port 5000)
│ ├── forecasting_model.py # Time-Series Logic
│ └── anomaly_detection.py # Z-Score Algorithms
├── server/ # 🌐 Node.js Backend API
│ ├── models/ # Mongoose Schemas (User, Ticket, Reading)
│ ├── routes/ # API Endpoints (/api/auth, /api/forecast)
│ └── index.js # Server Entry (Port 3000)
├── src/ # ⚛️ React Frontend
│ ├── components/
│ │ ├── 3D/ # GLB Models & R3F Scenes
│ │ ├── Dashboard/ # Analytics Widgets
│ │ └── Layout/ # UI Components (Sidebar, Navbar)
│ ├── pages/ # Route Views (Dashboard, Cost, Security)
│ └── context/ # Global State (Auth, Theme)
└── pictures/ # Project Media AssetsFollow these steps to deploy the GridSense ecosystem locally.
git clone https://github.com/ankit-basu/gridsense.git
cd gridsense# Install dependencies for React and Express
npm install# Navigate to ML folder
cd ml-server
# Create virtual environment (optional but recommended)
python -m venv venv
# Windows: .\venv\Scripts\activate
# Mac/Linux: source venv/bin/activate
# Install Python requirements
pip install -r requirements.txtYou will need generally 3 terminals running:
Terminal 1 (React Frontend)
npm run devTerminal 2 (Node Backend)
npm run serverTerminal 3 (Python AI)
cd ml-server
python app.py
