A Flask-based webhook receiver that captures GitHub events (PUSH, PULL_REQUEST, MERGE) and displays them in a real-time polling UI powered by MongoDB.

┌─────────────────┐     Webhook Events      ┌─────────────────────────────────────────┐
│   action-repo   │ ───────────────────────>│              webhook-repo               │
│  (GitHub Repo)  │   PUSH/PR/MERGE         │                                         │
└─────────────────┘                         │  ┌──────────┐    ┌──────────────────┐   │
                                            │  │  Flask   │───>│     MongoDB      │   │
                                            │  │ /webhook │    │ github_actions DB│   │
                                            │  └──────────┘    └────────┬─────────┘   │
                                            │                           │             │
                                            │  ┌──────────────────────────┐           │
                                            │  │       UI (HTML/JS)       │<────────-─│
                                            │  │  Polls /events every 15s │           │
                                            │  └──────────────────────────┘           │
                                            └──────────────────────────────────────-──┘

• Webhook Receiver: Handles GitHub push, pull_request, and ping events
• Event Processing: Detects PUSH, PULL_REQUEST, and MERGE actions
• MongoDB Storage: Persists events with unique request IDs
• Real-time UI: Polls every 15 seconds for new events
• GitHub Signature Verification: HMAC-SHA256 signature validation
• Dark Theme UI: Modern GitHub-inspired design

• Python 3.8+
• MongoDB (local or Atlas)
• GitHub account
• ngrok (for local testing)

1. Clone the repository

   git clone https://github.com/YOUR_USERNAME/webhook-repo.git
   cd webhook-repo

2. Install dependencies

   pip install -r requirements.txt

3. Configure environment variables

   cp .env.example .env
   # Edit .env with your MongoDB URI and webhook secret

4. Set up MongoDB

   • Option A: Use MongoDB Atlas (cloud)
   • Option B: Use local MongoDB

   The database github_actions and collection events will be created automatically.

python -c "import secrets; print(secrets.token_hex(32))"

1. Start the Flask server

   python app.py

2. Start ngrok (in a new terminal)

   ngrok http 5000

3. Configure GitHub webhook

   • Go to your action-repo settings → Webhooks → Add webhook
   • Payload URL: https://your-ngrok-url.ngrok.io/webhook
   • Content type: application/json
   • Secret: Your WEBHOOK_SECRET
   • Events: Select "Pushes" and "Pull requests"

Events are stored in MongoDB with the following schema:

{
  "request_id": "abc123...",
  "author": "username",
  "action": "PUSH",
  "from_branch": "feature-branch",
  "to_branch": "main",
  "timestamp": "30th January 2026 - 6:00 PM UTC"
}

cd action-repo
echo "Test $(date)" >> test.txt
git add test.txt
git commit -m "Test push event"
git push origin main

cd action-repo
git checkout -b feature/test-pr
echo "Feature content" > feature.txt
git add feature.txt
git commit -m "Add feature"
git push origin feature/test-pr
# Then create PR on GitHub UI

Merge the PR on GitHub and check the UI for the merge event.

# Health check
curl http://localhost:5000/health

# Get events
curl http://localhost:5000/events

# Simulate webhook
curl -X POST http://localhost:5000/webhook \
  -H "Content-Type: application/json" \
  -H "X-GitHub-Event: push" \
  -d '{"pusher":{"name":"TestUser"},"ref":"refs/heads/main","head_commit":{"id":"abc123","timestamp":"2026-01-30T12:00:00Z"}}'

1. Push code to GitHub
2. Create new Web Service on Render
3. Connect your GitHub repository
4. Set build command: pip install -r requirements.txt
5. Set start command: python app.py
6. Add environment variables in Render dashboard

npm install -g @railway/cli
railway login
railway init
railway up

webhook-repo/
├── app.py                 # Flask application
├── config.py              # Configuration settings
├── requirements.txt       # Python dependencies
├── .env.example           # Environment template
├── .env                   # Local environment (gitignored)
├── .gitignore
├── README.md
├── static/
│   ├── css/
│   │   └── style.css      # UI styles
│   └── js/
│       └── app.js         # Frontend polling logic
└── templates/
    └── index.html         # Main UI template

MIT