A sustainability-focused application that monitors your digital carbon footprint across browser and system activities. Track your energy consumption, earn rewards for eco-friendly behavior, and get AI-powered tips to reduce your environmental impact.

• ✅ Real-time Energy Monitoring - Track CPU, memory, and power consumption (in watts/milliwatts)
• ✅ AI-Powered Tips - Get personalized sustainability recommendations via OpenAI integration
• ✅ AI Chatbot - Interactive chat with context-aware responses about your system usage
• ✅ Gamification System - Earn "leaves" (currency) for eco-friendly behavior
• ✅ Challenges - Complete sustainability challenges like "Touch Grass" and "Low-Carbon Life"
• ✅ History & Analytics - View historical data with interactive charts (powered by Recharts)
• ✅ Process Management - Kill energy-hungry apps and tabs directly from the dashboard
• ✅ Chrome Extension - Monitor tabs with a popup UI showing mood-based system status
• ✅ Tab & App Tracking - See which apps/tabs are consuming the most energy

SwampSaver consists of three integrated components:

• Port: 8000
• Framework: FastAPI with uvicorn
• Routes:
  • GET /stats - Returns system stats, apps, tabs, history, and AI tips
  • POST /update-tabs - Receives tab data from Chrome extension
  • GET /extension-poll - Extension polls for pending actions (tab kills)
  • POST /kill-process - Terminates a process by PID
  • POST /kill-tab - Queues a tab to be closed by the extension
  • GET /leaves - Returns current leaf count
  • POST /bank-leaves - Adds leaves to your balance
  • POST /chat - AI chatbot endpoint with context-aware responses
  • GET /challenges - Returns current challenge status
  • POST /reset-challenge - Reset a specific challenge

• Manifest V3 compliant
• Popup UI with mood-based status indicators (happy/concerned/mad)
• Monitors tab changes and open tab count
• Sends tab data to backend via POST /update-tabs
• Polls for and executes tab kill commands
• Quick access "Open Dashboard" button

• Dashboard - Real-time stats, AI tips, app/tab management, chatbot
• Challenges Page - View and complete sustainability challenges
• History Page - Interactive charts for energy tracking over time
• Styled with custom CSS (dark theme with accent colors)
• Polls backend every 3 seconds for live updates

• Python 3.8+
• Node.js 16+
• Chrome browser
• OpenAI API key (for AI features)

cd backend

# Create virtual environment
python3 -m venv venv

# Activate virtual environment
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

# Create .env file with your OpenAI API key
echo "OPENAI_API_KEY=your_api_key_here" > .env

# Run the server
python app.py

cd backend

# Create virtual environment
python -m venv venv

# Activate virtual environment
venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Create .env file with your OpenAI API key
echo OPENAI_API_KEY=your_api_key_here > .env

# Run the server
python app.py

The FastAPI server will start on http://localhost:8000

cd frontend
npm install
npm start

The React app will open on http://localhost:3000

1. Open Chrome and go to chrome://extensions/
2. Enable "Developer mode" (top right)
3. Click "Load unpacked"
4. Select the /extension folder
5. The extension will appear in your Chrome toolbar
6. Click the extension icon to see the popup with real-time stats

┌─────────────────────────┐
│   Chrome Extension      │
│   (background.js)       │
│                         │
│ Monitors tab changes    │──POST /update-tabs──┐
│ Counts open tabs        │                     │
│ Polls for tab kills     │◄─GET /extension-poll│
│ Shows popup UI          │                     │
└─────────────────────────┘                     │
                                                ▼
                          ┌─────────────────────────┐
                          │  FastAPI Backend        │
                          │  (app.py)               │
                          │  Port: 8000             │
                          │                         │
                          │ ⚡ System monitoring    │
                          │ 🤖 OpenAI integration   │
                          │ 🎮 Challenge tracking   │
                          │ 🍃 Leaf currency system │
                          └─────────────────────────┘
                                    ▲
                                    │
                               GET /stats
                            (poll every 3s)
                                    │
                          ┌─────────────────────────┐
                          │  React Frontend         │
                          │  Port: 3000             │
                          │                         │
                          │ 📊 Dashboard            │
                          │ 📈 History charts       │
                          │ 🏆 Challenges           │
                          │ 💬 AI Chatbot           │
                          └─────────────────────────┘

Earn leaves by maintaining low energy consumption. The formula:

Leaves = ((Baseline - Current) / 1000) × minutes

• The Low-Carbon Life - Keep system draw below 32560 mW
• Touch Grass - Stay idle for 15+ minutes (auto-detected)
• Night Mode Master - Keep watts < 25W for 30 minutes
• Energy Efficiency Champion - Reduce energy by 50% for 1 hour

SwampSaver/
├── backend/
│   ├── app.py              # FastAPI server (main application)
│   ├── ai_tips.py          # AI tip generation utilities
│   ├── coins.txt           # Persistent leaf storage
│   ├── requirements.txt    # Python dependencies
│   └── .env                # Environment variables (API keys)
├── extension/
│   ├── manifest.json       # Extension configuration (Manifest V3)
│   ├── background.js       # Service worker (tab monitoring)
│   ├── popup.html          # Extension popup UI
│   ├── popup.js            # Popup logic
│   ├── popup.css           # Popup styling
│   └── *.png               # Mood icons (happy, concerned, mad)
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── App.js          # Main dashboard component
│   │   ├── App.css         # Dashboard styles
│   │   ├── Challenges.js   # Challenges page component
│   │   ├── History.js      # History/analytics page
│   │   ├── HistoryManager.js # Data persistence for history
│   │   ├── index.js        # React entry point
│   │   └── index.css       # Global styles
│   └── package.json
└── README.md

Prerequisites:

• Virtual environment activated in backend directory
• OpenAI API key configured in .env
• Backend running on http://localhost:8000
• Frontend running on http://localhost:3000
• Chrome extension loaded in developer mode

Steps:

1. Start the FastAPI backend (see Backend Setup above)
2. In a new terminal, start the React frontend (see Frontend Setup above)
3. Load the Chrome extension
4. Open multiple tabs in Chrome
5. Switch between tabs
6. Watch the React dashboard update in real-time
7. Try the AI chatbot - ask about your energy usage
8. Check the Challenges page to see your progress
9. View the History page for energy trends over time

Troubleshooting:

• Backend not connecting? Make sure uvicorn is running on port 8000
• AI tips not working? Verify your OpenAI API key is set in .env
• Port already in use? On macOS, AirPlay may use port 5000. SwampSaver uses port 8000 by default
• Virtual environment issues? Ensure you've activated the venv before running pip install and python app.py
• Extension not updating? Check the extension's service worker in chrome://extensions/ for errors

Backend:

• FastAPI
• uvicorn
• psutil 5.9.5
• openai
• python-dotenv

Frontend:

• React 18.2.0
• React DOM 18.2.0
• Recharts 3.7.0

Extension:

• Vanilla JavaScript
• Chrome Manifest V3 APIs

Create a .env file in the /backend directory:

OPENAI_API_KEY=your_openai_api_key_here

Built with ❤️ for the SwampHacks hackathon 🐊