🌟 SortVision 🌟

Interactive Sorting Algorithm Visualizer

---

🎯 What is SortVision?

SortVision is an interactive web application that brings sorting algorithms to life through real-time visualization. Built with modern web technologies, it provides an engaging platform for learning and understanding various sorting algorithms.

🌟 Key Features

• Interactive Visualizations: Watch sorting algorithms in action with real-time animations
• Multiple Algorithms: Explore 8 different sorting algorithms
• Customizable Parameters: Adjust speed, array size, and more
• Performance Metrics: Track comparisons, swaps, and time complexity
• Educational Insights: Learn about algorithm behavior and efficiency
• Responsive Design: Works seamlessly on desktop and mobile devices

"Visualize your data, understand sorting better!"

🚀 Help Us Build Something Amazing Together!

Made algorithms click for you? You're exactly who we built this for! ✨ Help other developers discover what you just experienced 💝

💭 "Every star motivates us to add more algorithms and features!" - The SortVision Team

---

📚 Table of Contents

1. ✨ Features
2. 🦾 Tech Stack
3. 📂 Project Structure
4. 📸 Screenshots
5. 🚀 Quick Start
6. 👨‍🔧 Detailed Setup
7. 🛠️ Developer Tools
8. 🎯 Target Audience
9. 🤝 Contributing
10. 🌟 Awesome Contributors
11. 📜 License
12. 📬 Feedback & Suggestions

---

✨ Features

🎮 Interactive Visualization

• Real-time visual representation of sorting steps
• Adjustable animation speed
• Pause and resume functionality
• Array size customization
• Random array generation

📊 Supported Algorithms

• Bubble Sort: Simple comparison-based algorithm
• Selection Sort: In-place comparison sorting
• Insertion Sort: Adaptive sorting algorithm
• Merge Sort: Divide-and-conquer algorithm
• Quick Sort: Efficient, in-place sorting
• Heap Sort: Comparison-based sorting using binary heap data structure
• Radix Sort: Non-comparative integer sorting
• Bucket Sort: Distribution sort that groups elements into buckets

📈 Performance Tracking

• Real-time comparison count
• Swap operation tracking
• Time complexity visualization
• Algorithm efficiency metrics

🎨 User Interface

• Modern, responsive design
• Dark mode support
• Mobile-friendly interface
• Intuitive controls

---

🦾 Tech Stack

🌐 Frontend Technologies

• Framework: React.js with Next.js
• Styling: Tailwind CSS v4 with custom animations
• Icons: Lucide React
• Audio: Web Audio API
• Analytics: Vercel Analytics & Speed Insights
• Routing: React Router DOM (client-side) with Next.js App Router
• Build Tool: Next.js

🛠️ Development Tools

• Build Tool: Vite
• Package Manager: npm/pnpm
• Code Quality: ESLint
• Version Control: Git
• Deployment: Vercel

🔧 Future Enhancements

• Backend integration with Node.js
• User preferences storage
• Algorithm performance history
• Custom algorithm support

---

📂 Project Structure

