🚀 LeetMatric – LeetCode Progress Visualizer
LeetMatric is a JavaScript-based dashboard that visually displays a LeetCode user’s problem-solving progress using interactive progress circles and statistics cards.
This project was built to understand real-world JavaScript concepts, API usage, and frontend–backend interaction.
✨ Why I Built This Project
As my first serious JavaScript project, I wanted to go beyond simple DOM manipulation and learn:
- How real websites fetch data
- How APIs and GraphQL work
- How to handle errors, async code, and UI updates
- How frontend and backend communicate
LeetMatric helped me gain hands-on experience with all of these concepts.
🔥 Features
- 🔍 Search any LeetCode username
- 📊 Circular progress visualization for:
- Easy problems
- Medium problems
- Hard problems
- 📈 Submission statistics cards:
- Total submissions
- Easy / Medium / Hard submissions
- 🧠 Input validation and error handling
- 🔄 Automatic UI reset when username changes
- 🎨 Clean and responsive UI
🛠️ Technologies Used
Frontend
- HTML
- CSS
- JavaScript
- DOM Manipulation
Backend (Local Development)
- Node.js
- Express.js
- Axios
- GraphQL (LeetCode API)
Tools
- VS Code
- Git & GitHub
- npm
- Nodemon
⚙️ How It Works
- First start the server by doing npm run dev in the terminal, it will start your server
- User enters a LeetCode username
- Frontend sends a request to a local Node.js server
- Server fetches data from LeetCode GraphQL API
- Data is processed and sent back to frontend
- UI updates dynamically with progress circles and stats
🧪 Running the Project Locally
1️⃣ Clone the repository
git clone https://github.com/YOUR_USERNAME/leetcode-matrics.git