🌟 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. ⭐ Star History
11. 🌟 Awesome Contributors
12. 📜 License
13. 📬 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 usagewindow.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 markersperformance.mark("algorithm-start");// ... sorting algorithm executionperformance.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 DockerfileRUN npm install -g pnpm
   COPY package.json ./
   RUN pnpm install

2. For yarn:

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

3. For npm:

   # Modify Dockerfile to use npmCOPY 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

---

⭐ Star History

---

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!