📊 GitStats Enhanced

Beautiful GitHub analytics with gamification & predictions

Discover your coding patterns, earn achievements, and showcase your developer journey

✨ Overview

A modern GitHub analytics dashboard that transforms boring stats into an engaging experience. View beautiful visualizations of your contributions, earn achievement badges, level up with XP, get statistical predictions, and battle other developers in head-to-head comparisons!

🚀 Features

Feature	Description
📊 Beautiful Charts	Interactive heatmaps, line charts, pie charts, and velocity graphs
🏆 30+ Badges	Earn achievements across 6 categories with 5 rarity tiers
⚡ XP & Levels	Level up from "Code Newbie" to "GitHub Legend" (100 levels)
🔮 Predictions	Statistical forecasts for commits, streaks, and milestones
⚔️ Battle Mode	Compare stats with up to 4 developers in competition style
🌙 Dark/Light Mode	Beautiful themes with smooth transitions
📱 Mobile First	Fully responsive design for all devices
📤 Export & Share	Download stats as PNG, share via link or social media
🔒 No Auth Required	Works with any public GitHub profile
⚡ Fast & Cached	SWR caching for optimal performance

🛠️ Tech Stack

Next.js 16	React 19	TypeScript	Tailwind 4	shadcn/ui
Recharts	SWR	Lucide Icons	pnpm	GitHub API

🏗️ Architecture

┌─────────────────────────────────────────────────────────────────┐
│                      Next.js Frontend                           │
│  ┌──────────────┐  ┌──────────────┐  ┌───────────────────────┐  │
│  │ 🔍 Search    │  │ 📊 Dashboard │  │ ⚔️ Battle Mode        │  │
│  │ (Home Page)  │  │ (User Stats) │  │ (Comparisons)         │  │
│  └──────────────┘  └──────────────┘  └───────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘
                              │
                    SWR Data Fetching + Caching
                              │
┌─────────────────────────────────────────────────────────────────┐
│                      Core Services                              │
│  ┌──────────────┐  ┌──────────────┐  ┌───────────────────────┐  │
│  │ 📈 Stats     │  │ 🎮 Gamify    │  │ 🔮 Predictions        │  │
│  │ Calculator   │  │ (XP/Badges)  │  │ (Statistical)         │  │
│  └──────────────┘  └──────────────┘  └───────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘
                              │
                    ┌─────────┴─────────┐
                    │   GitHub REST API │
                    │   (Public, Cached)│
                    └───────────────────┘

📂 Project Structure

github_stats_enhanced/
├── 📦 package.json                   # Dependencies & scripts
├── src/
│   ├── app/
│   │   ├── 🏠 layout.tsx             # Root layout with theme provider
│   │   ├── 🔍 page.tsx               # Home page with search
│   │   └── [username]/
│   │       └── 📊 page.tsx           # User profile dashboard
│   ├── components/
│   │   ├── charts/
│   │   │   ├── 📅 contribution-heatmap.tsx   # GitHub-style calendar
│   │   │   ├── 📈 activity-chart.tsx         # Area chart
│   │   │   ├── 🥧 language-chart.tsx         # Pie chart
│   │   │   ├── ⏰ productivity-heatmap.tsx   # Hours x Days grid
│   │   │   └── 📉 velocity-chart.tsx         # Trend line chart
│   │   ├── features/
│   │   │   ├── 👤 profile-header.tsx         # User info card
│   │   │   ├── 📊 metric-cards.tsx           # Stats grid
│   │   │   ├── 🏆 badge-wall.tsx             # Achievement display
│   │   │   ├── ⚡ level-display.tsx          # XP progress
│   │   │   ├── 🔮 predictions-panel.tsx      # Forecasts
│   │   │   ├── ⚔️ comparison-view.tsx        # Battle mode
│   │   │   └── 📤 export-share.tsx           # Export/share buttons
│   │   ├── providers/
│   │   │   └── 🌙 theme-provider.tsx         # Dark/light mode
│   │   ├── shared/
│   │   │   ├── 🎨 header.tsx                 # App header
│   │   │   └── 🌙 theme-toggle.tsx           # Theme switcher
│   │   └── ui/                               # shadcn components
│   ├── hooks/
│   │   └── 🔄 use-github-data.ts             # SWR data hook
│   ├── lib/
│   │   ├── 🌐 github-api.ts                  # GitHub API client
│   │   ├── 📊 stats-calculator.ts            # Stats computation
│   │   ├── 🎮 gamification.ts                # XP, levels, badges
│   │   ├── 🔮 predictions.ts                 # Statistical forecasts
│   │   └── 🔧 utils.ts                       # Utilities
│   └── types/
│       └── 📝 github.ts                      # TypeScript types
└── 📖 README.md

🚀 Quick Start

Prerequisites

🟢 Node.js 18+ - Download
📦 pnpm - npm install -g pnpm

Installation

# Clone the repository
git clone https://github.com/Infyneis/github-stats-enhanced.git

# Navigate to project
cd github-stats-enhanced