SortVision/
├─ .github/                    # GitHub specific configurations
│  ├─ ISSUE_TEMPLATE/          # Templates for GitHub issues
│  │  ├─ bug_report.md         # Bug report template
│  │  ├─ config.yml            # Issue template configuration
│  │  ├─ documentation.md      # Documentation request template
│  │  ├─ feature_request.md    # Feature request template
│  │  └─ performance.md        # Performance issue template
│  ├─ dependabot.yml           # Dependabot configuration
│  └─ pull_request_template.md # PR template
├─ .gitignore                  # Git ignore configuration
├─ CODE_OF_CONDUCT.md          # Community code of conduct
├─ CONTRIBUTING.md             # Contribution guidelines
├─ LICENSE                     # MIT license file
├─ README.md                   # Project documentation (this file)
├─ SECURITY.md                 # Security policy and reporting
└─ SortVision/                 # Main application directory
   ├─ .env.example             # Environment variables template
   ├─ Dockerfile               # Docker containerization config
   ├─ api/                     # API endpoints
   │  └─ gemini.js             # Gemini AI API integration
   ├─ components.json          # Component configuration
   ├─ docker-compose.yml       # Docker Compose configuration
   ├─ eslint.config.js         # ESLint configuration
   ├─ jsconfig.json            # JavaScript configuration
   ├─ next.config.mjs          # Next.js configuration
   ├─ nginx.conf               # Nginx configuration
   ├─ package-lock.json        # NPM package lock
   ├─ package.json             # NPM package definition
   ├─ pnpm-lock.yaml           # PNPM package lock
   ├─ postcss.config.mjs       # PostCSS configuration
   ├─ public/                  # Public static assets
   │  ├─ code/                 # Algorithm implementations in multiple languages
   │  │  ├─ bubble/            # Bubble Sort implementations
   │  │  │  ├─ c/              # C implementation
   │  │  │  │  └─ bubbleSort.c
   │  │  │  ├─ cpp/            # C++ implementation
   │  │  │  │  └─ bubbleSort.cpp
   │  │  │  ├─ csharp/         # C# implementation
   │  │  │  │  └─ bubbleSort.cs
   │  │  │  ├─ dart/           # Dart implementation
   │  │  │  │  └─ bubbleSort.dart
   │  │  │  ├─ golang/         # Go implementation
   │  │  │  │  └─ bubbleSort.go
   │  │  │  ├─ haskell/        # Haskell implementation
   │  │  │  │  └─ bubbleSort.hs
   │  │  │  ├─ java/           # Java implementation
   │  │  │  │  └─ bubbleSort.java
   │  │  │  ├─ javascript/     # JavaScript implementation
   │  │  │  │  └─ bubbleSort.js
   │  │  │  ├─ julia/          # Julia implementation
   │  │  │  │  └─ bubbleSort.jl
   │  │  │  ├─ kotlin/         # Kotlin implementation
   │  │  │  │  └─ bubbleSort.kt
   │  │  │  ├─ lua/            # Lua implementation
   │  │  │  │  └─ bubbleSort.lua
   │  │  │  ├─ php/            # PHP implementation
   │  │  │  │  └─ bubbleSort.php
   │  │  │  ├─ pseudocode/     # Pseudocode representation
   │  │  │  │  └─ bubbleSort.txt
   │  │  │  ├─ python/         # Python implementation
   │  │  │  │  └─ bubbleSort.py
   │  │  │  ├─ r/              # R implementation
   │  │  │  │  └─ bubbleSort.r
   │  │  │  ├─ ruby/           # Ruby implementation
   │  │  │  │  └─ bubbleSort.rb
   │  │  │  ├─ rust/           # Rust implementation
   │  │  │  │  └─ bubbleSort.rs
   │  │  │  ├─ scala/          # Scala implementation
   │  │  │  │  └─ bubbleSort.scala
   │  │  │  ├─ swift/          # Swift implementation
   │  │  │  │  └─ bubbleSort.swift
   │  │  │  └─ typescript/     # TypeScript implementation
   │  │  │     └─ bubbleSort.ts
   │  │  ├─ bucket/            # Bucket Sort implementations (same structure)
   │  │  ├─ heap/              # Heap Sort implementations (same structure)
   │  │  ├─ insertion/         # Insertion Sort implementations (same structure)
   │  │  ├─ merge/             # Merge Sort implementations (same structure)
   │  │  ├─ quick/             # Quick Sort implementations (same structure)
   │  │  ├─ radix/             # Radix Sort implementations (same structure)
   │  │  └─ selection/         # Selection Sort implementations (same structure)
   │  ├─ devTools/             # Developer tools directory
   │  │  ├─ core.js            # Core utilities and initialization
   │  │  ├─ device-info.js     # Device detection and information
   │  │  ├─ index.js           # Main entry point for debug tools
   │  │  ├─ monitoring.js      # Performance monitoring utilities
   │  │  ├─ performance.js     # Performance metrics tracking
   │  │  └─ ui.js              # Debug UI components and panel
   │  ├─ favicon.svg           # Site favicon
   │  ├─ google12e2679e2ea95334.html # Google site verification
   │  ├─ manifest.json         # PWA manifest
   │  ├─ mobile.css            # Mobile-specific styles
   │  ├─ og-image.png          # Open Graph image for sharing
   │  ├─ robots.txt            # Search engine crawling instructions
   │  ├─ sitemap.xml           # Site map for search engines
   │  ├─ splash.svg            # App splash screen
   │  ├─ sw.js                 # Service worker for offline support
   │  └─ twitter-image.png     # Twitter card image
   ├─ scripts/                 # Build and utility scripts
   │  └─ generate-sitemap.js   # Sitemap generator
   ├─ server/                  # Backend server directory
   │  └─ index.js              # Express server for API proxy
   ├─ src/                     # Source code directory
   │  ├─ App.css               # App-level styles
   │  ├─ App.jsx               # Main App component
   │  ├─ algorithms/           # Sorting algorithm implementations
   │  │  ├─ bubbleSort.jsx     # Bubble sort implementation
   │  │  ├─ bucketSort.jsx     # Bucket sort implementation
   │  │  ├─ heapSort.jsx       # Heap sort implementation
   │  │  ├─ index.js           # Algorithm exports
   │  │  ├─ insertionSort.jsx  # Insertion sort implementation
   │  │  ├─ mergeSort.jsx      # Merge sort implementation
   │  │  ├─ quickSort.jsx      # Quick sort implementation
   │  │  ├─ radixSort.jsx      # Radix sort implementation
   │  │  └─ selectionSort.jsx  # Selection sort implementation
   │  ├─ app/                  # Next.js App Router directory
   │  │  ├─ [[...slug]]/       # Dynamic catch-all route
   │  │  │  ├─ client.jsx      # Client-side component
   │  │  │  └─ page.jsx        # Page component
   │  │  ├─ favicon.svg        # App favicon
   │  │  ├─ globals.css        # Global CSS styles
   │  │  └─ layout.jsx         # Root layout component
   │  ├─ components/           # UI components
   │  │  ├─ MobileOverlay.jsx  # Mobile device support
   │  │  ├─ SEOContent.jsx     # SEO content component
   │  │  ├─ SortingVisualizer.jsx # Main visualization component
   │  │  ├─ chatbot/           # AI Chatbot components
   │  │  │  ├─ ChatAssistant.jsx # Main chatbot component
   │  │  │  ├─ ChatButton.jsx  # Chat button trigger
   │  │  │  ├─ ChatModal.jsx   # Chat modal dialog
   │  │  │  ├─ assistantEngine.js # AI engine logic
   │  │  │  └─ index.js        # Chatbot exports
   │  │  ├─ feedback/          # User feedback system
   │  │  │  ├─ FeedbackButton.jsx # Feedback button
   │  │  │  ├─ FeedbackForm.jsx # Feedback form
   │  │  │  ├─ FeedbackModal.jsx # Feedback modal
   │  │  │  ├─ githubService.js # GitHub integration
   │  │  │  ├─ index.js        # Feedback exports
   │  │  │  └─ locationService.js # Location detection
   │  │  ├─ panels/            # UI panels directory
   │  │  │  ├─ ConfigPanel.jsx # Configuration panel
   │  │  │  ├─ ContributionPanel.jsx # Contribution information panel
   │  │  │  ├─ DetailsPanel.jsx # Algorithm details panel
   │  │  │  ├─ MetricsPanel.jsx # Performance metrics panel
   │  │  │  ├─ config/         # Configuration components
   │  │  │  │  ├─ AlgorithmSelector.jsx # Algorithm selection
   │  │  │  │  ├─ ArraySizeControl.jsx # Array size controls
   │  │  │  │  ├─ ComplexityInfo.jsx # Complexity information
   │  │  │  │  ├─ ControlButtons.jsx # Control buttons
   │  │  │  │  ├─ SpeedControl.jsx # Animation speed control
   │  │  │  │  └─ index.js     # Config component exports
   │  │  │  ├─ contributions/  # Contribution-related components
   │  │  │  │  ├─ guide/       # Contribution guides
   │  │  │  │  │  ├─ BestPractices.jsx # Best practices guide
   │  │  │  │  │  ├─ ContributeGuide.jsx # How to contribute guide
   │  │  │  │  │  ├─ QuickReferences.jsx # Quick reference guide
   │  │  │  │  │  └─ index.js  # Guide component exports
   │  │  │  │  ├─ index.js     # Contribution component exports
   │  │  │  │  ├─ overview/    # Contribution overview
   │  │  │  │  │  ├─ ContributorList.jsx # List of contributors
   │  │  │  │  │  ├─ ContributorStats.jsx # Contributor statistics
   │  │  │  │  │  ├─ RepositoryHealth.jsx # Repository health metrics
   │  │  │  │  │  └─ index.js  # Overview component exports
   │  │  │  │  └─ ssoc/        # SSOC leaderboard system
   │  │  │  │     ├─ ExportButton.jsx # Data export functionality
   │  │  │  │     ├─ LeaderboardList.jsx # Leaderboard display
   │  │  │  │     ├─ LeaderboardRow.jsx # Individual row component
   │  │  │  │     ├─ config.js # Configuration settings
   │  │  │  │     ├─ exportService.js # Export service logic
   │  │  │  │     ├─ githubService.js # GitHub API integration
   │  │  │  │     └─ index.js  # SSOC exports
   │  │  │  ├─ details/        # Detail components
   │  │  │  │  ├─ AlgorithmDetails.jsx # Algorithm detail display
   │  │  │  │  ├─ AlgorithmInfo.jsx # Algorithm information
   │  │  │  │  ├─ AlgorithmSelector.jsx # Algorithm selection
   │  │  │  │  ├─ DataPanel.jsx # Data display panel
   │  │  │  │  ├─ FunFact.jsx  # Fun facts about algorithms
   │  │  │  │  ├─ InteractiveTip.jsx # Interactive tips
   │  │  │  │  ├─ LanguageSelector.jsx # Programming language selector
   │  │  │  │  └─ index.js     # Detail component exports
   │  │  │  ├─ index.js        # Panel component exports
   │  │  │  └─ metrics/        # Metric components
   │  │  │     ├─ AlgorithmComparison.jsx # Algorithm comparisons
   │  │  │     ├─ CurrentRunMetrics.jsx # Current run metrics
   │  │  │     ├─ RankingCard.jsx # Algorithm ranking display
   │  │  │     ├─ TestControls.jsx # Testing controls
   │  │  │     ├─ WinnerSummary.jsx # Algorithm comparison results
   │  │  │     └─ index.js     # Metric component exports
   │  │  ├─ settings/          # Application settings
   │  │  │  ├─ SettingsButton.jsx # Settings button
   │  │  │  ├─ SettingsForm.jsx # Settings form
   │  │  │  ├─ SettingsModal.jsx # Settings modal
   │  │  │  └─ index.js        # Settings exports
   │  │  ├─ sortingVisualizer/ # Visualization components
   │  │  │  ├─ AudioControls.jsx # Audio control components
   │  │  │  ├─ PerformanceMetrics.jsx # Performance display
   │  │  │  ├─ SortingControls.jsx # Sorting control buttons
   │  │  │  ├─ SortingHeader.jsx # Visualization header
   │  │  │  ├─ SortingVisualizer.jsx # Main visualizer
   │  │  │  └─ index.js        # Visualizer component exports
   │  │  ├─ ui/                # UI component library
   │  │  │  ├─ VolumeControl.jsx # Volume control component
   │  │  │  ├─ badge.jsx       # Badge component
   │  │  │  ├─ button.jsx      # Button component
   │  │  │  ├─ card.jsx        # Card component
   │  │  │  ├─ input.jsx       # Input component
   │  │  │  ├─ select.jsx      # Select dropdown component
   │  │  │  ├─ slider.jsx      # Slider component
   │  │  │  └─ tabs.jsx        # Tabs component
   │  │  └─ visualizations/    # Visualization components
   │  │     ├─ ArrayVisualization.jsx # Array visual representation
   │  │     └─ index.js        # Visualization component exports
   │  ├─ context/              # React Context providers
   │  │  └─ AlgorithmState.jsx # Algorithm state management
   │  ├─ hooks/                # Custom React hooks
   │  │  └─ useAudio.js        # Audio management hook
   │  ├─ index.css             # Global styles
   │  ├─ lib/                  # Library utilities
   │  │  └─ utils.js           # Shared utility functions
   │  └─ utils/                # Utility modules
   │     ├─ audioEngine.js     # Audio engine for sound effects
   │     ├─ seo.js             # SEO optimization utilities
   │     ├─ soundEffects.js    # Sound effect definitions
   │     └─ themeUtils.js      # Theme management utilities
   └─ vercel.json              # Vercel deployment configuration

