Skip to content

Your All in one Streak and Consistency Assistant - Effortlessly manage Progress across platforms

Notifications You must be signed in to change notification settings

meenakshi30-code/GrindMap

 
 

Repository files navigation

🚀 GrindMap

Track Your Coding Journey

Your Ultimate Streak & Consistency Companion for Competitive Programming

Effortlessly monitor your progress across multiple coding platforms with beautiful visualizations and real-time analytics.

License: MIT Open Source GitHub Stars PRs Welcome Node.js React Express.js MongoDB

🌐 Live Demo📖 Documentation🤝 Contributing🐛 Issues💬 Discussions


📋 Table of Contents


✨ Features

🎯 Multi-Platform Tracking

Track your coding journey across 7+ competitive programming platforms with unified analytics and progress visualization.

Real-Time Synchronization

Fetch live statistics using official APIs and scraping techniques, ensuring your data is always up-to-date.

📊 Advanced Analytics

  • 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

🔥 Streak & Consistency Tracking

  • 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

🎨 Modern UI/UX

  • 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

🔧 Developer-Friendly

  • 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

🌟 Additional Features

  • 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

🎯 Supported Platforms

Platform Features API Type
LeetCode Problems Solved, Difficulty Stats, Submissions Official API
CodeForces Rating, Problems Solved, Contests Scraping
CodeChef Rating, Problems Solved, Divisions Scraping
AtCoder Rating, Problems Solved Scraping
GitHub Contributions, Repositories Official API
SkillRack Problems Solved, Categories Scraping

More platforms coming soon!


🛠️ Tech Stack

Frontend

React JavaScript CSS3 HTML5

Backend

Node.js Express.js MongoDB

Libraries & Tools

Axios Puppeteer React Circular Progressbar React Calendar Heatmap

Development Tools

NPM Git VS Code


🎮 Interactive Demo

🎯 Experience GrindMap Without Setup!

Try all features with realistic sample data - no accounts required!

🚀 How to Try the Demo

  1. Clone & Install:

    git clone https://github.com/Yugenjr/GrindMap.git
    cd GrindMap/frontend
    npm install
  2. Start the Application:

    npm start
  3. Click "View Demo" on the main page

  4. 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

📊 Sample Data Included

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

Demo video coming soon! Watch the full feature walkthrough.

📖 Detailed Demo Guide


🚀 Quick Start

📋 Prerequisites

  • Node.js (v14 or higher) - Download
  • npm or yarn - Comes with Node.js
  • Git - Download

⚡ Installation

Option 1: Full Stack Setup

# 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

Option 2: Frontend Only (Demo Mode)

# Clone and setup frontend
git clone https://github.com/Yugenjr/GrindMap.git
cd GrindMap/frontend
npm install
npm start

Alternative: Docker Setup 🐳

For a containerized setup with consistent environments across machines:

docker-compose up

See DOCKER_SETUP.md for detailed Docker instructions.

🌐 Access the Application


📁 Project Structure

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

🔌 API Reference

Base URL

http://localhost:5000/api

Endpoints

GET /scrape/:platform/:username

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 /user/:username

Get combined statistics across all platforms for a user.

POST /auth/login

User authentication endpoint.

Error Response

{
  "success": false,
  "error": "Error message",
  "code": "ERROR_CODE"
}

📖 Complete API Documentation


📸 Screenshots

🖥️ Dashboard Overview

Main dashboard showing multi-platform tracking with progress rings

Dashboard

📊 Platform Details

Detailed statistics with expandable cards and difficulty breakdown

Platform Details

🔥 Activity Heatmap

GitHub-style contribution calendar showing submission patterns

Activity Heatmap

📅 Daily Activity

Today's activity tracker with platform-wise status indicators

Daily Activity

🎮 Demo Mode

Interactive demo with sample data for all features

Demo Mode

Screenshots will be updated regularly. Last updated: January 2026


🤝 Contributing