# Install dependencies
pnpm install

# Start development server
pnpm dev

Then open http://localhost:3000 and enter any GitHub username!

📊 Analytics Features

📈 Core Metrics

Metric	Description
💻 Commits	Total commits with trend indicator
🔀 Pull Requests	PRs opened and merged
🐛 Issues	Issues created and resolved
👀 Code Reviews	PR reviews conducted
⭐ Stars Earned	Total stars across repositories
🍴 Forks	Repository forks
🔥 Streaks	Current and longest streak
📁 Repositories	Public repository count

📅 Visualizations

Chart	Description
🟩 Contribution Heatmap	GitHub-style calendar grid
📈 Activity Timeline	Commits, PRs, issues over time
🥧 Language Breakdown	Top 10 languages with colors
⏰ Productivity Heatmap	When you code (hours × days)
📉 Velocity Trends	Weekly commit trends with moving average

🏆 Gamification System

🎖️ Badge Categories

Category	Examples
⏰ Productivity	Night Owl, Early Bird, Weekend Warrior
🔥 Consistency	Week Streak, Month Streak, 365 Day Streak
👥 Collaboration	Code Reviewer, Team Player, Review Master
⭐ Impact	First Star, Rising Star, Superstar, Polyglot
⚡ Velocity	Productive Day, Sprint, Speed Demon
🎯 Milestone	Beginner, Intermediate, Advanced, Legend

💎 Rarity Tiers

Tier	Color	Difficulty
⚪ Common	Gray	Easy (60%+ users)
🟢 Uncommon	Green	Moderate (30-60%)
🔵 Rare	Blue	Challenging (10-30%)
🟣 Epic	Purple	Very Hard (1-10%)
🟡 Legendary	Gold	Exceptional (<1%)

⚡ XP & Leveling

Activity	XP
Commit	10 XP
PR Opened	25 XP
PR Merged	50 XP
PR Review	20 XP
Issue Opened	15 XP
Issue Closed	30 XP
Star Received	5 XP
Fork Received	10 XP

Level Titles: Code Newbie → Junior Developer → Developer → Senior Developer → Lead Developer → Principal Engineer → Architect → Code Wizard → GitHub Master → GitHub Legend

🔮 Predictions

All predictions use statistical methods (no AI):

Prediction	Method
📊 30-Day Forecast	Linear regression on last 90 days
🔥 Streak Probability	Survival analysis on historical patterns
🎯 Milestone ETAs	Velocity-based extrapolation
📅 Productive Days	Day-of-week probability distribution

⚔️ Battle Mode

Compare stats with other developers in competition style:

👥 Add up to 4 users
🏆 Head-to-head metric comparisons
📊 Competition score calculation
🥇 Winner highlighting with trophy
📤 Shareable comparison links

🎨 Design System

Color Palette

Color	Light Mode	Dark Mode	Usage
🔵 Primary	`#1d4ed8`	`#60a5fa`	Accents, buttons
🟢 Success	`#22c55e`	`#34d399`	Positive metrics
🟡 Warning	`#f59e0b`	`#fbbf24`	Alerts, priorities
🔴 Danger	`#ef4444`	`#f87171`	Errors, decreasing
⚫ Background	`#ffffff`	`#0a0a0a`	Main background
⚫ Card	`#f9fafb`	`#18181b`	Card surfaces

Components

Glassmorphism cards with backdrop blur
Gradient accents and backgrounds
Smooth animations with CSS transitions
Responsive mobile-first design

📦 Scripts

Command	Description
`pnpm dev`	Start development server
`pnpm build`	Build for production
`pnpm start`	Start production server
`pnpm lint`	Run ESLint

🌐 API & Rate Limits

GitHub API

Type	Rate Limit
Unauthenticated	60 requests/hour
Authenticated	5,000 requests/hour

Caching Strategy

User Profile: 5 minutes
Repositories: 10 minutes
Events: 2 minutes
Computed Stats: Session-based

🐛 Troubleshooting

Rate limit exceeded

# Check current rate limit
curl -s https://api.github.com/rate_limit | jq '.rate'

# Wait for reset or use cached data

User not found

Verify the username exists on GitHub
Check for typos
Ensure the profile is public

Slow loading

GitHub API may be slow for users with extensive history
Data is cached after first load

🚀 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Self-hosted

# Build
pnpm build

# Start
pnpm start

📄 License

This project is open source and available for personal/educational use.

🙏 Acknowledgments

⚛️ Next.js - React framework
🎨 shadcn/ui - Beautiful components
🎨 Tailwind CSS - Utility-first CSS
📊 Recharts - Chart library
🔄 SWR - Data fetching
💡 Lucide - Beautiful icons
🐙 GitHub API - Data source

Made with 💚 by Samy DJEMILI

⬆️ Back to top

Name		Name	Last commit message	Last commit date
Latest commit History 21 Commits
public		public
src		src
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
start.sh		start.sh
tsconfig.json		tsconfig.json

Infyneis/github_stats_enhanced

Folders and files

Latest commit

History

Repository files navigation