🚀 DSA Algorithm Learning Platform

🎯 Master Data Structures & Algorithms with Interactive Learning, Real-time Code Execution & Gamified Progress Tracking

🤖 NEW: Automated Code Review Bot for Quality Assurance

🌟 Live Demo • 📖 Documentation • 🐛 Report Bug • ✨ Request Feature

---

🎬 Demo & Screenshots

🖥️ Live Application

📱 Platform Preview

Dashboard	Problem Solving	Leaderboard
Learn	Playground	Profile

---

📋 Table of Contents

• ✨ Overview
• 🎯 Features
• 🛠️ Tech Stack
• 🏗️ Project Structure
• ⚡ Quick Start
• 🔧 Installation
• 🚀 Usage
• 📊 API Endpoints
• 🌐 Environment Variables
• 🧪 Testing
• 🔄 GitHub Workflows
• 🤝 Contributing
• 📄 License
• 👥 Authors

---

✨ Overview

DSA Algorithm Learning Platform is a modern, full-stack web application designed to make learning Data Structures and Algorithms engaging and interactive. Built with React, Node.js, and Prisma, it provides a comprehensive environment for coding practice, progress tracking, and competitive learning.

🎯 Key Highlights

🎮 Interactive Learning	📊 Progress Analytics	🏆 Gamification
Real-time code execution with instant feedback	Detailed progress tracking & performance metrics	Achievements, badges & global leaderboards

💻 Multi-Language	🎨 3D Visualizations	📱 Responsive Design
Support for multiple programming languages	Beautiful Three.js animations & interactions	Seamless experience across all devices

📈 Platform Statistics

---

🎯 Features

🧩 Core Features

Feature	Description
🔐 User Authentication	Secure JWT-based registration and login system
📝 Problem Database	Extensive collection of DSA problems categorized by difficulty
💻 Code Editor	Monaco Editor with syntax highlighting and auto-completion
⚡ Real-time Execution	Execute code with test cases and get instant feedback
📊 Progress Analytics	Track solved problems, success rates, and time complexity
🏆 Leaderboard System	Compete with other users and climb the rankings
🎖️ Achievement System	Unlock badges and achievements for milestones
📱 Responsive UI	Beautiful, mobile-first design with dark mode support

🎨 Advanced Features

• 3D Background Animations using Three.js and React Three Fiber
• Interactive Data Visualizations with Recharts
• Real-time Notifications using React Hot Toast
• State Management with Zustand
• Form Validation with React Hook Form
• API Caching with TanStack Query (React Query)
• Code Syntax Highlighting with React Syntax Highlighter
• Intersection Observer for performance optimization

---

🛠️ Tech Stack

Frontend 🎨

Technology	Version	Purpose
React	18.3.1	UI Framework
Vite	5.4.17	Build Tool & Dev Server
Tailwind CSS	3.4.1	Styling Framework
React Router	6.20.1	Client-side routing
Framer Motion	10.16.16	Animations
Three.js	0.158.0	3D Graphics
Monaco Editor	0.44.0	Code Editor
Zustand	4.4.7	State Management
TanStack Query	5.8.4	Server State Management
Recharts	2.8.0	Data Visualization

Backend ⚙️

Technology	Version	Purpose
Node.js	18+	Runtime Environment
Express.js	4.18.2	Web Framework
Prisma	5.6.0	Database ORM
MySQL	Latest	Database
JWT	9.0.2	Authentication
bcryptjs	2.4.3	Password Hashing
Helmet	7.1.0	Security Middleware
Morgan	1.10.0	HTTP Request Logger

Development Tools 🔧

---

🏗️ Project Structure