We ❤️ contributions! Every contribution makes GrindMap better for everyone.

PRs Welcome Good First Issues

🚀 Getting Started

  1. Fork the repository
  2. Clone your fork: git clone https://github.com/your-username/GrindMap.git
  3. Create a feature branch: git checkout -b feature/AmazingFeature
  4. Install dependencies: npm install (both frontend & backend)
  5. Make your changes
  6. Test thoroughly
  7. Commit your changes: git commit -m 'Add AmazingFeature'
  8. Push to the branch: git push origin feature/AmazingFeature
  9. Open a Pull Request

🏆 Contribution Areas

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

📋 Development Guidelines

  • 🔍 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

🎯 Good First Issues

New to open source? Start here!


🗺️ Roadmap

🎯 Q1 2026 (Current)

  • Multi-platform support (LeetCode, CodeForces, CodeChef)
  • Real-time data fetching
  • Interactive demo mode
  • Mobile app development
  • Advanced analytics dashboard

🚀 Q2 2026

  • Support for 5+ additional platforms
  • User authentication & profiles
  • Data export functionality
  • Performance optimizations
  • Docker containerization

💫 Future Plans

  • 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!


❓ FAQ

🤔 General Questions

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.

🛠️ Technical Questions

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.

🐛 Troubleshooting

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!


📝 License

GrindMap is licensed under the MIT License.

License: MIT

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.

🙏 Acknowledgments

GrindMap wouldn't be possible without these amazing communities and tools:

🎯 Platform Communities

  • 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

🛠️ Open Source Ecosystem

  • React - For the amazing frontend framework
  • Node.js - Powering our backend
  • Express.js - Simple, fast web framework
  • MongoDB - Flexible NoSQL database

👥 Contributors

A huge thank you to all our contributors who make GrindMap better every day!

💡 Inspiration

  • 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


📞 Contact

Got questions, feedback, or just want to say hi? We'd love to hear from you!

💬 Communication Channels

GitHub Issues GitHub Discussions Email

👨‍💻 Project Maintainers

  • Yugendra N (@Yugenjr) - Project Creator & Lead Developer

🌟 Show Your Support

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

GitHub LinkedIn Twitter

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/AmazingFeature
  3. Commit your changes: git commit -m 'Add AmazingFeature'
  4. Push to the branch: git push origin feature/AmazingFeature
  5. Open a Pull Request

Good First Issues


Looking to contribute? Check out our Good First Issues - perfect for first-time contributors!

Areas We Need Help With


  • 🐛 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

📋 Development Guidelines

  • Follow the existing code style
  • Write meaningful commit messages
  • Add tests for new features
  • Update documentation as needed
  • Be respectful and constructive in discussions

🐛 Reporting Issues

Found a bug? Please open an issue with:

  • Clear title and description
  • Steps to reproduce
  • Expected vs actual behavior
  • Screenshots (if applicable)

💡 Feature Requests

Have an idea? Create a feature request and describe:

  • The problem you're trying to solve
  • Your proposed solution
  • Alternative approaches you've considered

🏗️ Project Architecture

GrindMap is built using a clear separation between Frontend and Backend, making the project scalable, maintainable, and contributor-friendly.

🔙 Backend


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

🎨 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

🔄 Workflow Overview


High-level flow of the application:

  1. User opens the web application (Frontend)
  2. Frontend sends a request to the Backend API
  3. Backend:
    • Fetches data from external platforms
    • Processes and structures the data
  4. Backend returns processed data to the Frontend
  5. Frontend:
    • Renders streaks, stats, and progress
    • Updates UI based on received data

💡 This architecture ensures


  • Clear separation of concerns
  • Easier debugging and scaling
  • Smooth onboarding for new contributors

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

  • 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

GitHub LinkedIn Twitter

About

Your All in one Streak and Consistency Assistant - Effortlessly manage Progress across platforms

Resources

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 66.4%
  • Shell 16.2%
  • CSS 15.8%
  • Other 1.6%