LeetCode Metrics

LeetCode Metrics is a lightweight full-stack app that fetches and displays LeetCode progress by difficulty (Easy/Medium/Hard) with submission stats.

• https://leetcode-metrics-swart.vercel.app/

• Search any valid LeetCode username
• Difficulty-wise solved progress with animated circular charts
• Submission summary cards (overall + difficulty-wise)
• Responsive, modern UI (desktop + mobile)
• Rate limiting and API caching for optimal backend performance

• Frontend: HTML, CSS, Vanilla JavaScript
• Backend: Node.js + Express
• API Source: LeetCode GraphQL endpoint

leetcode-metrics/
├── src/
│   ├── routes/
│   │   └── user.js
│   ├── middleware/
│   │   └── rateLimit.js
│   └── server.js
├── public/
│   ├── index.html
│   ├── js/
│   │   └── script.js
│   ├── css/
│   │   ├── style.css
│   │   └── styles/
│   │       ├── base.css
│   │       ├── layout.css
│   │       ├── components.css
│   │       └── responsive.css
│   └── assets/
│       ├── logo.png
│       └── favicon.ico
├── package.json
└── README.md

• Node.js 18+ (Native Fetch is used)
• npm

npm install
npm start

Open:

• http://localhost:5000

• PORT (default: 5000) — server port

PowerShell example:

$env:PORT=5001
npm start

Request body:

{
	"username": "leetcode_username"
}

Responses:

• 200 user stats payload
• 400 username is required
• 404 user not found
• 500 internal/server or upstream error

• CORS enabled for cross-origin requests
• Basic request validation for username presence
• API Rate Limiting to prevent spam and abuse
• In-memory Caching to reduce upstream LeetCode API latency
• Graceful error handling for upstream LeetCode API failures

• public/css/style.css acts as the entry stylesheet.
• Actual styles are split by concern under public/css/styles/ for easier maintenance.

• If old UI appears, hard refresh (Ctrl + F5) once.
• If EADDRINUSE appears, run on another port:

$env:PORT=5001
npm start

• Aditya Kumar
• GitHub: https://github.com/debug-node