📁 Key Directories and Files:

• public/code/: Complete algorithm implementations in 20+ programming languages for educational reference
• src/app/: Next.js App Router with dynamic routing and SEO-optimized metadata
• src/components/chatbot/: AI-powered chatbot system with advanced algorithm knowledge
• src/components/feedback/: Comprehensive user feedback system with GitHub integration
• src/components/panels/contributions/ssoc/: SSOC (Social Summer of Code) leaderboard and contribution tracking
• src/utils/audioEngine.js: Advanced audio engine for immersive sorting visualization experience
• server/: Express.js backend server for API proxy and external service integration
• api/: API endpoints including Gemini AI integration for the chatbot
• scripts/: Build automation and SEO optimization scripts
• .github/: Comprehensive GitHub workflows, issue templates, and community guidelines

---

📸 Screenshots

Visualizer & Metric Selection Screens

Visualizer Screen	Metric Screen	Details Screen
DevTools Panel	Performance Monitoring	Device Information

---

🚀 Quick Start

1. Visit the Website

2. Choose an Algorithm

   • Select from the available sorting algorithms
   • Adjust visualization parameters

3. Start Visualizing

   • Click "Start" to begin the visualization
   • Use controls to adjust speed and pause/resume

---

🛠️ Developer Tools

SortVision includes a comprehensive suite of developer tools designed to enhance the development experience, debug performance issues, and monitor application behavior in real-time. These tools are intelligently restricted to development environments only and are automatically blocked in production deployments for security and performance optimization.

