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

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.

• Interactive Problem Solving: Solve DSA problems with real-time code execution
• Progress Tracking: Monitor your learning journey with detailed analytics
• Gamified Experience: Earn achievements, badges, and compete on leaderboards
• Multi-Language Support: Code in multiple programming languages
• 3D Visualizations: Beautiful 3D animations and interactive elements
• Responsive Design: Seamless experience across all devices

• 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

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

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

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

# Clone the repository
git clone https://github.com/naveenkumar29052006/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.

git clone https://github.com/naveenkumar29052006/DsaAlgo.git
cd DsaAlgo

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

# 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

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"

# Start backend (from backend directory)
npm run dev

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

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

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

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

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

Sample API Usage:

// Login user
const loginResponse = await fetch('/api/auth/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    login: '[email protected]',
    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'
  })
});

# 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

# 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"

# Backend tests
cd backend
npm test

# Frontend tests
cd frontend
npm test

# E2E tests
npm run test:e2e

# Generate coverage report
npm run test:coverage

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

We welcome contributions from developers of all skill levels! 🎉

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

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

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

When reporting bugs, please include:

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

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

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:

• Open Source Community for amazing libraries and tools
• Contributors who help improve this platform
• Users who provide feedback and suggestions
• Education Technology pioneers who inspire us