Your Ultimate Streak & Consistency Companion for Competitive Programming
Effortlessly monitor your progress across multiple coding platforms with beautiful visualizations and real-time analytics.
🌐 Live Demo • 📖 Documentation • 🤝 Contributing • 🐛 Issues • 💬 Discussions
- ✨ Features
- 🎯 Supported Platforms
- 🛠️ Tech Stack
- 🎮 Interactive Demo
- 🚀 Quick Start
- 📁 Project Structure
- 🔌 API Reference
- 📸 Screenshots
- 🤝 Contributing
- 🗺️ Roadmap
- ❓ FAQ
- 📝 License
- 🙏 Acknowledgments
- 📞 Contact
Track your coding journey across 7+ competitive programming platforms with unified analytics and progress visualization.
Fetch live statistics using official APIs and scraping techniques, ensuring your data is always up-to-date.
- Circular Progress Rings: Beautiful, animated progress indicators
- Performance Metrics: Detailed statistics and completion percentages
- Difficulty Breakdown: Easy/Medium/Hard problem distribution
- Rating & Ranking: Current ratings and global rankings
- Daily Activity Monitor: Track submissions across all platforms
- Streak Counters: Monitor consecutive days of coding activity
- Heatmap Visualization: GitHub-style contribution calendar
- Consistency Analytics: Identify patterns and improve habits
- Responsive Design: Works seamlessly on desktop, tablet, and mobile
- Dark/Light Themes: Eye-friendly themes for extended coding sessions
- Interactive Components: Expandable cards and smooth animations
- Accessibility: WCAG compliant design for inclusive experience
- RESTful APIs: Well-documented endpoints for data access
- Modular Architecture: Easy to extend and customize
- Comprehensive Testing: Unit and integration tests included
- Docker Support: Containerized deployment ready
- Demo Mode: Try all features with sample data
- Export Data: Download your statistics as JSON/CSV
- Notifications: Reminders for maintaining streaks
- Multi-User Support: Track multiple profiles
More platforms coming soon!
🎯 Experience GrindMap Without Setup!
Try all features with realistic sample data - no accounts required!
-
Clone & Install:
git clone https://github.com/Yugenjr/GrindMap.git cd GrindMap/frontend npm install -
Start the Application:
npm start
-
Click "View Demo" on the main page
-
Explore Features:
- 📊 Multi-Platform Stats: LeetCode, CodeForces, CodeChef
- 🔄 Progress Rings: Animated completion indicators
- 📅 Activity Heatmap: Submission pattern visualization
- ✅ Daily Tracker: Consistency monitoring
- 👁️ Expandable Cards: Detailed platform insights
| Platform | Problems Solved | Rating/Rank | Difficulty Breakdown |
|---|---|---|---|
| LeetCode | 487 | - | Easy: 245, Medium: 198, Hard: 44 |
| CodeForces | 312 | Expert (1542) | - |
| CodeChef | 156 | 4★ (1876) | - |
Demo video coming soon! Watch the full feature walkthrough.
# Clone the repository
git clone https://github.com/Yugenjr/GrindMap.git
cd GrindMap
# Install backend dependencies
cd backend
npm install
# Install frontend dependencies
cd ../frontend
npm install
# Start both servers
# Terminal 1: Backend
cd backend
npm start
# Terminal 2: Frontend
cd frontend
npm start# Clone and setup frontend
git clone https://github.com/Yugenjr/GrindMap.git
cd GrindMap/frontend
npm install
npm startFor a containerized setup with consistent environments across machines:
docker-compose upSee DOCKER_SETUP.md for detailed Docker instructions.
- Frontend: http://localhost:3000
- Backend API: http://localhost:5000
GrindMap/
├── 📁 backend/ # Node.js/Express server
│ ├── 📄 package.json # Backend dependencies
│ ├── 📁 src/
│ │ ├── 📄 server.js # Main server file
│ │ ├── 📄 app.js # Express app setup
│ │ ├── 📁 config/ # Database & environment config
│ │ ├── 📁 controllers/ # API route handlers
│ │ ├── 📁 models/ # Data models
│ │ ├── 📁 routes/ # API endpoints
│ │ ├── 📁 services/ # Business logic
│ │ │ ├── 📁 scraping/ # Platform scrapers
│ │ │ └── 📁 normalization/ # Data normalizers
│ │ ├── 📁 middlewares/ # Express middlewares
│ │ ├── 📁 utils/ # Utility functions
│ │ └── 📁 jobs/ # Background jobs
│ └── 📁 scripts/ # Utility scripts
├── 📁 frontend/ # React application
│ ├── 📄 package.json # Frontend dependencies
│ ├── 📁 public/ # Static assets
│ ├── 📁 src/
│ │ ├── 📄 App.js # Main React component
│ │ ├── 📁 components/ # Reusable UI components
│ │ └── 📁 utils/ # Frontend utilities
│ └── 📄 index.html # HTML template
├── 📄 README.md # This file
├── 📄 package.json # Root package config
└── 📄 .gitignore # Git ignore rules
http://localhost:5000/api
Fetch statistics for a specific platform and username.
Parameters:
platform: Platform name (leetcode, codeforces, codechef, etc.)username: User's platform username
Response:
{
"success": true,
"data": {
"platform": "leetcode",
"username": "example_user",
"problemsSolved": 487,
"easyCount": 245,
"mediumCount": 198,
"hardCount": 44,
"acceptanceRate": 65.2
}
}Get combined statistics across all platforms for a user.
User authentication endpoint.
{
"success": false,
"error": "Error message",
"code": "ERROR_CODE"
}Main dashboard showing multi-platform tracking with progress rings
Detailed statistics with expandable cards and difficulty breakdown
GitHub-style contribution calendar showing submission patterns
Today's activity tracker with platform-wise status indicators
Interactive demo with sample data for all features
Screenshots will be updated regularly. Last updated: January 2026
- Fork the repository
- Clone your fork:
git clone https://github.com/your-username/GrindMap.git - Create a feature branch:
git checkout -b feature/AmazingFeature - Install dependencies:
npm install(both frontend & backend) - Make your changes
- Test thoroughly
- Commit your changes:
git commit -m 'Add AmazingFeature' - Push to the branch:
git push origin feature/AmazingFeature - Open a Pull Request
| Category | Description | Difficulty |
|---|---|---|
| 🐛 Bug Fixes | Fix reported issues | 🟢 Easy |
| ✨ New Features | Add platform support or features | 🟡 Medium |
| 📚 Documentation | Improve docs, tutorials | 🟢 Easy |
| 🎨 UI/UX | Enhance interface design | 🟡 Medium |
| 🧪 Testing | Write unit/integration tests | 🟡 Medium |
| 🌐 i18n | Add language support | 🔴 Hard |
| 🔧 DevOps | CI/CD, Docker, deployment | 🔴 Hard |
- 🔍 Code Style: Follow existing patterns and ESLint rules
- 📝 Commits: Use conventional commit messages
- 🧪 Testing: Add tests for new features
- 📖 Documentation: Update docs for API changes
- 🎯 Issues: Link PRs to relevant issues
- 💬 Communication: Be respectful and constructive
New to open source? Start here!
- Multi-platform support (LeetCode, CodeForces, CodeChef)
- Real-time data fetching
- Interactive demo mode
- Mobile app development
- Advanced analytics dashboard
- Support for 5+ additional platforms
- User authentication & profiles
- Data export functionality
- Performance optimizations
- Docker containerization
- AI-powered insights & recommendations
- Team collaboration features
- Integration with IDEs
- Custom goal setting
- Achievement system & badges
Roadmap is subject to change. Feel free to suggest new features!
Q: What is GrindMap?
A: GrindMap is a comprehensive tool for tracking your competitive programming progress across multiple platforms with beautiful visualizations.
Q: Is it free to use?
A: Yes! GrindMap is completely free and open-source.
Q: Do I need accounts on all platforms?
A: No, you can use GrindMap with accounts on any supported platforms.
Q: Which platforms are supported?
A: Currently: LeetCode, CodeForces, CodeChef, AtCoder, GitHub, SkillRack. More coming soon!
Q: How does data fetching work?
A: We use official APIs where available, and safe scraping techniques for others. Your data privacy is respected.
Q: Can I contribute new platform support?
A: Absolutely! Check our Contributing Guide for details.
Q: Is there a mobile app?
A: Not yet, but it's on our roadmap for Q2 2026.
Q: Data not loading?
A: Check your internet connection and ensure the username is correct. Some platforms may have temporary API issues.
Q: Demo not working?
A: Make sure both frontend and backend are running. Check console for errors.
Q: Performance issues?
A: Try clearing browser cache or using an incognito window.
Have more questions? Open an issue or start a discussion!
GrindMap is licensed under the MIT License.
Copyright (c) 2026 Yugendra N
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
GrindMap wouldn't be possible without these amazing communities and tools:
- LeetCode - For providing an amazing learning platform
- CodeForces - Home of competitive programming excellence
- CodeChef - Nurturing coding talent worldwide
- AtCoder - Bringing competitive programming to Japan
- GitHub - The heart of open source collaboration
- React - For the amazing frontend framework
- Node.js - Powering our backend
- Express.js - Simple, fast web framework
- MongoDB - Flexible NoSQL database
A huge thank you to all our contributors who make GrindMap better every day!
- GitHub Contributions Graph - For the heatmap inspiration
- LeetCode Progress Trackers - For feature ideas
- Open Source Community - For endless motivation
Made with ❤️ by the open source community
Got questions, feedback, or just want to say hi? We'd love to hear from you!
- Yugendra N (@Yugenjr) - Project Creator & Lead Developer
If GrindMap helps your coding journey, consider:
- ⭐ Star the repository
- 🍴 Fork and contribute
- 📢 Share with fellow developers
- 💝 Sponsor the project
Happy Coding! 🚀
Track your progress, maintain your streaks, and level up your coding skills with GrindMap!
© 2026 GrindMap. Made with ❤️ by Yugendra N
- Fork the repository
- Create a feature branch:
git checkout -b feature/AmazingFeature - Commit your changes:
git commit -m 'Add AmazingFeature' - Push to the branch:
git push origin feature/AmazingFeature - Open a Pull Request
Looking to contribute? Check out our Good First Issues - perfect for first-time contributors!
- 🐛 Bug Fixes: Report and fix bugs you find
- ✨ New Features: Suggest and implement new features
- 📚 Documentation: Improve README, add tutorials, or write guides
- 🎨 UI/UX: Enhance the user interface and experience
- 🧪 Testing: Write unit and integration tests
- 🌐 Localization: Translate the app to other languages
- Follow the existing code style
- Write meaningful commit messages
- Add tests for new features
- Update documentation as needed
- Be respectful and constructive in discussions
Found a bug? Please open an issue with:
- Clear title and description
- Steps to reproduce
- Expected vs actual behavior
- Screenshots (if applicable)
Have an idea? Create a feature request and describe:
- The problem you're trying to solve
- Your proposed solution
- Alternative approaches you've considered
GrindMap is built using a clear separation between Frontend and Backend, making the project scalable, maintainable, and contributor-friendly.
The backend/ directory handles all server-side responsibilities, including:
- Fetching and processing user data (e.g., coding platform stats)
- Scraping or integrating external platforms (like LeetCode, GitHub, etc.)
- Managing APIs that serve data to the frontend
- Handling business logic and data transformation
The backend acts as the brain of the system:
- It gathers raw data
- Cleans and structures it
- Exposes it through APIs for the frontend
The frontend/ directory is responsible for:
- User interface (UI)
- Visualizing streaks, progress, and consistency
- Displaying data received from backend APIs
- Providing interactive components for users
The frontend acts as the face of the system:
- It requests data from the backend
- Converts raw data into meaningful visuals
- Delivers a smooth and engaging user experience
High-level flow of the application:
- User opens the web application (Frontend)
- Frontend sends a request to the Backend API
- Backend:
- Fetches data from external platforms
- Processes and structures the data
- Backend returns processed data to the Frontend
- Frontend:
- Renders streaks, stats, and progress
- Updates UI based on received data
- Clear separation of concerns
- Easier debugging and scaling
- Smooth onboarding for new contributors
This project is licensed under the MIT License - see the LICENSE file for details.
- LeetCode, CodeForces, and CodeChef for their amazing platforms
- Our amazing contributors who make this project possible
- The open-source community for inspiration and support
© 2026 GrindMap. Made with ❤️ by Yugendra N