🔐 Security & Access Control

The DevTools implement a sophisticated access control system:

• Development-Only Access: Tools are completely inaccessible in production environments
• URL-Based Authentication: Requires specific query parameters for activation
• Domain Restrictions: Automatically detects and blocks access on production domains
• Performance Protection: Prevents performance degradation in live environments

⚡ Accessing DevTools

Prerequisites

• Node.js development environment
• Local development server running
• Modern browser with JavaScript enabled

Access Methods

1. Standard Development Access:

   npm run dev
   # or
   pnpm dev

2. DevTools Activation:

   http://localhost:3000/?cr7=goat
   

3. Alternative Local URLs:

   http://127.0.0.1:3000/?cr7=goat
   http://localhost:3000/?cr7=goat  # Next.js default port
   

🛡️ Security Note: The query parameter cr7=goat acts as a development key and is intentionally obscure to prevent accidental activation. This parameter is completely ignored in production environments.

🧰 DevTools Feature Suite

📊 Performance Monitoring

Real-time performance tracking with detailed metrics:

• Frame Rate Analysis

  • Live FPS counter with historical data
  • Frame time distribution graphs
  • Performance bottleneck detection
  • Smooth/choppy animation identification

• Memory Usage Tracking

  • Heap memory consumption monitoring
  • Memory leak detection
  • Garbage collection impact analysis
  • Memory usage trends and patterns

