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.
- 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!"
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
- ✨ Features
- 🦾 Tech Stack
- 📂 Project Structure
- 📸 Screenshots
- 🚀 Quick Start
- 👨🔧 Detailed Setup
- 🛠️ Developer Tools
- 🎯 Target Audience
- 🤝 Contributing
- 🌟 Awesome Contributors
- 📜 License
- 📬 Feedback & Suggestions
- Real-time visual representation of sorting steps
- Adjustable animation speed
- Pause and resume functionality
- Array size customization
- Random array generation
- 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
- Real-time comparison count
- Swap operation tracking
- Time complexity visualization
- Algorithm efficiency metrics
- Modern, responsive design
- Dark mode support
- Mobile-friendly interface
- Intuitive controls
- Framework: React.js with Vite
- UI Components: ShadCN
- Styling: TailwindCSS
- Icons: Lucide
- Animations: Framer Motion
- State Management: React Hooks
- Build Tool: Vite
- Package Manager: npm/pnpm
- Code Quality: ESLint
- Version Control: Git
- Deployment: Vercel
- Backend integration with Node.js
- User preferences storage
- Algorithm performance history
- Custom algorithm support
SortVision/ # Main project repository
├── .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
├── .vite/ # Vite build tool cache
│ └── deps/ # Dependency optimization cache
│ ├── _metadata.json # Dependency metadata
│ └── package.json # Dependency package information
├── 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
├── .gitignore # Application-specific git ignore
├── components.json # Component configuration
├── eslint.config.js # ESLint configuration
├── index.html # Main HTML entry point
├── jsconfig.json # JavaScript configuration
├── package-lock.json # NPM package lock
├── package.json # NPM package definition
├── pnpm-lock.yaml # PNPM package lock
├── prerender.js # Prerendering logic for SEO
├── public/ # Public static assets
│ ├── 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
├── scripts/ # Build and utility scripts
│ ├── build-with-seo.js # Build script with SEO optimization
│ └── generate-sitemap.js # Sitemap generator
├── 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
│ ├── components/ # UI components
│ │ ├── MobileOverlay.jsx # Mobile device support
│ │ ├── SEOContent.jsx # SEO content component
│ │ ├── SortingVisualizer.jsx # Main visualization component
│ │ ├── 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
│ │ │ │ ├── ContributionHeader.jsx # Contribution header
│ │ │ │ ├── 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
│ │ │ ├── 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
│ │ │ │ └── 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
│ │ ├── sortingVisualizer/ # Visualization 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
│ │ │ ├── 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
│ ├── index.css # Global styles
│ ├── lib/ # Library utilities
│ │ └── utils.js # Shared utility functions
│ ├── main.jsx # Application entry point
│ └── utils/ # Utility modules
│ └── seo.js # SEO optimization utilities
├── vercel.json # Vercel deployment configuration
└── vite.config.js # Vite configuration
- src/algorithms/: Contains implementations of various sorting algorithms with step-by-step visualization logic
- src/components/: React components organized by functionality (panels, visualizations, UI elements)
- src/components/panels/contributions/: Complete contribution system with guides, statistics, and contributor information
- public/devTools/: Development and debugging tools for performance monitoring and device information
- .github/ISSUE_TEMPLATE/: Comprehensive issue templates for bugs, features, documentation, and performance
- scripts/: Build automation and SEO optimization scripts
- SECURITY.md: Security policy and vulnerability reporting guidelines
 |
 |
 |
| Visualizer Screen | Metric Screen | Details Screen |
 |
 |
 |
| DevTools Panel | Performance Monitoring | Device Information |
-
Visit the Website
-
Choose an Algorithm
- Select from the available sorting algorithms
- Adjust visualization parameters
-
Start Visualizing
- Click "Start" to begin the visualization
- Use controls to adjust speed and pause/resume
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.
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
- Node.js development environment
- Local development server running
- Modern browser with JavaScript enabled
-
Standard Development Access:
npm run dev # or pnpm dev -
DevTools Activation:
http://localhost:3000/?cr7=goat -
Alternative Local URLs:
http://127.0.0.1:3000/?cr7=goat http://localhost:5173/?cr7=goat # Vite default port
🛡️ Security Note: The query parameter
cr7=goatacts as a development key and is intentionally obscure to prevent accidental activation. This parameter is completely ignored in production environments.
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
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
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
-
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
-
Panel Management
// Toggle DevTools panel // Click "TOGGLE PANEL" button in the floating widget // Close DevTools completely // Click "CLOSE" button to hide all tools
-
Performance Monitoring
// Monitor specific algorithm performance // Select algorithm and watch real-time metrics // Compare performance across different array sizes // Identify performance bottlenecks during sorting
-
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
-
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
-
Algorithm Development
- Debug new sorting algorithm implementations
- Verify correctness of sorting steps
- Optimize animation performance
- Test edge cases and error handling
-
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
- 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
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
// Example DevTools API usage
window.devTools = {
performance: {
startMonitoring(),
getMetrics(),
createReport()
},
device: {
getInfo(),
runDiagnostics(),
exportData()
}
};-
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)
-
Performance Issues
// If DevTools impact performance: // 1. Close unnecessary monitoring panels // 2. Reduce monitoring frequency // 3. Disable heavy metrics collection
-
Browser Compatibility
// Supported browsers: // Chrome 80+, Firefox 75+, Safari 13+, Edge 80+ // Some features may be limited in older browsers
- 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
// Add custom performance markers
performance.mark('algorithm-start');
// ... sorting algorithm execution
performance.mark('algorithm-end');
performance.measure('algorithm-duration', 'algorithm-start', 'algorithm-end');- Performance reports in JSON format
- Device information as downloadable data
- Memory usage charts and graphs
- Algorithm performance comparisons
- React DevTools: Enhanced component inspection
- Chrome DevTools: Extended performance profiling
- Lighthouse: Performance audit integration
- WebPageTest: Network performance analysis
-
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
-
Performance Testing
- Test on various device specifications
- Monitor performance across different array sizes
- Verify smooth animations at 60fps
- Check memory usage patterns
-
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.
- Node.js (v16.10.0 or higher)
- npm or pnpm package manager
- Git for version control
-
Clone the Repository
git clone https://github.com/alienx5499/SortVision.git
-
Navigate to Project Directory
cd SortVision -
Install Dependencies
npm install # or pnpm install -
Start Development Server
npm run dev # or pnpm dev -
Open in Browser
- Visit
http://localhost:3000 - Start exploring sorting algorithms!
- Visit
- Visual learning of sorting algorithms
- Understanding time complexity
- Algorithm comparison and analysis
- Interactive teaching tool
- Algorithm demonstration
- Performance visualization
- Algorithm implementation reference
- Performance optimization insights
- Code structure examples
- Algorithm behavior analysis
- Performance comparison
- Data structure visualization
We ❤️ open source! Your contributions make this project better.
-
Fork the Repository
git clone https://github.com/your-username/SortVision.git
-
Create Feature Branch
git checkout -b feature/amazing-feature
-
Commit Changes
git commit -m "Add amazing feature" -
Push to Branch
git push origin feature/amazing-feature
-
Open Pull Request
- Follow the existing code style
- Add tests for new features
- Update documentation
- Keep commits clean and meaningful
This project is licensed under the MIT License - see the LICENSE file for details.
We value your input! Share your thoughts through GitHub Issues.
💡 Let's work together to enhance the understanding of sorting algorithms!
![@dependabot[bot]](https://avatars.githubusercontent.com/in/29110?s=64&v=4){kind=small}
