GitHub Webhook Receiver – Assignment Submission

This project implements a GitHub Webhook Receiver using Flask and MongoDB.
It listens to GitHub repository events, stores them in MongoDB, and displays the latest activity via a simple polling-based UI.

The implementation follows the structure and guidelines of the provided reference repository and extends it with full functionality.

---

📌 Reference Repository

This project is structured according to the reference repository provided in the assignment:

https://github.com/techstax-dev/tsk-public-assignment-webhook-repo

The base structure was used as a reference and customized to implement:

• GitHub webhook handling
• MongoDB persistence
• Event processing logic
• Polling-based UI

---

⚙️ Tech Stack

• Python
• Flask
• MongoDB Atlas
• GitHub Webhooks
• ngrok (for local webhook testing)
• HTML / JavaScript (UI)

---

🏗 Project Structure

webhook-repo/ ├── app/ │ ├── init.py │ ├── extensions.py │ └── webhook/ │ ├── init.py │ └── routes.py ├── ui/ │ ├── index.html │ └── script.js ├── run.py ├── requirements.txt ├── README.md

---

🚀 How to Run the Project

1️⃣ Clone the repository

git clone <your-webhook-repo-url>
cd webhook-repo
2️⃣ Create & activate virtual environment
python -m venv venv
venv\Scripts\activate   # Windows
3️⃣ Install dependencies
pip install -r requirements.txt
4️⃣ Start the Flask server
python run.py
Server will run at:

http://localhost:5000
🌐 Webhook Setup (Local Testing)
Expose the local server using ngrok:

ngrok http 5000
Set the GitHub webhook Payload URL to:

https://<ngrok-url>/webhook
📡 API Endpoints
POST /webhook
Receives GitHub webhook events and stores them in MongoDB.

GET /events
Returns the latest repository events from MongoDB.

🖥 UI Functionality
UI is available at:

http://localhost:5000
Polls the backend every 15 seconds

Displays latest GitHub activity in human-readable format

Supported event messages
Push

<author> pushed to <branch> at <timestamp>
Pull Request

<author> submitted a pull request from <source> to <target>
Merge

<author> merged branch <source> into <target>
✅ Supported GitHub Events
Push

Pull Request

Merge (via pull_request merged event)

🔄 Polling Mechanism (UI)
UI uses setInterval to fetch data every 15 seconds

Endpoint used:

GET /events
Rendering logic is handled entirely on the client side (script.js)

No server-side templating is used

🛠 Error Handling & Edge Cases
Invalid or unsupported GitHub events are safely ignored

MongoDB insertions occur only when valid event data is constructed

Flask returns 200 OK for successful webhook deliveries

UI gracefully handles empty event lists

🔐 Notes
venv/ and __pycache__/ are excluded from version control

MongoDB connection uses MongoDB Atlas

UI formatting is handled entirely on the client side

👤 Author
Gaurav Sharma

📄 Submission
This project is submitted as part of the technical assignment and fulfills all stated requirements, including:

Reference-based structure

GitHub webhook handling

MongoDB data persistence

Polling-based UI display