• Rendering Performance

  • Component render time tracking
  • Re-render frequency analysis
  • DOM manipulation performance
  • CSS animation performance metrics

• Algorithm Execution Metrics

  • Sorting algorithm performance comparison
  • Step-by-step execution timing
  • Memory allocation during sorting
  • Optimization opportunity identification

📱 Device Information Panel

Comprehensive device and browser analysis:

• Hardware Specifications

  • CPU core count and architecture
  • Available RAM and usage
  • GPU information and capabilities
  • Screen resolution and pixel density

• Browser Environment

  • User agent string analysis
  • Supported web APIs
  • JavaScript engine details
  • CSS feature support matrix

• Network Information

  • Connection type and speed
  • Bandwidth estimation
  • Latency measurements
  • Network quality assessment

• Viewport and Display

  • Screen dimensions and orientation
  • Color depth and HDR support
  • Touch capability detection
  • Device pixel ratio

💻 Console Integration

Enhanced debugging capabilities:

• Formatted Logging

  • Color-coded log levels
  • Structured data visualization
  • Error stack trace enhancement
  • Performance timing logs

• Interactive Debugging

  • Variable inspection tools
  • Breakpoint management
  • Call stack visualization
  • Memory snapshot analysis

📈 Advanced Monitoring Features

• Algorithm Visualization Metrics

  • Animation frame consistency
  • Sorting step accuracy verification
  • Visual element positioning tracking
  • User interaction response times

