GitHub Insights Widget

Problem Statement

Most developer portfolios show a static list of technologies. I wanted to build something interactive — a widget where visitors enter any GitHub username and instantly see meaningful insights.

Demo

The widget lives on the homepage of this portfolio. Enter a GitHub username and see:

• Top programming languages (by repo count)
• Total public repos and stars
• A deterministic funny developer summary

Architecture

The API route caches responses for 1 hour via Cache-Control headers, so repeated lookups hit the CDN edge cache.

Tech Stack

• Next.js API Routes — Edge runtime for global low latency
• GitHub REST API — Public user and repo endpoints
• TypeScript — End-to-end type safety from API response to rendered UI
• Tailwind CSS — CSS-only language bar chart (no chart library)

Lessons Learned

1. GitHub's unauthenticated rate limit (60 req/hr) is too low — always use a personal access token
2. Language stats from /repos are approximate — you'd need the Language API per repo for byte-accurate data
3. Deterministic summaries (template strings indexed by data) are more reliable than LLM calls for a portfolio