GitHub Year in Review

A beautiful, modern web application to create LinkedIn-ready year-in-review images showcasing your GitHub contributions and achievements.

Example

Features

• Comprehensive Statistics - Track commits, PRs, stars, languages, and more
• Beautiful Design - Modern, responsive UI with dark mode support
• Fully Responsive - Works perfectly on desktop, tablet, and mobile
• Fast & Optimized - Smart caching and rate limit management
• Customizable Metrics - Choose which statistics to display
• High-Quality Export - LinkedIn-optimized images (1200×480px)
• Privacy-First - All processing happens client-side, tokens stored locally

Getting Started

Prerequisites

• Node.js 18+ and npm (or yarn/pnpm)

Installation

1. Clone the repository:

git clone <repository-url>
cd github_year_in_review

2. Install dependencies:

npm install

3. (Optional) Set up environment variables:

cp .env.local.example .env.local
# Edit .env.local and add your GITHUB_TOKEN

4. Run the development server:

npm run dev

5. Open http://localhost:3000 in your browser

Usage

1. Enter your GitHub username in the form
2. (Optional) Add your GitHub Personal Access Token for higher rate limits
3. Click "Generate Year in Review"
4. Customize which metrics to display using the selector
5. Preview your year-in-review card
6. Click "Download LinkedIn-Ready Image" to save

Image Specifications

• Dimensions: 1200×480px (Social media optimized)
• Format: PNG
• Resolution: High resolution (2x scale for crisp images)
• Ready to Share: Perfect for LinkedIn, Twitter, and other social platforms

Tech Stack

• Framework: Next.js 14 (App Router)
• UI: React 18 with TypeScript
• Styling: Tailwind CSS
• Image Generation: html2canvas
• API: GitHub REST API & GraphQL API
• State Management: React Hooks

Metrics Available

Core Metrics

• Total Contributions
• Total Commits
• Pull Requests
• Stars Received
• Current Streak
• Top Languages
• Average Commits per Day
• Contribution Heatmap

Repository Metrics

• Total Repositories
• Repos Created This Year
• Total Forks

Code Metrics

• Files Changed
• Most Active Repository
• Lines Added/Deleted
• Net Lines of Code
• Average Files per Commit

Rate Limits & GitHub Token

GitHub's API has rate limits:

• Without token: 60 requests/hour (very limited)
• With token: 5,000 requests/hour (much better!)

Setting up a GitHub Personal Access Token

1. Go to GitHub Settings → Developer settings → Personal access tokens → Tokens (classic)
2. Click "Generate new token (classic)"
3. Give it a name (e.g., "Year in Review App")
4. No scopes/permissions needed - just create the token
5. Copy the token
6. Add it to the form or set it in .env.local:

   GITHUB_TOKEN=your_token_here

7. Restart the development server if using .env.local

Note: Tokens entered in the form are saved locally in your browser and never sent to any server except GitHub's API.

Project Structure

github_year_in_review/
├── app/                    # Next.js app directory
│   ├── api/               # API routes
│   ├── page.tsx           # Main page
│   └── layout.tsx         # Root layout
├── components/            # React components
│   ├── ui/               # Reusable UI components
│   └── ...               # Feature components
├── lib/                   # Utility libraries
│   ├── github/           # GitHub API client & utilities
│   ├── hooks/            # Custom React hooks
│   └── utils/            # Helper functions
├── types/                 # TypeScript type definitions
└── public/               # Static assets

Key Improvements

Architecture

• Modular API client with proper error handling
• Smart caching system to reduce API calls
• Separated concerns (client, calculator, cache)
• Custom hooks for state management

User Experience

• Modern, responsive design
• Smooth animations and transitions
• Better loading states
• Improved error messages
• Dark mode support

Code Quality

• Enhanced TypeScript types
• Input validation
• Better error handling
• Reusable UI components
• Clean code structure

Performance

• Request caching
• Optimized API calls
• Rate limit management
• Efficient rendering

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Environment Variables

• GITHUB_TOKEN (optional) - GitHub Personal Access Token for higher rate limits

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source and available under the MIT License.

Acknowledgments

• Built with Next.js
• Styled with Tailwind CSS
• Powered by the GitHub API

---

Note: Some statistics are estimated based on available API data. The app processes a limited number of repositories to respect rate limits and ensure fast performance.