🚀 GitHub Stats

Generate dynamic, futuristic SVG cards displaying GitHub user statistics for your README files!

✨ 56+ Themes • ⚡ Fast API • 🎨 Beautiful UI • 💯 TypeScript • ♿ Accessible

• 🌌 Futuristic space theme with animated starfield and orbital rings
• 🎯 Radial beam data visualization with intensity-based graphics
• 🖼️ User profile image display in center sphere with glowing effects
• 📱 Responsive SVG design (1200x600)
• 🔤 Custom fonts (Ubuntu, Orbitron, Cascadia Code)
• ⚡ Smooth loading animations with spinner indicators

Home page with live demo, interactive form, and documentation.

Generate SVG stats card.

Example:

GET https://stats.sophat.top/stats?username=pphatdev&theme=dark

• Node.js (v16 or higher)
• npm or yarn
• GitHub Personal Access Token (Create one here)
  • Required scopes: repo, user

1. Clone the repository:

git clone https://github.com/pphatdev/stats.sophat.top.git
cd stats.sophat.top

2. Install dependencies:

npm install

3. Create environment file:

cp .env.example .env

4. Configure environment variables in .env:

GITHUB_TOKEN=your_github_personal_access_token
PORT=3000

5. Build the project:

npm run build

This compiles TypeScript, copies assets (views, fonts), and builds optimized CSS with Tailwind v4.

6. Start the server:

npm start

Or for development with auto-reload:

npm run dev

7. Access the application:

• Open your browser to http://localhost:3000
• API endpoint: http://localhost:3000/stats?username=YOUR_USERNAME

Add this to your GitHub README:

![GitHub Stats](https://your-deployment-url.com/stats?username=YOUR_USERNAME)

![GitHub Stats](https://your-deployment-url.com/stats?username=YOUR_USERNAME&theme=dark)

![GitHub Stats](https://stats.sophat.top/stats?username=pphatdev)

Choose from 56+ carefully designed themes! Visit the live theme gallery to browse all themes with visual previews.

Theme	Preview	Description
default		Classic green theme
dark		Dark theme with cyan accents
radical		Pink and cyan futuristic
tokyonight		Tokyo night inspired
dracula		Dracula official theme
monokai		Monokai classic

default, dark, radical, merko, gruvbox, tokyonight, onedark, cobalt, synthwave, highcontrast, dracula, prussian, monokai, vue, nightowl, algolia, darcula, bear, nord, gotham, graywhite, material, github_dark, ayu_dark, moonlight, cobalt2, catppuccin_mocha, catppuccin_latte, and 40+ more!

See src/themes.ts for the complete list of all 56 themes.

All options can be customized via URL parameters or the web interface.

![GitHub Stats](https://stats.sophat.top/stats?username=pphatdev&hide_title=true)

![GitHub Stats](https://stats.sophat.top/stats?username=pphatdev&hide_rank=true)

![GitHub Stats](https://stats.sophat.top/stats?username=pphatdev&custom_title=My%20Awesome%20Stats)

![GitHub Stats](https://stats.sophat.top/stats?username=pphatdev&theme=tokyonight&hide_rank=true&custom_title=Developer%20Stats)

The card features a stunning space-themed design with:

• 🌌 Animated Starfield - Dynamic background with twinkling stars
• 🌀 Orbital Rings - Rotating rings around the center sphere
• 🎯 Radial Data Beams - Intensity-based visualization radiating from center
• ✨ Glow Effects - Neon glow on data points and profile image
• 🖼️ Profile Avatar - Your GitHub profile picture in the center sphere

• Custom title (or user's name by default)
• Total contributions count
• Developer rank (S+, S, A+, A, B+, B, C) based on activity
• Last synchronized timestamp

• Ubuntu - Main UI font for clarity and readability
• Orbitron - Futuristic font for numbers and stats
• Cascadia Code - Monospace font for terminal displays

• Backend: Express.js, TypeScript
• GitHub API: Octokit REST client
• Templating: EJS (Embedded JavaScript)
• Styling: Tailwind CSS (via CDN)
• Fonts: Google Fonts (Ubuntu, Orbitron, Cascadia Code)
• Icons: Material Icons Outlined

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

1. Fork the repository
2. Create your feature branch

   git checkout -b feature/AmazingFeature

3. Make your changes and test thoroughly
4. Commit your changes

   git commit -m 'Add some AmazingFeature'

5. Push to your branch

   git push origin feature/AmazingFeature

6. Open a Pull Request

• 🎨 Add new themes (we have 56, let's get to 100!)
• ✨ Improve animations and visual effects
• 🐛 Fix bugs and improve error handling
• 📚 Improve documentation
• 🧪 Add tests and improve test coverage
• ⚡ Performance optimizations
• ♿ Enhance accessibility features
• 🌍 Add internationalization (i18n)
• 📱 Mobile app or PWA version
• 🔌 Create plugins or extensions

Please read CONTRIBUTING.md and CODE_OF_CONDUCT.md for details.

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

• Inspired by github-readme-stats by Anurag Hazra
• Themes adapted from popular editor themes and color schemes
• Fonts:
  • Ubuntu by Canonical
  • Orbitron by Matt McInerney
  • Cascadia Code by Microsoft
• Built with TypeScript, Express.js, and Octokit
• UI styled with Tailwind CSS v4
• Icons from Material Design Icons
• SEO best practices from Google and Open Graph protocol

• 🐛 Report a bug
• 💡 Request a feature
• 💬 Ask a question
• ⭐ Star the repository

Made with ❤️ by pphatdev

⭐ Star this repo if you find it useful! ⭐

Note: This project uses the GitHub REST API via Octokit, which has rate limits. Using a GitHub Personal Access Token is highly recommended to avoid hitting rate limits:

• Without token: 60 requests per hour
• With token: 5,000 requests per hour

The built-in caching system (10-minute duration) helps minimize API calls and stay within rate limits.