🚀 FocusForge

FocusForge is an innovative Chrome extension and web application designed to transform productivity tracking.

Powered by advanced AI models (DistilBERT and BART via Hugging Face), it intelligently classifies your browsing activities as productive or unproductive, offering real-time insights to optimize your workflow.

With a sleek, futuristic React dashboard featuring glassmorphism and neon gradients, FocusForge empowers students, professionals, and anyone seeking to maximize efficiency.

---

🌟 Features

• 🔍 AI-Driven Activity Classification
  Utilizes DistilBERT for text classification and BART for zero-shot activity typing (e.g., Studying, Coding, Meetings) with high precision.

• ⏱️ Real-Time Tracking
  Automatically logs browser activity via the Chrome extension and syncs data with a MongoDB backend through RESTful APIs.

• 📊 Futuristic Dashboard
  A responsive React dashboard (coming soon) with circular progress bars, heatmaps, bar charts, and productivity streaks.

• 💡 Motivational Tips
  Provides personalized, AI-generated suggestions to maintain focus and motivation.

• ⚙️ Seamless Setup
  Install the extension and start tracking with minimal configuration.

• 🔐 Secure Authentication
  Implements JWT-based authentication for secure user data management.

• 🖼️ Screenshot Analysis
  Captures and processes screenshots (e.g., Google Meet sessions) to enhance classification accuracy.

---

🛠 Tech Stack

Layer	Technologies
Frontend	React, Tailwind CSS, Framer Motion
Backend	Node.js, Express.js, MongoDB
AI/ML	Hugging Face (DistilBERT, BART)
Tools	Chrome Extension APIs, Axios, JWT, Vite

---

🔧 Installation

Prerequisites

• Node.js (v16+)
• MongoDB (local/cloud)
• Hugging Face API token
• Chrome browser

---

Backend Setup

-git clone https://github.com/your-username/focusforge.git -cd focusforge/backend -npm install

Create a .env file in the backend directory with:

-PORT=5000 -MONGO_URI=your_mongodb_connection_string -JWT_SECRET=your_jwt_secret -HUGGING_FACE_TOKEN=your_hugging_face_token -Start the server:

-npm start

---

Frontend Setup

cd ../frontend npm install npm run dev

Chrome Extension Setup

cd ../extension Open Chrome and go to chrome://extensions/

Enable Developer Mode

Click Load unpacked

Select the extension/ folder

Make sure the backend is running to enable syncing.

🧠 Usage Install the Extension Load manually or install from the Chrome Web Store (link coming soon).

Create an Account Register through the popup and log in to begin tracking.

Browse Naturally The extension analyzes text, URLs, and screenshots in real-time.

View Analytics Visit the dashboard at http://localhost:5173 for productivity visualizations:

Heatmaps

Activity streaks

Hourly data

🖼️ Screenshots

--- --- --- --- ---

🤝 Contributing Pull requests are welcome!

-Fork the repo

-Create a feature branch:

-git checkout -b feature/your-feature

-Commit changes:

-git commit -m "Add new feature"

-Push and open a PR

Please follow the coding standards and include tests when applicable.

📜 License This project is licensed under the MIT License. See the LICENSE file for details.

👤 Author Raja Abrar Khan 📧 abrarkhan778008@gmail.com

✅ TODOs

-Add deployed link once hosted -Add dashboard screenshots -Improve error handling in backend