Skip to content

Feature: Real-Time GitHub Activity Notifications via Webhooks #727

@Jai-Shankar1033

Description

@Jai-Shankar1033

What I noticed

I've been using GitHub Tracker for a while and really like how it lets you monitor GitHub users. But I noticed one thing — right now you have to manually refresh to see if a tracked user did something new. There's no way to know instantly when they push code, open a PR, or create an issue.

I think adding GitHub Webhook support would fix this completely.


What I'm proposing

When a tracked user does something on GitHub (push, PR, issue, release), GitHub automatically sends a notification to our backend. We then show it as a real-time alert in the UI — like a notification bell in the navbar, similar to how GitHub itself works.

No more manual refreshing. The app tells you when something happens.


🛠️ Tech Implementation Plan

Backend (backend/):

// New route: backend/routes/webhook.js
router.post('/github', express.raw({ type: 'application/json' }), (req, res) => {
  const sig = req.headers['x-hub-signature-256'];
  const payload = req.body;
  // verify HMAC signature
  // parse event type from req.headers['x-github-event']
  // emit to connected clients via socket.io
});

Frontend (src/):

  • New component: NotificationBell.tsx in src/components/
  • Socket.io client: listen for github-event emissions
  • Show toast using existing UI library (MUI Snackbar)

Environment Variables needed:

GITHUB_WEBHOOK_SECRET=your_secret_here

What needs to be built

Backend

  • New route POST /api/webhooks/github to receive GitHub webhook payloads
  • HMAC SHA-256 signature validation via x-hub-signature-256 header
  • Handle event types: push, pull_request, issues, release
  • Emit events to frontend via Socket.io
  • Store last 50 notifications per user in MongoDB

Frontend

  • NotificationBell.tsx component in navbar with unread count badge
  • Socket.io client listening for live events
  • Notification dropdown with event type, repo name, timestamp
  • Mark as read on click
  • Toast popup via MUI Snackbar (already in the stack)

Config

  • GITHUB_WEBHOOK_SECRET added to .env and .env.example

🔗 References


I'd love to work on this if maintainers are open to it. Happy to discuss the approach before starting. 🙌

Metadata

Metadata

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions