🎯 Algorithm Visualizer Pro

Transform Complex Algorithms into Interactive Visual Experiences

🚀 Live Demo · 📖 Documentation · 🐛 Report Bug · 💡 Request Feature

• 🌟 Overview
• ✨ Key Features
• 🛠️ Tech Stack
• 🎯 Why Choose Algorithm Visualizer Pro?
• 📸 Screenshots
• 🚀 Quick Start
• ⚙️ Installation
• 🐳 Docker Setup
• ☁️ Deployment
• 📚 Algorithm Categories
• 🎨 UI/UX Features
• 🔧 Configuration
• 📊 Performance
• 🤝 Contributing
• 📄 License
• 👨‍💻 About the Developer

Algorithm Visualiser Pro is a cutting-edge educational platform that transforms abstract algorithmic concepts into engaging, interactive visual experiences. Built with modern web technologies, it serves as a comprehensive learning tool for students, educators, and algorithm enthusiasts worldwide.

To bridge the gap between theoretical computer science and practical understanding by providing intuitive, step-by-step algorithm visualizations that make complex concepts accessible to learners at all levels.

Interactive Visualizations Real-time step-by-step execution with customizable speed controls

Educational Focus Comprehensive explanations with time/space complexity analysis

Responsive Design Seamless experience across desktop, tablet, and mobile devices

Dark/Light Mode Eye-friendly themes with smooth transitions and modern aesthetics

• 🎛️ Real-time Controls: Play, pause, step-through, and speed adjustment
• 📊 Performance Metrics: Live complexity analysis and execution statistics
• 🎨 Custom Themes: Multiple color schemes and visual styles
• 💾 Save & Share: Export visualizations and share with others
• 📝 Code Display: Synchronized code highlighting during execution
• 🔊 Audio Feedback: Optional sound effects for better engagement
• 📱 PWA Support: Install as a desktop/mobile app
• 🌐 Multi-language: Support for multiple programming languages

Get up and running in under 5 minutes!

# 1️⃣ Fork the repository

# 2️⃣ Clone the repository
git clone https://github.com/<your-username>/Algorithm-Visualiser-Platform.git
cd Algorithm-Visualiser-Platform

# 3️⃣ Install dependencies
npm install
cd backend && pip install -r requirements.txt
cd backend && pip install -r requirements.txt

# 4️⃣ Start development servers
npm run dev        # Frontend (http://localhost:3000)
npm run dev:api    # Backend (http://localhost:8000)

# 🎉 Open your browser and start exploring!

• Node.js 18.0+ (Download)
• Python 3.11+ (Download)
• Git (Download)

# Navigate to project root
cd Algorithm-Visualiser-Platform/frontend

# Install dependencies
npm install

# Available scripts
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint
npm run lint:fix     # Fix ESLint issues

Environment Variables (.env):

VITE_API_BASE_URL=http://localhost:8000
VITE_APP_TITLE="Algorithm Visualiser Pro"
VITE_ENABLE_ANALYTICS=false

# Navigate to backend directory
cd Algorithm-Visualiser-Platform/backend

# Create virtual environment
python -m venv venv

# Activate virtual environment
# Windows:
venv\Scripts\activate
# macOS/Linux:
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

# Start development server
uvicorn main:app --reload --host 0.0.0.0 --port 8000

Environment Variables (.env):

ENVIRONMENT=development
DATABASE_URL=sqlite:///./app.db
SECRET_KEY=your-secret-key-here
CORS_ORIGINS=["http://localhost:3000", "http://localhost:5173"]

# Start entire application stack
docker-compose up -d

# View logs
docker-compose logs -f

# Stop services
docker-compose down

# Multi-stage build for optimized production image
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

FROM python:3.11-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
EXPOSE 8000
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

1. Create new Web Service on Render
2. Connect GitHub repository
3. Configure settings:
   • Build Command: pip install -r requirements.txt
   • Start Command: uvicorn main:app --host 0.0.0.0 --port $PORT
   • Environment: Python 3.11

# Build and push images
docker build -t yourusername/algo-visualiser-frontend ./frontend
docker build -t yourusername/algo-visualiser-backend ./backend

docker push yourusername/algo-visualiser-frontend
docker push yourusername/algo-visualiser-backend

Using AWS ECS + ECR:

# Build and tag for ECR
aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin your-account.dkr.ecr.us-east-1.amazonaws.com

docker build -t algo-visualiser .
docker tag algo-visualiser:latest your-account.dkr.ecr.us-east-1.amazonaws.com/algo-visualiser:latest
docker push your-account.dkr.ecr.us-east-1.amazonaws.com/algo-visualiser:latest

Using Cloud Run:

# Build and deploy
gcloud builds submit --tag gcr.io/PROJECT-ID/algo-visualiser
gcloud run deploy --image gcr.io/PROJECT-ID/algo-visualiser --platform managed

• Tree Algorithms: AVL, Red-Black, B-Trees
• String Algorithms: KMP, Rabin-Karp, Boyer-Moore
• Machine Learning: Neural Networks, Decision Trees
• Cryptography: RSA, AES, Hash Functions

// Multiple built-in themes
const themes = {
  light: { primary: '#4F46E5', background: '#FFFFFF' },
  dark: { primary: '#818CF8', background: '#1F2937' },
  ocean: { primary: '#0EA5E9', background: '#0F172A' },
  forest: { primary: '#059669', background: '#064E3B' }
};

• Mobile: 320px - 768px
• Tablet: 768px - 1024px
• Desktop: 1024px+
• 4K: 2560px+

• Code Splitting: Dynamic imports for better loading
• Lazy Loading: Components loaded on demand
• Image Optimization: WebP format with fallbacks
• Service Worker: Offline capability and caching

// vite.config.js
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8000'
    }
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'axios']
        }
      }
    }
  }
});

# config.py
from pydantic import BaseSettings

class Settings(BaseSettings):
    app_name: str = "Algorithm Visualizer API"
    debug: bool = False
    cors_origins: list = ["http://localhost:3000"]
    
    class Config:
        env_file = ".env"

settings = Settings()

• Tree Shaking: Remove unused code
• Code Splitting: Load components on demand
• Image Optimization: WebP with fallbacks
• CDN: Static assets served via CDN
• Compression: Gzip/Brotli compression

We welcome contributions from the community! Here's how you can help:

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

• JavaScript: Follow ESLint configuration
• Python: Follow PEP 8 style guide
• Commits: Use conventional commit messages
• Testing: Add tests for new features
• Documentation: Update README and comments

1. Update documentation for any new features
2. Add tests that prove your fix/feature works
3. Ensure all tests pass
4. Update the README.md if needed
5. Request review from maintainers

Use the issue template to report bugs.

Use the feature request template to suggest new features.

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

MIT License

Copyright (c) 2024 Yuvraj Udaywal

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.

Yuvraj Udaywal

Full Stack Developer & Algorithm Enthusiast

Passionate about creating innovative web applications and making complex algorithms accessible through interactive visualizations. With expertise in full-stack development using React.js, Node.js, and Python, I strive to bridge the gap between theoretical computer science and practical understanding.

"To democratize algorithm education by making complex concepts visually intuitive and accessible to learners worldwide."

• React Team for the incredible framework
• FastAPI for the blazing-fast API framework
• TailwindCSS for the utility-first CSS framework
• Lucide for the beautiful icon library
• Vercel for seamless deployment experience
• Open Source Community for inspiration and contributions