---
title: GitHub Activity Feed
emoji: 🚀
colorFrom: blue
colorTo: purple
sdk: streamlit
sdk_version: 1.28.1
app_file: main.py
pinned: false
license: mit
---

# 🚀 GitHub Activity Feed

A beautiful real-time dashboard to monitor your GitHub repository activities! This app combines FastAPI for webhook handling with Streamlit for an elegant user interface.

## ✨ What This App Does

- **📊 Real-time Dashboard**: Beautiful interface showing your GitHub activities
- **📤 Push Tracking**: Monitor code pushes to your repositories  
- **🔄 Pull Request Monitor**: Track PR submissions and merges
- **📈 Activity Statistics**: View daily and total activity counts
- **🎨 Modern UI**: Gradient cards, animations, and responsive design
- **🔄 Auto-refresh**: Updates every 30 seconds automatically

## 🎯 Perfect For

- **Developers** who want to monitor their repository activity
- **Teams** tracking project progress and contributions
- **Project Managers** overseeing development workflows
- **Open Source Maintainers** monitoring community contributions

## 🚀 How to Use

### Step 1: Set Up Your MongoDB Database
1. Create a free [MongoDB Atlas](https://www.mongodb.com/atlas) account
2. Create a new cluster and get your connection string
3. Add the connection string as `MONGODB_URI` in the Spaces secrets

### Step 2: Configure GitHub Webhook
1. Go to your GitHub repository → **Settings** → **Webhooks**
2. Click **Add webhook**
3. Set **Payload URL** to: `https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME/webhook`
4. Set **Content type** to: `application/json`
5. Select events: **Pushes** and **Pull requests**
6. Click **Add webhook**

### Step 3: Watch the Magic! ✨
- Push some code or create a pull request
- Visit your dashboard to see activities appear in real-time
- Enjoy the beautiful interface with statistics and activity cards

## 🛠️ Technical Details

This Space runs two services simultaneously:
- **FastAPI Server** (Port 7861): Handles GitHub webhooks
- **Streamlit Dashboard** (Port 8501): Provides the user interface

### Features Include:
- **Modern Design**: Gradient backgrounds, smooth animations
- **Activity Icons**: Different icons for pushes, PRs, and merges  
- **Statistics Cards**: Total events, daily activities, recent counts
- **Responsive Layout**: Works great on desktop and mobile
- **Error Handling**: Graceful handling of connection issues
- **Auto-refresh**: No need to manually refresh the page

## 🔧 Environment Variables

To run this Space, you need to configure:

| Variable | Description | Required |
|----------|-------------|----------|
| `MONGODB_URI` | Your MongoDB Atlas connection string | ✅ Yes |

### Setting Up Secrets in Hugging Face Spaces:
1. Go to your Space settings
2. Click on "Repository secrets"  
3. Add `MONGODB_URI` with your MongoDB connection string

## 🎨 Screenshots & Features

### Dashboard Overview
- Clean, modern interface with gradient design
- Real-time activity feed with beautiful cards
- Statistics overview showing key metrics

### Activity Types Supported
- **📤 Code Pushes**: When you push code to any branch
- **🔄 Pull Requests**: When PRs are opened or updated  
- **✅ Merges**: When branches are successfully merged

### Visual Design Elements
- **Gradient Cards**: Beautiful purple-to-blue gradient backgrounds
- **Activity Icons**: Contextual icons for different event types
- **Smooth Animations**: Hover effects and transitions
- **Statistics Dashboard**: Clean metrics display
- **Responsive Design**: Looks great on any screen size

## 🔗 Related Links

- **Source Code**: [GitHub Repository](https://github.com/Ujwal-5/webhook-repo)
- **MongoDB Atlas**: [Get Free Database](https://www.mongodb.com/atlas)
- **GitHub Webhooks**: [Documentation](https://docs.github.com/en/developers/webhooks-and-events/webhooks)


## 🙋‍♂️ Support

Having issues? Here are some common solutions:

**Database Connection Issues:**
- Verify your MongoDB URI is correct
- Check if your IP is whitelisted in MongoDB Atlas
- Ensure your database user has read/write permissions

**Webhook Not Working:**  
- Double-check the webhook URL in your GitHub repository
- Verify the webhook is set to send JSON payloads
- Check that events are selected (Pushes and Pull requests)

**No Activities Showing:**
- Make sure you've pushed code or created PRs after setting up the webhook
- Check the webhook delivery logs in your GitHub repository settings
- Verify your MongoDB database is accessible

---

## 🌟 Try It Now!

1. **Duplicate this Space** to get your own copy
2. **Add your MongoDB URI** in the secrets
3. **Set up your GitHub webhook** 
4. **Start monitoring your repository activities!**

Enjoy tracking your development workflow with this beautiful dashboard! 🚀✨