🌟 GitHub Tracker

Track and analyze GitHub user activity in real time.

Monitor repositories, commits, pull requests, issues, and contribution trends through a clean and intuitive dashboard.

Built for developers, maintainers, recruiters, and open-source enthusiasts.

---

📚 Table of Contents

• 📖 About the Project
• 🌐 Live Demo
• 📸 Screenshots
• ✨ Features
• 🛠️ Tech Stack
• 🏗️ Project Architecture
• 📂 Folder Structure
• 🚀 Getting Started
• 🔐 Environment Variables
• ▶️ Running the Project
• 🔌 API Endpoints
• 🧪 Testing
• 🛠️ Troubleshooting
• 🤝 Contributing
• 📜 Code of Conduct
• 👨‍💻 Maintainers
• 🏆 GSSoC Information
• 🗺️ Roadmap
• ❓ FAQ
• 📄 License
• 📈 Star History
• 💖 Contributors
• ⭐ Support the Project

📖 About the Project

GitHub Tracker is a full-stack web application that helps users monitor and analyze GitHub activity in real time. Simply enter a GitHub username to explore repositories, commits, pull requests, issues, contribution trends, and other useful developer insights.

The project is designed for:

• 👨‍💻 Developers tracking their open-source contributions
• 👥 Maintainers reviewing contributor activity
• 🧑‍💼 Recruiters evaluating public GitHub profiles
• 📊 Teams analyzing repository engagement and productivity
• 🌍 Open-source enthusiasts exploring developer metrics

By combining a modern frontend with a robust backend and GitHub API integration, GitHub Tracker presents actionable insights through a clean and intuitive dashboard.

---

🌐 Live Demo

🚀 Explore the application here:

You can use the live demo to:

• Search for any public GitHub user
• View repository and contribution metrics
• Explore commits, pull requests, and issues
• Analyze development activity trends

📸 Screenshots

---

✨ Features

🔍 User Search & Profile Insights

• Search for any public GitHub username
• View profile details such as bio, avatar, followers, following, and repositories
• Access account statistics and contribution summaries

📁 Repository Analytics

• Browse all public repositories
• View stars, forks, watchers, and open issues
• Analyze repository popularity and activity

📈 Contribution Tracking

• Track commits, pull requests, and issues
• Monitor contribution trends over time
• Identify recent development activity

⚡ Real-Time Data Fetching

• Fetch live data from the GitHub API
• Fast and responsive interface with optimized API requests

📊 Interactive Dashboard

• Clean and intuitive UI
• Visual representation of key metrics
• Responsive design for desktop and mobile

🔒 Robust Backend

• Node.js and Express-based API layer
• Secure authentication-ready architecture
• Organized routes and services

🧪 Testing Support

• Backend unit and integration testing with Jasmine
• Reliable and maintainable codebase

🌍 Open Source Friendly

• Beginner-friendly issues and contribution guidelines
• Active community support for GSSoC and first-time contributors

---

🛠️ Tech Stack

Frontend

• ⚛️ React.js
• ⚡ Vite
• 🎨 Tailwind CSS
• 🧩 Material UI

Backend

• 🟢 Node.js
• 🚂 Express.js

Data Fetching & State Management

• 📡 Axios
• 🔄 React Query

Database & Authentication

• 🍃 MongoDB
• 🔐 Passport.js
• 🔑 bcryptjs
• 🗂️ Express Session

Testing

• 🧪 Jasmine
• 🔍 Supertest

APIs

• 🐙 GitHub REST API

🏗️ Project Architecture

GitHub Tracker follows a full-stack client-server architecture.

┌──────────────────────┐
│      Frontend        │
│ React + Vite         │
│ Tailwind + MUI       │
└─────────┬────────────┘
          │ HTTP Requests
          ▼
┌──────────────────────┐
│      Backend         │
│ Node.js + Express    │
│ REST API             │
└─────────┬────────────┘
          │
          ├── GitHub REST API
          └── MongoDB (optional authentication/data storage)

🧩 Architectural Components

Frontend (Client)

• User interface built with React and Vite
• Responsive styling with Tailwind CSS and Material UI
• Data fetching and caching with React Query
• Interactive charts and metrics display

Backend (Server)

• RESTful API built with Node.js and Express
• Authentication support with Passport.js
• Session management using Express Session
• Business logic and API integrations

External Services

• GitHub REST API for real-time public repository and user data

Database (Optional)

• MongoDB for user accounts, saved searches, and session persistence

🎯 Why This Architecture?

• Clear separation of frontend and backend responsibilities
• Scalable and maintainable codebase
• Easy to test and extend
• Supports future features such as saved reports, authentication, and analytics history

