📊 GitHub Profile Analyzer

A beautiful, feature-rich web application that provides deep insights into your GitHub activity, contributions, and coding patterns. Built with Next.js 15, TypeScript, and Tailwind CSS.

• Repository Insights: Total repos, stars, forks, and issues at a glance
• Language Distribution: Visual breakdown of your programming languages
• Activity Timeline: Monthly commit and repository creation trends
• Contribution Heatmap: GitHub-style contribution calendar for the last 365 days
• Top Repositories: Ranked by stars, forks, and overall activity

• Interactive story-style presentation of your coding journey
• Slide-based navigation with keyboard support
• Beautiful animations and gradient backgrounds
• Shareable statistics for social media

• Export your statistics as JSON
• Share your coding achievements on social media
• Copy-ready formatted stats

• Node.js 20+ or Bun runtime
• A GitHub account
• GitHub OAuth App credentials

1. Clone the repository

git clone https://github.com/yourusername/github-analyzer.git
cd github-analyzer

2. Install dependencies

# Using npm
npm install

# Using bun (recommended)
bun install

3. Set up environment variables

Create a .env.local file in the root directory:

# GitHub OAuth App credentials
GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

# NextAuth configuration
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000

# Optional: Set to production URL when deploying
# NEXTAUTH_URL=https://your-domain.com

4. Create a GitHub OAuth App

• Go to GitHub Developer Settings
• Click "New OAuth App"
• Fill in the details:
  • Application name: GitHub Profile Analyzer
  • Homepage URL: http://localhost:3000
  • Authorization callback URL: http://localhost:3000/api/auth/callback/github
• Copy the Client ID and generate a Client Secret
• Add them to your .env.local file

5. Generate NextAuth Secret

openssl rand -base64 32

Add the output to NEXTAUTH_SECRET in your .env.local file

6. Run the development server

npm run dev
# or
bun dev

7. Open your browser Navigate to http://localhost:3000

github-analyzer/
├── app/                          # Next.js app directory
│   ├── api/                      # API routes
│   │   ├── auth/                 # NextAuth endpoints
│   │   └── github/               # GitHub API integrations
│   ├── dashboard/                # Main dashboard page
│   ├── year-in-review/          # Year in review feature
│   └── page.tsx                  # Landing page
├── components/                   # React components
│   ├── charts/                   # Chart components (Recharts)
│   ├── dashboard-content.tsx    # Main dashboard content
│   ├── year-in-review.tsx       # Year in review slides
│   └── ...                       # Other components
├── lib/                          # Utilities and configurations
│   ├── auth.ts                   # NextAuth configuration
│   ├── github.ts                 # GitHub API client
│   └── cache.ts                  # Caching utilities
├── types/                        # TypeScript type definitions
└── public/                       # Static assets

• Next.js 15 - React framework with App Router
• TypeScript - Type safety and better DX
• Tailwind CSS 4 - Utility-first CSS framework
• NextAuth.js 5 - Authentication for Next.js

• @octokit/rest - GitHub API client
• Recharts - Charting library for data visualization
• Biome - Fast linter and formatter

The app requires the following GitHub OAuth scopes:

• read:user - Read user profile information
• repo - Access to public and private repositories

• In-memory caching with 5-minute TTL
• Prevents excessive GitHub API calls
• Automatic cache invalidation

• Respects GitHub API rate limits (5,000 requests/hour for authenticated users)
• Implements batch processing for repository language analysis
• Check current rate limit via /api/github/rate-limit endpoint

1. Click the button above or visit Vercel
2. Import your GitHub repository
3. Add environment variables:
   • GITHUB_CLIENT_ID
   • GITHUB_CLIENT_SECRET
   • NEXTAUTH_SECRET
   • NEXTAUTH_URL (your production URL)
4. Deploy!

The app can be deployed to any platform that supports Next.js:

• Netlify: Use the Next.js plugin
• Railway: Direct GitHub integration
• DigitalOcean App Platform: Docker or buildpack deployment

npm run test
# or
bun test

npm run lint
# or
bun run lint

npm run lint:fix
# or
bun run lint:fix

npm run format
# or
bun run format

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

• Follow the existing code style (enforced by Biome)
• Write meaningful commit messages
• Test your changes thoroughly
• Update documentation as needed

This project is licensed under the MIT License - see the LICENSE file for details.

• GitHub REST API for providing the data
• Recharts for beautiful charts
• Next.js team for an amazing framework
• Vercel for hosting and deployment

Have questions or suggestions? Feel free to:

• Open an issue on GitHub
• Reach out via [your email/social]

• Dark mode support
• PDF export functionality
• User comparison feature
• Advanced filtering and search
• Repository recommendations
• Contribution streak tracking
• Custom date range selection
• More visualization options

Check the Issues page for known bugs and feature requests.

Made with ❤️ by Chris Shockley

⭐ Star this repo if you find it useful!