Update README.md

README.md

@@ -1,18 +1,134 @@
 ---
 title: GitHub Activity Feed
 emoji: 🚀
-colorFrom: red
-colorTo: red
-sdk: docker
-app_port: 8501
-tags:
-- streamlit
+colorFrom: blue
+colorTo: purple
+sdk: streamlit
+sdk_version: 1.28.1
+app_file: main.py
 pinned: false
-short_description: The UI will keep pulling data from MongoDB every 15 seconds
+license: mit
 ---
 
-# GitHub Activity Feed 🚀
+# 🚀 GitHub Activity Feed
 
-This app shows real-time GitHub events (Push, PR, Merge) using Streamlit and MongoDB.
+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.
 
-Edit `app.py` to customize the UI. The webhook endpoint can be added using FastAPI or Flask on a secondary port.
+## ✨ 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! 🚀✨