GitHub Monitor Dashboard
Role: Full Stack Developer
OVERVIEW
A real-time developer analytics dashboard that connects to the GitHub API and visualizes repository health and contributor activity. Built entirely within the 48-hour window of the UJIH Innovation Hackathon, the project showcased live data visualization, WebSocket-driven updates, and a clean, accessible interface.
METRICS
THE PROBLEM
Development teams often lack a quick way to get a live, visual overview of a repository's activity — who's committing, how often, merge rates, open issues. GitHub's native interface is detailed but not optimized for at-a-glance team monitoring.
THE SOLUTION
Built a Node.js + Express backend that polls the GitHub REST API v3 and pushes updates to the frontend via WebSockets. The frontend renders interactive charts using Chart.js. The design prioritized at-a-glance readability with color-coded metrics and real-time refresh without page reloads.
KEY ACCOMPLISHMENTS
Consumed GitHub REST API v3 with proper rate-limit handling and caching
Real-time dashboard updates via WebSocket — no page reload needed
Commit frequency charts, PR merge rate gauges, and contributor leaderboards
Responsive single-page design, optimized for both desktop monitors and laptops
Entire project designed, built, and demoed within 48 hours
Presented and judged at the UJIH Innovation Hackathon 2024
BACKEND
Node.js + Express server with a GitHub API client layer. Implements ETag-based conditional requests to stay within rate limits. Data is normalized and cached in memory for fast WebSocket delivery.
REAL-TIME LAYER
Socket.io handles bidirectional communication. The server pushes diffs when new data arrives from GitHub. The client merges updates into Chart.js datasets without re-rendering the entire chart.
FRONTEND
Vanilla HTML/CSS/JS with Chart.js for data visualization. No heavy frontend framework — kept lean for hackathon speed. Custom CSS for dark theme, responsive grid, and animated metric counters.
TECHNOLOGY STACK
Need something built like this?
I'm available for new projects — Full Stack, Node.js, databases, or end-to-end. Let's talk about what you need.