DsaAlgo/
├── 📁 backend/                 # Node.js/Express backend
│   ├── 📄 server.js           # Main server entry point
│   ├── 📁 config/             # Database configuration
│   ├── 📁 controllers/        # Route controllers
│   │   ├── authController.js  # Authentication logic
│   │   ├── problemController.js # Problem management
│   │   ├── progressController.js # User progress tracking
│   │   └── leaderboardController.js # Leaderboard logic
│   ├── 📁 middleware/         # Custom middleware
│   │   └── auth.js           # JWT authentication middleware
│   ├── 📁 prisma/            # Database schema & migrations
│   │   ├── schema.prisma     # Database schema definition
│   │   └── seed.js           # Database seeding script
│   ├── 📁 routes/            # API route definitions
│   └── 📄 package.json       # Backend dependencies
│
├── 📁 frontend/               # React frontend application
│   ├── 📄 index.html         # HTML entry point
│   ├── 📁 src/
│   │   ├── 📄 App.jsx        # Main React component
│   │   ├── 📁 components/    # Reusable UI components
│   │   │   ├── Dashboard.jsx  # User dashboard
│   │   │   ├── ProblemList.jsx # Problem browsing
│   │   │   ├── ProblemDetail.jsx # Individual problem view
│   │   │   ├── Navbar.jsx    # Navigation component
│   │   │   └── 3D/           # Three.js 3D components
│   │   ├── 📁 pages/         # Route-level components
│   │   │   ├── Login.jsx     # Authentication pages
│   │   │   ├── Register.jsx
│   │   │   └── Leaderboard.jsx
│   │   ├── 📁 store/         # Zustand state management
│   │   │   ├── authStore.js  # Authentication state
│   │   │   ├── problemStore.js # Problem data state
│   │   │   └── leaderboardStore.js # Leaderboard state
│   │   ├── 📁 services/      # API service layer
│   │   │   └── api.js        # Axios API configuration
│   │   ├── 📁 data/          # Static data and mock data
│   │   └── 📁 utils/         # Utility functions
│   ├── 📄 vite.config.js     # Vite build configuration
│   ├── 📄 tailwind.config.js # Tailwind CSS configuration
│   └── 📄 package.json       # Frontend dependencies
│
└── 📄 README.md              # Project documentation

🗂️ Key Directories Explained

Directory	Purpose
backend/controllers/	Business logic for API endpoints
backend/routes/	API route definitions and middleware
backend/prisma/	Database schema, migrations, and seeding
frontend/src/components/	Reusable React UI components
frontend/src/store/	Global state management with Zustand
frontend/src/services/	API integration and HTTP client setup

---

⚡ Quick Start

Get up and running in under 5 minutes! 🏃‍♂️

Prerequisites

• Node.js (v18 or higher) 📦
• npm or yarn package manager 📋
• MySQL database (local or cloud) 🗄️
• Git for version control 🔧

🚀 One-Command Setup

# 📥 Clone the repository
git clone https://github.com/adarsh-priydarshi-5646/DsaAlgo.git
cd DsaAlgo

# ⚙️ Setup backend
cd backend && npm install
cp .env.example .env  # 🔧 Configure your environment variables
npm run db:generate && npm run db:push && npm run db:seed
npm run dev

# 🎨 Setup frontend (in a new terminal)
cd ../frontend && npm install
cp .env.example .env  # 🔧 Configure frontend environment  
npm run dev

🎉 That's it! Open http://localhost:3000 to see the app.

---

🔧 Installation

Step 1: Clone the Repository

git clone https://github.com/adarsh-priydarshi-5646/DsaAlgo.git
cd DsaAlgo

Step 2: Backend Setup

cd backend

# Install dependencies
npm install

# Setup environment variables
cp .env.example .env
# Edit .env with your database credentials and JWT secret

Required Environment Variables:

DATABASE_URL="mysql://username:password@localhost:3306/dsaalgo"
JWT_SECRET="your-super-secret-jwt-key"
JWT_EXPIRES_IN="7d"
FRONTEND_URL="http://localhost:3000"
PORT=5001

Step 3: Database Setup

# Generate Prisma client
npm run db:generate

# Push schema to database
npm run db:push

# Seed the database with sample data
npm run db:seed

Step 4: Frontend Setup

cd ../frontend

# Install dependencies
npm install

# Setup environment variables
cp .env.example .env
# Edit .env with your backend URL

Frontend Environment Variables:

VITE_API_URL="http://localhost:5001"

Step 5: Start Development Servers