📂 Folder Structure

github_tracker/
├── client/                     # Frontend application (React + Vite)
│   ├── public/                 # Static assets
│   │   ├── crl.png             # Project logo
│   │   └── screenshots/        # README screenshots
│   ├── src/
│   │   ├── assets/             # Images, icons, fonts
│   │   ├── components/         # Reusable UI components
│   │   ├── pages/              # Application pages
│   │   ├── hooks/              # Custom React hooks
│   │   ├── services/           # API calls and utilities
│   │   ├── context/            # Context providers
│   │   ├── App.jsx             # Root component
│   │   └── main.jsx            # Entry point
│   ├── package.json
│   └── vite.config.js
│
├── server/                     # Backend application (Node.js + Express)
│   ├── config/                 # Database and Passport configuration
│   ├── controllers/            # Route controllers
│   ├── middleware/             # Custom middleware
│   ├── models/                 # Database models
│   ├── routes/                 # API routes
│   ├── services/               # External API integrations
│   ├── spec/                   # Jasmine unit & integration tests
│   ├── app.js                  # Express application
│   ├── server.js               # Server entry point
│   └── package.json
│
├── .github/
│   ├── ISSUE_TEMPLATE/         # Issue templates
│   ├── workflows/              # GitHub Actions CI/CD workflows
│   └── pull_request_template.md
│
├── .env.example                # Example environment variables
├── .gitignore
├── LICENSE
├── README.md
└── package.json                # Optional root workspace config

🚀 Getting Started

Follow these steps to set up GitHub Tracker on your local machine.

📋 Prerequisites

Make sure the following tools are installed:

• :contentReference[oaicite:0]{index=0} (v18 or higher recommended)
• :contentReference[oaicite:1]{index=1} (comes with Node.js)
• :contentReference[oaicite:2]{index=2}
• :contentReference[oaicite:3]{index=3} (required if authentication and persistence are enabled)

📥 Clone the Repository

git clone https://github.com/GitMetricsLab/github_tracker.git
cd github_tracker

📦 Install Dependencies

This project contains separate frontend and backend applications.

# Install frontend dependencies
cd client
npm install

# Install backend dependencies
cd ../server
npm install

# Return to the project root
cd...

🔐 Configure Environment Variables

Create a .env file in the server/ directory and add the required environment variables.

cd server
cp .env.example .env

If .env.example is not available, create a new .env file manually.

You will configure the required variables in the next section: Environment Variables.

🔐 Environment Variables

Create a .env file inside the server/ directory and configure the following variables:

# Server Configuration
PORT=5000
NODE_ENV=development

# Database
MONGODB_URI=mongodb://127.0.0.1:27017/github_tracker

# Session Secret
SESSION_SECRET=your_super_secret_key

# GitHub API (Optional but Recommended)
GITHUB_TOKEN=your_github_personal_access_token

📝 Variable Descriptions

Variable	Description
PORT	Port on which the backend server will run
NODE_ENV	Application environment (development or production)
MONGODB_URI	MongoDB connection string
SESSION_SECRET	Secret key used to sign sessions
GITHUB_TOKEN	Personal Access Token to increase GitHub API rate limits

🔑 Creating a GitHub Token

1. Go to https://github.com/settings/tokens
2. Click Generate new token
3. Select the required scopes (public data access is usually sufficient)
4. Copy the token and add it to your .env file

⚠️ Never commit your .env file or expose secret keys publicly.

---

▶️ Running the Project

1️⃣ Start the Backend Server

cd server
npm start

The backend will typically run at:

http://localhost:5000

2️⃣ Start the Frontend Development Server

Open a new terminal and run:

cd client
npm run dev

The frontend will typically run at:

http://localhost:5173

3️⃣ Open the Application

Open your browser and visit:

http://localhost:5173

✅ Verify Everything Is Working

• ✅ Frontend loads without errors
• ✅ Backend starts successfully
• ✅ MongoDB connects successfully
• ✅ GitHub user search returns live data
• ✅ No environment variable warnings appear

👨‍💻 Project Admins / Maintainers

Mehul Prajapati Project Admin & Maintainer

---

📄 License

This project is licensed under the MIT License.

See the LICENSE file for complete details.

---

📈 Star History

---

💖 Contributors

We are grateful to all the amazing contributors who have helped build and improve this project 🚀

Thanks for making GitHub Tracker better with every contribution!

🙌 How to Become a Contributor

We welcome all contributors, especially from :contentReference[oaicite:0]{index=0} (GSSoC)!

To contribute:

1. Fork the repository
2. Create a new branch
3. Make your changes
4. Submit a pull request

⭐ Don’t forget to star the repository if you find it useful!