GitHub Wrapped generates a year-in-review "wrapped" experience for any GitHub username, just like Spotify Wrapped 2025. The app fetches GitHub activity and presents highlights like top repositories, languages, commit streaks, seasonal activity, and a shareable image.
- Fetch GitHub user metrics (contributions, repos, languages, commit history)
- Visual summaries: top repos, top languages, monthly/seasonal breakdowns, streaks, percentile
- Client-side capture/export (uses
html2canvas)
- Next.js 16 (app directory)
- React 19 + TypeScript
- Tailwind CSS + Framer Motion + Recharts
- GitHub GraphQL API for data
- Clone the repository:
git clone <this-repo-url>
cd github-wrapped- Install dependencies:
npm install- Provide a GitHub token (required):
The app uses the GitHub GraphQL API. Set GITHUB_TOKEN in your environment before running the app.
# macOS / Linux
export GITHUB_TOKEN="your_token_here"
# PowerShell (Windows)
$Env:GITHUB_TOKEN = "your_token_here"- Run the dev server:
npm run dev
# Visit http://localhost:3000- Generate a wrapped page by visiting:
http://localhost:3000/wrap/<username>
# Example: http://localhost:3000/wrap/octocat
The GraphQL client in
lib/github.tswill throw an error ifGITHUB_TOKENis missing.
GITHUB_TOKEN— required: GitHub GraphQL token with appropriate public scopes- (Optional)
NEXT_PUBLIC_BASE_URLorSITE_URL— set your production base URL for canonical links, sitemaps, and sharing
- Recommended: Vercel (automatic Next.js support)
- Add
GITHUB_TOKENto your deployment environment variables before deploying
- Watch for GitHub API rate limits when making many requests; consider caching responses
- The screenshot/export feature uses
html2canvas; cross-browser behavior may vary
Contributions are welcome — open an issue or PR. Please include tests for new logic and keep changes focused.
Add a LICENSE file to indicate how you want to license this repository (MIT is a common choice).
Inspired by Spotify Wrapped 2025 and built to celebrate developer activity on GitHub.