# Start backend (from backend directory)
npm run dev

# Start frontend (from frontend directory - new terminal)
npm run dev

---

🚀 Usage

🔐 Authentication

1. Register: Create a new account with email and username
2. Login: Access your personalized dashboard
3. Profile: Manage your account and view statistics

🧩 Problem Solving

1. Browse Problems: Explore categorized DSA problems
2. Select Difficulty: Choose from School, Basic, Easy, Medium, Hard
3. Code Solution: Use the Monaco editor with syntax highlighting
4. Test & Submit: Run test cases and submit your solution
5. Track Progress: Monitor your solving statistics

📊 Progress Tracking

• View your problem-solving statistics
• Track time complexity improvements
• Monitor success rates across categories
• Earn achievements and badges

🏆 Leaderboard

• Compete with other users
• View global rankings
• Track your position and progress

💻 Code Examples

Sample API Usage:

// Login user
const loginResponse = await fetch('/api/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    login: 'username@example.com',
    password: 'password123'
  })
});

// Fetch problems
const problemsResponse = await fetch('/api/problems', {
  headers: { 'Authorization': `Bearer ${token}` }
});

// Submit solution
const submissionResponse = await fetch('/api/problems/submit', {
  method: 'POST',
  headers: { 
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${token}`
  },
  body: JSON.stringify({
    problemId: 'problem-id',
    code: 'your-solution-code',
    language: 'javascript'
  })
});

---

📊 API Endpoints

🔐 Authentication Routes (/api/auth)

Method	Endpoint	Description	Auth Required
POST	/register	Register new user	❌
POST	/login	User login	❌
GET	/me	Get current user	✅
PUT	/profile	Update user profile	✅

🧩 Problem Routes (/api/problems)

Method	Endpoint	Description	Auth Required
GET	/	Get all problems	✅
GET	/categories	Get problem categories	✅
GET	/:id	Get specific problem	✅
POST	/submit	Submit solution	✅
GET	/:id/solutions	Get problem solutions	✅

📈 Progress Routes (/api/progress)

Method	Endpoint	Description	Auth Required
GET	/	Get user progress	✅
GET	/stats	Get detailed statistics	✅
POST	/update	Update progress	✅

🏆 Leaderboard Routes (/api/leaderboard)

Method	Endpoint	Description	Auth Required
GET	/	Get global leaderboard	✅
GET	/achievements	Get user achievements	✅

---

🌐 Environment Variables

Backend Configuration

# Database
DATABASE_URL="mysql://username:password@localhost:3306/dsaalgo"

# JWT Configuration
JWT_SECRET="your-256-bit-secret"
JWT_EXPIRES_IN="7d"

# Server Configuration
PORT=5001
NODE_ENV="development"

# CORS Configuration
FRONTEND_URL="http://localhost:3000"

# Rate Limiting
RATE_LIMIT_WINDOW_MS=900000  # 15 minutes
RATE_LIMIT_MAX_REQUESTS=100

# File Upload (if needed)
MAX_FILE_SIZE=5242880  # 5MB

Frontend Configuration

# API Configuration
VITE_API_URL="http://localhost:5001"

# App Configuration
VITE_APP_NAME="DSA Learning Platform"
VITE_APP_VERSION="1.0.0"

# Features Flags
VITE_ENABLE_3D_ANIMATIONS="true"
VITE_ENABLE_DARK_MODE="true"

---

🧪 Testing

Running Tests

# Backend tests
cd backend
npm test

# Frontend tests
cd frontend
npm test

# E2E tests
npm run test:e2e

Test Coverage

# Generate coverage report
npm run test:coverage

Manual Testing Checklist

• User registration and login
• Problem browsing and filtering
• Code editor functionality
• Solution submission
• Progress tracking
• Leaderboard updates
• Responsive design across devices

---

🔄 GitHub Workflows

✅ Automated CI/CD Pipeline

Our platform uses robust GitHub Actions workflows to ensure code quality and smooth deployments:

🚀 CI Workflow Features

• Frontend Tests: Build validation, ESLint checks, bundle size monitoring
• Backend Tests: Prisma schema validation, server configuration checks
• Security Scans: Dependency audits, secret detection
• Code Quality: Automated formatting and style checks

📋 PR Checks

• Semantic PR Titles: Enforces conventional commit format
• Smart File Detection: Only runs relevant tests for changed files
• Console.log Validation: Allows server logging while maintaining code quality
• Bundle Size Monitoring: Tracks frontend build size without strict limits

🛠️ Recent Workflow Improvements

• ✅ Fixed console.log restrictions for server files
• ✅ Improved bundle size validation approach
• ✅ Made lint warnings non-blocking for better developer experience
• ✅ Enhanced backend validation reliability
• ✅ Added comprehensive workflow documentation

🧪 Local Testing

Test your changes before pushing:

# Run all workflow checks locally
chmod +x scripts/test-workflows.sh
./scripts/test-workflows.sh

📖 For detailed workflow information, see Workflow Guide

---

🤝 Contributing

We welcome contributions from developers of all skill levels! 🎉

🔄 How to Contribute

1. Fork the Repository

   # Click the Fork button on GitHub, then:
   git clone https://github.com/YOUR-USERNAME/DsaAlgo.git
   cd DsaAlgo

2. Create a Feature Branch

   git checkout -b feature/amazing-feature

3. Make Your Changes

   • Add new features
   • Fix bugs
   • Improve documentation
   • Add tests

4. Test Your Changes

   npm run test
   npm run lint

5. Commit Your Changes

   git add .
   git commit -m "✨ Add amazing feature"

6. Push to Your Fork

   git push origin feature/amazing-feature

7. Create a Pull Request

   • Go to GitHub and create a Pull Request
   • Describe your changes clearly
   • Link any relevant issues

📋 Contribution Guidelines

Code Style

• Use ESLint and Prettier for consistent formatting
• Follow conventional commit messages
• Write clear, descriptive variable and function names
• Add comments for complex logic

Pull Request Guidelines

• Ensure all tests pass ✅
• Update documentation if needed 📝
• Add tests for new features 🧪
• Keep PRs focused and atomic 🎯

Issue Reporting

When reporting bugs, please include:

• Steps to reproduce the issue
• Expected behavior vs actual behavior
• Browser/OS information
• Screenshots if applicable

🏷️ Good First Issues

Look for issues labeled with:

• good first issue - Perfect for newcomers
• help wanted - We need community help
• documentation - Improve our docs
• bug - Fix existing issues

---

📄 License

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

MIT License

Copyright (c) 2024 Adarsh Priydarshi & Contributors

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.

---

Special thanks to:

• 🌟 All Contributors who helped build this platform
• 🔧 Open Source Community for amazing libraries and tools
• 👥 Beta Testers who provided valuable feedback
• 🎓 Education Technology pioneers who inspire us
• 💡 Algorithm Enthusiasts who shared ideas and suggestions

---

🌟 Show Your Support

If this project helped you learn DSA concepts or inspired your own projects, please consider:

📈 Project Stats

---

🤖 Automated Code Review Bot

This repository includes an intelligent code review bot that automatically:

✅ Quality Checks

• Linting: ESLint validation for both frontend and backend
• Build Verification: Ensures code compiles successfully
• Security Audit: Scans for vulnerabilities and hardcoded credentials
• Code Standards: Checks for console logs, TODOs, and best practices

🔍 Review Process

• Automatic Reviews: Every PR gets automatically reviewed
• Status Checks: Required checks must pass before merging
• Detailed Feedback: Comprehensive analysis with suggestions
• Branch Protection: Prevents bad code from reaching main branch

🛡️ Branch Protection Rules

• Requires PR reviews before merging
• Status checks must pass
• Conversation resolution required
• Auto-delete merged branches

📋 Setup Instructions

1. Enable branch protection rules (see .github/branch-protection-rules.md)
2. Configure required status checks
3. Set up CODEOWNERS for review assignments
4. The bot will automatically review all new PRs

---

Made with ❤️ by developers, for developers

Happy Coding! 🚀