Your Codolio stats, rated out of 99.
Transform your Codolio coding profile into a stunning FIFA Ultimate Team-style player card. Inspired by leetfut.fun.
- 🏟️ Auto-fetch — Enter your Codolio username, we fetch stats from the API across LeetCode, GFG, CodeChef & more
- 🃏 FIFA-style card — Beautiful FUT card with dynamic gradients per finish tier (Bronze → Icon)
- 📊 Scouting metrics — Detailed breakdown with color-coded progress bars
- 🏆 Playstyle badges — Earned badges like "Hard Mode", "Polyglot", "Contest Grinder"
- 🎊 Confetti — Celebration burst for high-tier card reveals
- 📸 Download & share — Export as PNG, share to X/LinkedIn
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build- Vite + React + TypeScript
- html-to-image for card export
- Lucide React for icons
- Codolio API for profile data
src/
├── lib/
│ ├── types.ts # Type definitions
│ ├── scoring.ts # Scoring engine (signals → FUT stats)
│ ├── codolioClient.ts # Codolio API client
│ ├── cardTheme.ts # Card finish/theme resolution
│ ├── confetti.ts # Confetti animation
│ ├── capture.ts # Card PNG export
│ └── sampleCards.ts # Demo card data
├── components/
│ ├── PlayerCard.tsx # The FUT card
│ ├── ScoutForm.tsx # Username search input
│ ├── ResultView.tsx # Full result page
│ ├── Background.tsx # Animated background
│ └── CardShowcase.tsx # Homepage card fan
├── App.tsx # Main app shell
├── App.css # All component styles
└── index.css # Design system
| FUT Stat | Signal | What It Measures |
|---|---|---|
| PAC | Streak | Consistency & momentum |
| SHO | Problems | Volume & difficulty mastery |
| PAS | Contests | Competitive performance |
| DRI | Languages | Versatility & range |
| DEF | Community | Contributions & reputation |
| PHY | Balance | Endurance across difficulties |
| Rating | Finish |
|---|---|
| 1-49 | Bronze |
| 50-69 | Silver |
| 70-84 | Gold |
| 85-89 | TOTW |
| 90-95 | TOTY |
| 96-99 | Icon |
MIT
Built with ❤️ for the Codolio community. Inspired by leetfut.fun.