• Resource Loading Analysis

  • Asset loading performance
  • Bundle size impact assessment
  • Lazy loading effectiveness
  • Critical resource identification

• Error Tracking & Reporting

  • Runtime error capture
  • Promise rejection handling
  • Component error boundaries
  • Performance regression detection

🔍 Using DevTools for Development

Basic Usage

1. Panel Management

   // Toggle DevTools panel
   // Click "TOGGLE PANEL" button in the floating widget
   
   // Close DevTools completely
   // Click "CLOSE" button to hide all tools

2. Performance Monitoring

   // Monitor specific algorithm performance
   // Select algorithm and watch real-time metrics
   // Compare performance across different array sizes
   // Identify performance bottlenecks during sorting

Advanced Development Workflows

1. Performance Optimization

   • Use FPS monitoring to identify animation issues
   • Analyze memory usage during long sorting operations
   • Monitor rendering performance with different array sizes
   • Compare algorithm efficiency in real-time

2. Cross-Device Testing

   • Verify responsive design across different screen sizes
   • Test touch interactions on mobile devices
   • Analyze performance on low-end devices
   • Ensure compatibility across browser engines

3. Algorithm Development

   • Debug new sorting algorithm implementations
   • Verify correctness of sorting steps
   • Optimize animation performance
   • Test edge cases and error handling

Performance Optimization Tips

• Memory Management

  // Monitor memory during array operations
  // Identify memory leaks in algorithm implementations
  // Optimize garbage collection patterns

• Rendering Optimization

  // Track component re-renders
  // Identify unnecessary DOM updates
  // Optimize CSS animations for 60fps

⚙️ Technical Implementation

Architecture Overview

• Modular Design: Each tool is implemented as an independent module
• Event-Driven: Uses observer pattern for real-time updates
• Non-Intrusive: Minimal impact on application performance
• Conditional Loading: Only loads when explicitly requested

File Structure

public/devTools/
├── index.js          # Main entry point and tool orchestration
├── core.js           # Core utilities and initialization logic
├── performance.js    # Performance monitoring implementation
├── device-info.js    # Device detection and analysis
├── monitoring.js     # Real-time monitoring utilities
└── ui.js            # User interface components and styling

API Integration

// Example DevTools API usage
window.devTools = {
  performance: {
    startMonitoring(),
    getMetrics(),
    createReport()
  },
  device: {
    getInfo(),
    runDiagnostics(),
    exportData()
  }
};

🚨 Troubleshooting

Common Issues

1. DevTools Not Loading

   # Verify development server is running
   npm run dev
   
   # Check URL parameters
   http://localhost:3000/?cr7=goat
   
   # Clear browser cache
   Ctrl+Shift+R (Windows/Linux)
   Cmd+Shift+R (Mac)

2. Performance Issues

   // If DevTools impact performance:
   // 1. Close unnecessary monitoring panels
   // 2. Reduce monitoring frequency
   // 3. Disable heavy metrics collection

3. Browser Compatibility

   // Supported browsers:
   // Chrome 80+, Firefox 75+, Safari 13+, Edge 80+
   // Some features may be limited in older browsers

Performance Considerations

• Development Impact: DevTools add ~2-5% performance overhead
• Memory Usage: Additional 10-20MB RAM usage when active
• Network: Minimal network impact (local tools only)
• Battery: May increase battery usage on mobile devices

🎪 Advanced Features

Custom Metrics

// Add custom performance markers
performance.mark("algorithm-start");
// ... sorting algorithm execution
performance.mark("algorithm-end");
performance.measure("algorithm-duration", "algorithm-start", "algorithm-end");

Export Capabilities

• Performance reports in JSON format
• Device information as downloadable data
• Memory usage charts and graphs
• Algorithm performance comparisons

Integration with Popular Tools

