LeetMetric

Track LeetCode progress in real-time — built with Node.js & JavaScript

LeetMetric is a dynamic web app that fetches and visualizes LeetCode problem-solving stats by username. From handling API calls to showing results live in a clean UI, it's a full-stack project that bridges frontend interactivity with backend logic.

---

🧠 Overview

This project was inspired by CodeHelp's Web Dev series by Love Babbar, and extended with:

• Real-time API communication with LeetCode.
• User error handling for invalid usernames.
• Responsive design enhancements.
• Clean project structure and separation of concerns.

---

⚙️ Tech Stack

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

---

✨ Features

• 🔍 Input any LeetCode username to get problem stats
• 📊 Displays number of problems solved by difficulty (Easy, Medium, Hard)
• 🚫 Handles invalid usernames gracefully
• 💡 Simple UI for clear visibility of stats
• 🧪 Tested locally and documented for easy use

---

🗂 Folder Structure

LeetMetric/ ├── index.html # Frontend interface ├── style.css # Page styling ├── script.js # Client-side logic ├── server.js # Express.js server ├── package.json # Project config └── node_modules/ # Dependencies

---

🛠 Getting Started

Clone the repository and run it locally:

git clone https://github.com/FluxHarsh/Project--Leetmetric.git
cd Project--Leetmetric
npm install
node server.js

Then open index.html in your browser.

⸻

🧪 Try These Sample Usernames • lovebabbar • neetcode • Striver79

⸻

🎥 Demo Video

Check out the complete working demo shared on LinkedIn: 🔗 Watch it here https://www.linkedin.com/feed/update/urn:li:activity:7348766327618035713/

⸻

🙏 Credits

Built as part of learning from Love Babbar’s web development tutorials and extended with new functionality and cleaner architecture.

⸻

⭐️ Connect & Contribute

If you find this useful: • ⭐️ Star the repo • 🍴 Fork it to add new features • 💬 Open issues or PRs for ideas and improvements