LeetMetric is a dynamic web application that fetches and visualizes a user's LeetCode statistics using a public API. It provides an interactive dashboard with progress indicators and key performance metrics.
- Search any LeetCode username
- Real-time stats fetching via API
- Progress visualization (Easy, Medium, Hard)
- Input validation (regex-based)
- Async data handling using
fetch - Error handling for invalid users / API issues
- Enter key support for quick search
- Loading spinner for better UX
- Responsive UI for mobile devices
- Dark/Light theme toggle with persistent preference
- Modern UI with smooth animations and transitions
- HTML5
- CSS3
- JavaScript (ES6+)
LeetMetric/
│
├── index.html
├── style.css
├── script.js- User enters a LeetCode username
- Input is validated using regex
- API request is sent to fetch user stats
- Data is processed and displayed:
- Easy, Medium, Hard problems solved
- Total solved problems
- Ranking and contribution points
- Circular progress bars update dynamically
git clone https://github.com/nihalmohammad705-debug/agriexim.git
cd agriexim
Run with Live Server
If using VS Code, install Live Server extension and click "Go Live".- Open
index.htmlin your browser - Enter a valid LeetCode username
- Click Search or press Enter
1. Push your code to GitHub:
git add .
git commit -m "Deploy to Vercel"
git push
2. Go to vercel.com
Click "Add New Project"
Import your GitHub repository
Click "Deploy" This project uses a free public API, which may:
- Be slow at times
- Occasionally fail (network/API issues)
- Return inconsistent responses
👉 If you see an error, try again after a few seconds.
- Working with APIs using
fetch - Async/await and error handling
- DOM manipulation and dynamic UI updates
- Data validation using regex
- Handling real-world API failures
- Improving UX with loaders and feedback
- Add charts (using Chart.js)
- Add user profile section
- Improve API reliability with fallback APIs
- Add caching for faster performance
This project is licensed under the MIT License.
G Nihal - https://github.com/nihalmohammad705-debug
This project was developed as part of my learning journey through the Web Development Course by Code Help (Love Babbar).
- Course: Web Development by Code Help
- Instructor: Love Babbar
- Original Project: LeetCode Stats Tracker (built during the course)
- Dark/Light theme toggle with localStorage persistence
- CSS variables implementation for easy theming
- Modern UI refinements with smooth transitions
- Improved hover effects and visual feedback
The core functionality (LeetCode API integration, stats display, progress circles) was built while following the course, and I've since added my own improvements to make it more modern and user-friendly.