Generate a free, live GeeksforGeeks stats card for your GitHub README, developer portfolio, or personal website.
GeeksforGeeks-Card is an open-source project that dynamically generates a beautiful SVG/HTML stats card for any GeeksforGeeks user profile. Embed it anywhere — GitHub profile README, personal portfolio, or any website — and it will always show your latest stats in real time.
[](https://www.geeksforgeeks.org/user/<YOUR_GFG_USERNAME>/)🔁 Replace
<YOUR_GFG_USERNAME>with your actual GeeksforGeeks username.
⚠️ If your username contains spaces, replace them with%20.
<section class="preview">
<img src="https://geeksforgeekscard.up.railway.app/[YOUR_GFG_USERNAME]?theme=dark"
class="gfg-card"
alt="GFG Stats Card">
</section>| Endpoint | Description |
|---|---|
/api/<username> |
Returns the rendered SVG stats card |
/api/<username>?theme=dark |
Returns the card with dark theme |
/api/<username>?theme=light |
Returns the card with light theme |
/api/<username>?raw=true |
Returns raw JSON stats data |
{
"userHandle": "nikhilkumawat7689",
"total_score": 1271,
"monthly_score": 0,
"total_problems_solved": 502,
"pod_solved_longest_streak": 156,
"pod_solved_global_longest_streak": 1816,
"pod_solved_current_streak": 0,
"pod_correct_submissions_count": 187,
"institute_rank": 234,
"total_articles_published": 0,
"School": 0,
"Basic": 109,
"Easy": 209,
"Medium": 158,
"Hard": 26,
"ProgressBar": 26.987249667401308
}| Theme | Preview |
|---|---|
?theme=light |
White background, green accents |
?theme=dark |
Dark background, bright green accents |
GeeksforGeeks-Card/
│
├── controllers/
│ └── controller.js # Core logic for fetching and rendering cards
│
├── helpers/
│ ├── common.js # Shared utility functions
│ ├── fetchData.js # Fetches stats from GFG profile
│ └── svg.js # Generates the SVG card output
│
├── public/
│ ├── css/
│ │ ├── dark.css # Dark theme styles
│ │ ├── light.css # Light theme styles
│ │ ├── svg.css # SVG-specific styles
│ │ └── demo.css # Demo page styles
│ └── index.html # Demo/preview page
│
├── routes/
│ ├── api.js # API route definitions
│ └── files.js # Static file routes
│
├── .env.example # Environment variable template
├── package.json # Project metadata & dependencies
├── server.js # Express server entry point
├── robots.txt # SEO robots configuration
└── sitemap.xml # SEO sitemap
# 1. Clone the repository
git clone https://github.com/nikhil566565/GeeksforGeeks-Card.git
# 2. Navigate into the project
cd GeeksforGeeks-Card
# 3. Install dependencies
npm install
# 4. Copy the environment file and configure
cp .env.example .env
# 5. Start the development server
npm startThe server will start at http://localhost:3000.
PORT=3000You can embed this card directly into your personal portfolio website using an <img> tag or <iframe>. It updates automatically — no manual refresh needed.
<!-- Portfolio section -->
<section class="preview">
<img src="https://geeksforgeekscard.up.railway.app/[YOUR_GFG_USERNAME]?theme=dark"
class="gfg-card"
alt="GFG Stats Card">
</section>Contributions are always welcome! Here's how to get started:
- Fork this repository
- Create your branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
Please make sure to update tests as appropriate.
| Problem | Solution |
|---|---|
| Card not loading | Make sure you've solved at least 1 problem on GFG |
| Wrong username | Double-check your GFG username (case-sensitive) |
| Spaces in username | Replace spaces with %20 in the URL |
| Stats not updating | Stats refresh periodically; wait a few minutes |
Have questions, ideas, or feedback? Reach out!
- 🌐 Website: https://nikhilkumawat.netlify.app/
- 💼 LinkedIn: https://www.linkedin.com/in/nikhil-kumawat
- 📧 Email: nikhilkumawat7689@gmail.com
- 🐙 GitHub Issues: Open an issue
Made with ❤️ by Nikhil
⭐ Star this repo if it helped you! ⭐