Team Ai
Apppublic

ujwal55/GitHub-Activity-Feed

sourceHugging Facemitupdated 1y agoView on Hugging Face
0likes
App README

๐Ÿš€ 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. 1.Create a free MongoDB Atlas account
  2. 2.Create a new cluster and get your connection string
  3. 3.Add the connection string as MONGODB_URI in the Spaces secrets

Step 2: Configure GitHub Webhook

  1. 1.Go to your GitHub repository โ†’ Settings โ†’ Webhooks
  2. 2.Click Add webhook
  3. 3.Set Payload URL to: https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME/webhook
  4. 4.Set Content type to: application/json
  5. 5.Select events: Pushes and Pull requests
  6. 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:

VariableDescriptionRequired
MONGODB_URIYour MongoDB Atlas connection stringโœ… Yes

Setting Up Secrets in Hugging Face Spaces:

  1. 1.Go to your Space settings
  2. 2.Click on "Repository secrets"
  3. 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

๐Ÿ™‹โ€โ™‚๏ธ 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. 1.Duplicate this Space to get your own copy
  2. 2.Add your MongoDB URI in the secrets
  3. 3.Set up your GitHub webhook
  4. 4.Start monitoring your repository activities!

Enjoy tracking your development workflow with this beautiful dashboard! ๐Ÿš€โœจ