• React DevTools: Enhanced component inspection
• Chrome DevTools: Extended performance profiling
• Lighthouse: Performance audit integration
• WebPageTest: Network performance analysis

🎯 Best Practices

1. Development Workflow

   • Always test with DevTools enabled during development
   • Use performance metrics to guide optimization decisions
   • Monitor memory usage during algorithm development
   • Regularly check device compatibility

2. Performance Testing

   • Test on various device specifications
   • Monitor performance across different array sizes
   • Verify smooth animations at 60fps
   • Check memory usage patterns

3. Debugging Strategy

   • Use console integration for systematic debugging
   • Leverage performance metrics for bottleneck identification
   • Monitor device information for compatibility issues
   • Track user interaction patterns

💡 Pro Tip: Use DevTools data to create performance budgets and ensure consistent user experience across all devices and browsers.

---

👨‍🔧 Detailed Setup

Prerequisites

• Node.js (v16.10.0 or higher)
• npm or pnpm package manager
• Git for version control

Installation Steps

1. Clone the Repository

   git clone https://github.com/alienx5499/SortVision.git

2. Navigate to Project Directory

   cd SortVision

3. Install Dependencies

   npm install
   # or
   pnpm install

4. Start Development Server

   npm run dev
   # or
   pnpm dev

5. Open in Browser

   • Visit http://localhost:3000
   • Start exploring sorting algorithms!

🐳 Docker Setup

SortVision can be run using Docker, which ensures consistent development and deployment environments across all platforms.

Prerequisites

• Docker installed on your machine
• Docker Compose (usually comes with Docker Desktop)

Running with Docker

1. Development Mode

   # Build and start the development server
   docker compose up dev
   
   # Access the application at:
   http://localhost:7777

   Development mode features:

   • Hot reloading enabled
   • Source code mounted for live updates
   • Development tools available
   • Real-time compilation

2. Production Mode

   # Build and start the production server
   docker compose up prod
   
   # Access the application at:
   http://localhost:80

   Production mode features:

   • Optimized build
   • Nginx server
   • Proper caching
   • Compression enabled
   • Production-ready configuration

Docker Commands Reference

# Build the images
docker compose build

# Stop the containers
docker compose down

# View logs
docker compose logs

# Rebuild and restart containers
docker compose up --build

# Remove all containers and volumes
docker compose down -v

Using Different Package Managers

The Docker setup supports multiple package managers. To switch between them:

1. For pnpm (default):

   # Already configured in Dockerfile
   RUN npm install -g pnpm
   COPY package.json ./
   RUN pnpm install

2. For yarn:

   # Modify Dockerfile to use yarn
   RUN npm install -g yarn
   COPY package.json ./
   RUN yarn install

3. For npm:

   # Modify Dockerfile to use npm
   COPY package.json ./
   RUN npm install

Environment Variables

Docker setup respects the following environment variables:

• NODE_ENV: Development/Production mode
• PORT: Application port (default: 7777 for dev, 80 for prod)
• HOST: Host binding (default: 0.0.0.0)

---

🎯 Target Audience

👨‍🎓 Students

• Visual learning of sorting algorithms
• Understanding time complexity
• Algorithm comparison and analysis

👨‍🏫 Educators

• Interactive teaching tool
• Algorithm demonstration
• Performance visualization

👨‍💻 Developers

• Algorithm implementation reference
• Performance optimization insights
• Code structure examples

📊 Data Enthusiasts

• Algorithm behavior analysis
• Performance comparison
• Data structure visualization

---

🤝 Contributing

We ❤️ open source! Your contributions make this project better.

How to Contribute

1. Fork the Repository

   git clone https://github.com/your-username/SortVision.git

2. Create Feature Branch

   git checkout -b feature/amazing-feature

3. Commit Changes

   git commit -m "Add amazing feature"

4. Push to Branch

   git push origin feature/amazing-feature

5. Open Pull Request

Contribution Guidelines

• Follow the existing code style
• Add tests for new features
• Update documentation
• Keep commits clean and meaningful

---

Awesome Contributors

Thank you for contributing to our repository

---

📜 License

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

---

📬 Feedback & Suggestions

We value your input! Share your thoughts through GitHub Issues.

💡 Let's work together to enhance the understanding of sorting algorithms!