Skip to content

Rupesh4604/ProdHub

Repository files navigation

ProdHub: Empowering Your Productivity

Take control of your growth—professionally, personally, and daily.
ProdHub is a modern, all-in-one web application built to help you organize, achieve, and grow. Seamlessly manage projects, tasks, habits, and your calendar from a single, intuitive platform—all with smart AI-powered features and robust security.

Try ProdHub Now
🌐 Web App: https://my-productivity-hub-5a3ba.web.app/
🧩 Chrome Extension: ProdHub on the Chrome Web Store (coming soon)

ProdHub


Key Features

Dashboard Overview

Get a snapshot of your productivity: overdue tasks, upcoming deadlines, and overall progress all at a glance. With the AI Daily Planner, you can get a prioritized and motivational schedule for your day with a single click.

AI-Powered Goal Decomposition

Don't just manage projects; create them with purpose. Give the AI Goal Planner a high-level goal like "Learn web development," and it will intelligently break it down into a structured plan with multiple sub-projects and all the necessary tasks, neatly organized in your sidebar.

Hierarchical Project Management

Track everything from courses and conferences to personal projects. Projects can be created manually or generated by the AI as part of a larger goal. Each project gets its own page with a dynamic progress bar that updates as you complete tasks.

Task Management

Break down projects into actionable steps. Set priorities (High, Medium, Low), assign due dates, and check off completed tasks with ease.

Advanced AI-Powered Planning (Gemini API Integrated)

ProdHub uses the Google Gemini API for smart, context-aware planning:

  • Goal Decomposition: Turns your big ambitions into actionable projects. And with AI generated pre tasks for better understanding.

  • Daily Planning: Creates a prioritized daily schedule based on your tasks and calendar.

    • Smart Scheduling: The "Plan My Day" button on the dashboard will trigger an AI that acts as a productivity coach. It will analyze overdue tasks, today's high-priority items, and your fixed Google Calendar appointments.

    • Actionable Output: Instead of just a list, the AI will generate a suggested schedule with time blocks and priorities. It will be presented in a clean, easy-to-read modal.

    • Context-Aware: If you haven't synced your calendar, the planner will still work with your tasks but will also gently remind you that connecting your calendar can lead to even better plans.

  • Task Generation: Generates intelligent task lists for your projects, using your project title and synced Google Calendar events for context.

Habit Tracker: Build better routines with a full-featured habit tracker. Set daily habits, check them off, and track your consistency and streaks over time. You can easily edit or delete habits as your goals evolve.

Unified Schedule: See all your project deadlines, task due dates (including overdue items), and Google Calendar events beautifully organized in one timeline - no more switching between apps.

Secure Calendar Integration: Sync your Google Calendar securely and privately. ProdHub only reads event information to help you plan and never stores or modifies your calendar data. Your data stays yours.


🧩 Chrome Extension

ProdHub is also available as a Chrome side panel extension, so you can access your full productivity dashboard without leaving your current tab.

Features of the Extension

  • Opens as a side panel — keeps your current tab intact
  • Full access to all ProdHub features: tasks, habits, goals, schedule, and AI planner
  • Responsive UI — compact, mobile-friendly layout optimized for the narrow side panel
  • Secure Google sign-in via Firebase Authentication
  • Real-time sync with your Firestore data across web and extension

Installing the Extension (Development / Unpacked)

  1. Build the extension bundle:

    npm run build:extension

    This runs react-scripts build and then copies manifest.extension.jsonbuild/manifest.json, making the build/ folder a valid Chrome extension package.

  2. Load in Chrome:

    • Open chrome://extensions/ in your browser
    • Toggle Developer mode ON (top right)
    • Click "Load unpacked"
    • Select the build/ folder
  3. Open the side panel:

    • Click the ProdHub icon in your Chrome toolbar
    • The side panel will open. Sign in with Google to get started.

Publishing to the Chrome Web Store

Follow these steps to publish your own instance of the extension:

Step 1 — Prepare & Build

npm run build:extension

Then create a ZIP of the build/ folder contents (not the folder itself — the manifest.json must be at the root of the ZIP):

# PowerShell (Windows)
Compress-Archive -Path .\build\* -DestinationPath prodhub-extension.zip
# macOS / Linux
cd build && zip -r ../prodhub-extension.zip . && cd ..

Important

Verify that manifest.json is at the root of the ZIP (not inside a subfolder). Chrome will reject the package otherwise.

Step 2 — Create a Developer Account

  • Go to the Chrome Developer Dashboard
  • Sign in with your Google account
  • Pay the one-time $5 developer registration fee if this is your first extension

Step 3 — Upload the Extension

  1. Click "New Item" in the dashboard
  2. Drag and drop prodhub-extension.zip into the upload area
  3. Wait for it to process — you will be taken to the listing editor

Step 4 — Complete the Store Listing

Fill in the following required fields:

Field Suggested Value
Name ProdHub – Productivity Side Panel
Short description All-in-one productivity: tasks, habits, goals & AI planner in your Chrome side panel.
Category Productivity
Language English
Screenshots At least 1 screenshot (1280×800 or 640×400 px)
Privacy Policy URL Link to your privacy policy (required if you handle user data)

Note

ProdHub uses Firebase Authentication and Firestore. In the Privacy Practices tab you must declare that your extension collects user authentication data (email, name) stored in Firebase.

