A dashboard for visualizing any public LeetCode profile — difficulty progress, submission activity, topic strengths, contest rating, and recent activity, all in one view.
https://leetcode-metric.netlify.app/
- Difficulty Climb — one proportional bar showing Easy/Medium/Hard problems solved against the total available for each, instead of three separate progress rings
- Submission Heatmap — a full year of daily activity, in the style of a GitHub contribution graph
- Topic Mastery — your top solved topics (arrays, dynamic programming, graphs, and more)
- Languages Used — a breakdown of every language you've solved problems in
- Contest Performance — rating, global rank, and percentile, shown when available
- Recent Activity — your latest accepted submissions, linked directly to the problem
- Fully responsive, dark-themed, and built with accessibility in mind (keyboard navigable, screen-reader labeled, respects reduced-motion preferences)
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| Data | LeetCode's public GraphQL API, via a server-side route handler |
- Node.js (LTS version recommended)
git clone https://github.com/<your-username>/leetcode-metric.git
cd leetcode-metric
npm install
npm run devThen open http://localhost:3000.
npm run build
npm run startEnter any LeetCode username to pull their public stats. The request is handled by a server-side API route (app/api/leetcode/route.ts), which queries LeetCode's GraphQL endpoint directly on the server — avoiding any client-side CORS restrictions entirely.
app/
api/leetcode/route.ts # Server-side GraphQL proxy
layout.tsx # Fonts and metadata
page.tsx # Main dashboard page
globals.css # Design tokens and global styles
components/ # UI building blocks (search bar, stat cards, heatmap, etc.)
lib/ # Shared types and hooks
This project is licensed under the MIT License.