WattWise AI – Smart Energy Optimization Dashboard

A full-stack AI-powered Smart Energy Optimization Dashboard designed to help users monitor electricity usage, optimize energy consumption intelligently, and receive smart recommendations to reduce power usage.

WattWise AI provides real-time analytics, AI-driven optimization, notification alerts, device monitoring, and an interactive dashboard experience.

---

Live Demo

https://watt-wise-ai.vercel.app

---

Features

Authentication System

• User Login Interface
• Session-based access
• Clean and responsive login page

Smart Device Energy Monitoring

• Add devices dynamically
• Delete devices instantly
• Monitor individual device usage
• Real-time device tracking

Analytics Dashboard

• Energy usage visualization
• Interactive Bar Charts
• Pie Chart Analytics
• Monthly energy cost estimation
• Energy savings calculation
• Peak usage time prediction

AI Optimization Engine

• Automatically detects highest energy-consuming device
• AI reduces highest usage device consumption by optimized percentage
• Smart AI recommendation generation
• Optimized energy usage visualization

Smart Notifications

• Firebase Cloud Messaging integration
• Browser notification support
• User permission-based alerts
• Real-time notification delivery

UI Features

• Dark Mode
• Light Mode
• Fully Responsive UI
• Mobile Friendly Design
• Smooth user experience

Cloud Deployment

• Frontend deployed on Vercel
• Backend deployed on Render
• MongoDB Atlas Cloud Database

---

Tech Stack

Frontend

• React.js
• Vite
• Axios
• Recharts
• Firebase Messaging
• Tailwind CSS

Backend

• Node.js
• Express.js
• MongoDB Atlas
• Mongoose

Deployment Platforms

• Vercel (Frontend)
• Render (Backend)

Additional Services

• Firebase Cloud Messaging
• MongoDB Atlas

---

AI Optimization Workflow

WattWise AI intelligently:

1. Detects highest energy-consuming device
2. Applies optimization logic
3. Reduces excessive usage automatically
4. Calculates optimized total consumption
5. Generates AI recommendations
6. Displays savings analytics

---

Project Structure

WattWise-AI/
│
├── client/
│   ├── src/
│   │   ├── App.jsx
│   │   ├── firebase.js
│   │
│   ├── public/
│   │   └── firebase-messaging-sw.js
│
├── server/
│   ├── server.js
│   └── .env
│
└── README.md

---

Installation

Clone Repository

git clone https://github.com/PrarthanaD-cloud/WattWise-AI.git

Move into project:

cd WattWise-AI

---

Frontend Setup

cd client

npm install

npm run dev

---

Backend Setup

cd server

npm install

npm start

---

Environment Variables

Create .env inside server folder:

MONGO_URI=your_mongodb_connection_string

PORT=5000

---

Firebase Setup

1. Create Firebase Project
2. Enable Cloud Messaging
3. Generate VAPID Key
4. Add Firebase configuration
5. Enable browser notifications

---

Future Improvements

• Smart scheduling system
• Energy prediction using Machine Learning
• Device categorization
• User profile management
• Email alert integration
• Weekly energy reports
• Multi-user support
• IoT device integration

---

Developed By

Prarthana D

Computer Science Engineering Student

Passionate about AI, Full Stack Development, and Smart Energy Solutions.

---

Support

If you like this project:

⭐ Star this repository

⭐ Share feedback

⭐ Contribute improvements

---

License

This project is developed for educational and innovation purposes.

---

⚡ WattWise AI

"Smarter Energy. Smarter Future."