GitHub Insights

Generate beautiful, customizable GitHub stats cards for your profile README

Live Demo • Features • Usage • Themes • Self-Hosting

---

Features

• 📊 Comprehensive Stats - Commits, PRs, issues, stars, and more
• 🔥 Streak Tracking - Current and longest contribution streaks with accurate consecutive day detection
• 📈 Contribution Graph - Visual representation of your activity with monthly breakdowns
• 🗣️ Top Languages - Most used programming languages with visual percentages
• 🎨 Multiple Themes - 8 beautiful themes to choose from (GitHub Dark, GitHub Light, Radical, Tokyo Night, Dracula, Synthwave, Ocean, Neo Green)
• 📥 Download Options - Export your stats card as SVG, PNG, or JPG directly from the UI
• ⚡ Fast & Optimized - Edge runtime with intelligent caching for quick loads
• 📱 Responsive Design - Looks great on any device with mobile-friendly interface
• 🎨 Theme Previews - Visual theme selectors showing actual theme colors

Usage

Quick Start

Add this to your GitHub profile README:

<p align="center">
  <img src="https://yourinsights.vercel.app/api/insight?username=YOUR_USERNAME" alt="GitHub Insights" />
</p>

Replace YOUR_USERNAME with your GitHub username.

Customization Options

Parameter	Default	Description
username	Required	Your GitHub username
theme	github_dark	Card theme
profile	true	Show name & username
header	true	Show monthly contribution chart
summary	true	Show summary info (contributions, repos, join date)
stats	true	Show GitHub stats (commits, PRs, issues, stars)
languages	true	Show top programming languages
streak	true	Show streak statistics
graph	true	Show contribution graph

Example with All Options

<p align="center">
  <img src="https://yourinsights.vercel.app/api/insight?username=YOUR_USERNAME&theme=radical&graph=true&languages=true&streak=true&stats=true&header=true&summary=true&profile=true" alt="GitHub Insights" />
</p>

Themes

Theme	Preview
github_dark
github_light
radical
tokyonight
dracula
synthwave
ocean
neo_green

Self-Hosting

Prerequisites

• Node.js 20+
• GitHub Personal Access Token

Setup

1. Clone the repository

   git clone https://github.com/nishatrhythm/GitHub-Insights.git
   cd GitHub-Insights

2. Install dependencies

   npm install

3. Create environment file

   cp .env.example .env.local

4. Add your GitHub token

   Create a Personal Access Token with the following scopes:

   • repo (Full control of private repositories)
   • read:user (Read all user profile data)

   Add it to .env.local:

   GITHUB_TOKEN=your_token_here
   

5. Run the development server

   npm run dev

6. Open http://localhost:3000

Deploy to Vercel

Important: Add the GITHUB_TOKEN environment variable in your Vercel project settings.

Tech Stack

• Framework: Next.js 16 with App Router
• Runtime: Edge Runtime for optimal performance
• Language: TypeScript for type safety
• Styling: Inline SVG with dynamic theming
• Font: Inter for consistent cross-platform rendering
• API: GitHub GraphQL API v4
• Image Export: Canvas API for PNG/JPG conversion
• Deployment: Vercel with automatic edge caching

Contributing

Contributions are welcome! Feel free to:

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

License

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

---

Free and open source
Made with ❤️ by nishatrhythm and other contributors