Track, compare, and compete on Claude Code usage across your team. Install the ccrank CLI (powered by ccusage). See the leaderboard. Earn titles. Talk trash.
Deploy to Cloudflare Workers in under 10 minutes. Free tier. Zero cost.
Live Demo · Quick Start · Features · API
It started with a WhatsApp message:
"Code a Leaderboard Vivek? Let everyone submit their ccusage :)"
The entire app was built on a phone using Claude Code, deployed to Cloudflare Workers in minutes, and has been running at ccrank.dev ever since. No laptop required. Just vibes and Claude.
| Feature | Description | |
|---|---|---|
| 🏆 | Live Leaderboard | Ranked by total cost, tokens, days active, and last activity |
| 🏅 | Gamified Titles | Apprentice, Practitioner, Power User, Token Whale, Claude Maximalist |
| 🕒 | Time-Travel History | Browse daily, weekly, and monthly snapshots with date navigation |
| 💻 | Multi-Machine Tracking | Aggregate usage across laptops, desktops, and cloud instances |
| :frame_with_picture: | Shareable Social Cards | OG-image-ready SVG cards with your stats for Twitter/LinkedIn |
| 🔒 | Google OAuth | One-click sign-in, no passwords |
| 🎫 | Invite-Only Registration | Each user gets 3 invite codes to share |
| ⚙️ | Admin Panel | Bulk invite generation, platform-wide stats |
| 🌑 | Dark Theme | Beautiful dark UI, fully responsive on mobile |
| 💰 | Zero Cost Hosting | Runs entirely on Cloudflare Workers + D1 free tier |
- Node.js v18+
- Cloudflare account (free tier)
- Google Cloud project (for OAuth)
git clone https://github.com/makash/claude-leaderboard-using-ccusage.git
cd claude-leaderboard-using-ccusage
npm installnpx wrangler login
npx wrangler d1 create claude-leaderboard-dbCopy the database_id into wrangler.toml:
[[d1_databases]]
binding = "DB"
database_name = "claude-leaderboard-db"
database_id = "YOUR_DATABASE_ID_HERE"npm run db:migrate
npm run db:seed- Create an OAuth 2.0 Client ID at Google Cloud Console > Credentials
- Add redirect URI:
https://your-worker.workers.dev/auth/google/callback - Update
wrangler.toml:[vars] GOOGLE_CLIENT_ID = "your-client-id.apps.googleusercontent.com" ADMIN_EMAIL = "you@gmail.com"
- Set secrets:
npx wrangler secret put GOOGLE_CLIENT_SECRET npx wrangler secret put SESSION_SECRET # use: openssl rand -hex 32
npm run deployShare the URL. Start competing.
Sign in at your leaderboard URL, go to Install, generate a token in Settings, and run the CLI from your project folder. The Install page includes OS-specific one-liners.
Use the Go CLI (binary) to upload git activity. It auto-creates ~/.ccrank/repos.json and uses it for uploads.
Add a repo (from inside a project folder):
ccrank-git --add-repoIf you run --add-repo outside a repo (e.g., ~/code), it scans recursively and adds the 30 most recently active repos.
Then upload:
ccrank-git --url https://your-worker.workers.dev --token YOUR_TOKENccusage runs automatically in the Go CLI. See docs/git-metadata.md for OS-specific downloads and details.
Generate your token in Settings → Git Metadata.
Each user gets 3 invite codes. Go to Invites to generate and share them. Admins can bulk-generate from the admin panel.
| Method | Path | Auth | Description |
|---|---|---|---|
GET |
/ |
Optional | Landing / dashboard |
GET |
/leaderboard |
No | Public leaderboard |
GET |
/history |
No | Time-travel history |
GET |
/about |
No | Origin story |
GET |
/card/:slug |
No | Public stats card |
GET |
/card/:slug/image.svg |
No | OG image (SVG) |
GET |
/settings |
Yes | Sharing settings |
GET |
/upload |
Yes | Install page |
GET |
/invites |
Yes | Manage invites |
GET |
/admin |
Admin | Admin panel |
POST |
/api/upload |
Yes | Upload ccusage JSON (used by CLI) |
POST |
/api/settings/sharing |
Yes | Save sharing prefs |
GET |
/api/leaderboard |
No | Leaderboard JSON |
GET |
/api/me |
Yes | Current user + stats |
POST |
/api/invites/create |
Yes | Generate invite code |
POST |
/api/admin/invites |
Admin | Bulk invite codes |
src/
index.ts Hono routes, middleware, API endpoints
auth.ts HMAC-SHA256 sessions + Google OAuth
parser.ts ccusage JSON parser (daily/weekly/session)
html.ts Dark-themed HTML templates (Tailwind CSS)
utils.ts Shared types and utilities
card.ts Social card SVG generation (satori)
images.ts Base64 screenshots for About page
migrations/
0001_initial.sql Database schema
0002_seed_invites.sql Seed invite codes
0003_add_source.sql Multi-machine tracking
0004_drop_old_index.sql Index cleanup
0005_add_sharing.sql Social card sharing
npm run db:migrate:local
npm run db:seed:local
# Create .dev.vars for local secrets
cat > .dev.vars << 'EOF'
GOOGLE_CLIENT_ID=your-client-id
GOOGLE_CLIENT_SECRET=your-client-secret
SESSION_SECRET=dev-secret-change-me
ADMIN_EMAIL=you@gmail.com
EOF
npm run devAdd http://localhost:8787/auth/google/callback as an authorized redirect URI in Google Cloud Console.
|
Hono Web framework |
CF Workers Serverless compute |
D1 (SQLite) Edge database |
Tailwind CSS Styling via CDN |
ccusage Usage tracking CLI |
Deployments are triggered by release tags — pushing code or merging PRs does not deploy automatically.
To deploy a new version:
git tag v1.0.0
git push origin v1.0.0Or create a release via GitHub:
gh release create v1.0.0 --title "v1.0.0" --notes "What changed"A GitHub Actions workflow picks up the tag, runs wrangler deploy, and pushes to Cloudflare Workers.
Contributions are welcome! Feel free to open issues and pull requests.
- Fork the repository
- Create your feature branch (
git checkout -b feat/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feat/amazing-feature) - Open a Pull Request
Akash Mahajan (@makash)
If you deploy this for your team, I would love to hear about it -- tweet at me!
MIT