Step 5 — Submit for Review

  • Set visibility to Public (or Unlisted for testing)
  • Click "Submit for Review"
  • Review typically takes a few hours to a few days

Extension Manifest Reference

The extension uses manifest_version: 3 with the following key configuration:

{
  "name": "ProdHub Chrome Extension",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["sidePanel", "identity"],
  "side_panel": { "default_path": "index.html" },
  "action": { "default_title": "Open ProdHub Panel" }
}

The extension manifest lives at public/manifest.extension.json and is automatically copied to build/manifest.json by the build:extension script.


Technology

ProdHub is built for speed, reliability, and a great user experience.

  • Frontend: React.js
  • Backend & Database: Firebase (Firestore, Authentication)
  • Styling: Tailwind CSS
  • AI Integration: Google Gemini API
  • Calendar Integration: Google Calendar API via Google Identity Services
  • Extension: Chrome Manifest V3 Side Panel API

Get Started with ProdHub

Follow these steps to run ProdHub locally and customize it for your workflow.

Prerequisites

  • Node.js (v18 or later): Download Here
  • Firebase CLI (install globally):
    npm install -g firebase-tools
  • Google Account (for Firebase and Google Cloud projects)

1. Clone the Repository

git clone https://github.com/Rupesh4604/my-productivity-hub.git
cd my-productivity-hub

2. Install Dependencies

npm install

3. Set Up Firebase

  • Create a Firebase project at the Firebase Console.

  • Enable Firestore: Go to Build > Firestore Database and create a database in Production mode.

  • Update Firestore Rules: In the Rules tab, paste:

    rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /artifacts/{appId}/users/{userId}/{document=**} {
          allow read, write: if request.auth != null && request.auth.uid == userId;
        }
      }
    }
    
  • Enable Authentication: Go to Build > Authentication, click Get Started, and enable Google and Email/Password sign-in.

4. Google Cloud Platform & API Keys

  • Google Calendar:
    Enable the Google Calendar API, configure the OAuth consent screen, and get your Client ID using the project documentation.
  • Gemini API:
    Visit Google AI Studio to create and copy your Gemini API key.

5. Configure Environment Variables

Create a .env.local file in your project root and add:

# FIREBASE CONFIGURATION
REACT_APP_FIREBASE_API_KEY="YOUR_API_KEY"
REACT_APP_FIREBASE_AUTH_DOMAIN="YOUR_AUTH_DOMAIN"
REACT_APP_FIREBASE_PROJECT_ID="YOUR_PROJECT_ID"
REACT_APP_FIREBASE_STORAGE_BUCKET="YOUR_STORAGE_BUCKET"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="YOUR_SENDER_ID"
REACT_APP_FIREBASE_APP_ID="YOUR_APP_ID"

# GOOGLE API KEYS
REACT_APP_GOOGLE_CLIENT_ID="YOUR_GOOGLE_CLIENT_ID"
REACT_APP_GEMINI_API_KEY="YOUR_GEMINI_API_KEY"

Update src/App.js to use these variables for your firebaseConfig.

6. Run and Deploy

Command Description
npm start Start local dev server at http://localhost:3000
npm run build Build production web app
npm run build:extension Build Chrome extension package in build/
firebase deploy Deploy web app to Firebase Hosting

Running with Docker 🐳

This project is fully containerized, allowing you to run it in a consistent and isolated environment with a single command.

Prerequisites

Quick Start

  1. Clone the Repository

    git clone https://github.com/Rupesh4604/my-productivity-hub.git
    cd ProdHub
  2. Create an Environment File Create a file named .env in the root of the project. Copy the contents of .env.local or add the following variables, replacing the placeholder values with your actual credentials:

    REACT_APP_FIREBASE_API_KEY=AIzaSy...
    REACT_APP_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
    REACT_APP_FIREBASE_PROJECT_ID=your-project-id
    REACT_APP_FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
    REACT_APP_FIREBASE_MESSAGING_SENDER_ID=1234567890
    REACT_APP_FIREBASE_APP_ID=1:1234567890:web:abcdef123456
    REACT_APP_GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
    REACT_APP_GEMINI_API_KEY=your-gemini-api-key
  3. Build and Run the Container

    docker-compose up --build
  4. Access the Application Once the container is running, open your browser at http://localhost:3000.
    To stop, press Ctrl + C in your terminal.


Start your journey with ProdHub today.

Our Organization

OpenSourceEnv is a dedicated initiative focused on democratizing access to high-quality education in various domains of technology. Our mission is to provide comprehensive resources that empower learners at all levels to master new skills and technologies. We are committed to fostering an inclusive learning environment where everyone can thrive.

Community Page: OpenSourceEnv Teamspace

Github: https://github.com/openSourceEnv

License

This project is licensed under the MIT License. For details, refer to the LICENSE.md file. You can find terms & conditions and other privacy related details at prodhub-info.

Contact

Created by: Rupesh Kumar Yadav Mediboyina, Email: rupesh32003@gmail.com

LinkedIn: www.linkedin.com/in/mediboyina-rupesh-kumar-yadav-8b7a14205

About

ProdHub is a modern, all-in-one web application built to help you organize, achieve, and grow. Seamlessly manage projects, tasks, habits, and your calendar from a single, intuitive platform - all with smart AI-powered features and robust security.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

 
 
 

Contributors