A beautiful, interactive web application that visualizes common sorting algorithms in real-time. Built with Stackblitz Bolt, Next.js, Radix UI, TypeScript and Tailwind CSS.

https://js-sorting.panlancer.dev/

• 🎯 Interactive Visualization: Watch sorting algorithms in action with step-by-step animation
• 🎨 Beautiful UI: Modern, gradient-rich design with smooth transitions
• 🌗 Dark Mode Support: Seamless experience in both light and dark themes
• 📱 Responsive Design: Works perfectly on all device sizes
• 🔄 Multiple Algorithms: Includes:
  • Bubble Sort
  • Selection Sort
  • Insertion Sort
  • Merge Sort
  • Quick Sort

• Real-time visualization of sorting steps
• Custom array input support (max 15 numbers)
• Step-by-step explanation of each sorting operation
• Algorithm code base display with complexity analysis
• Progress tracking with visual indicators
• Random array generation

• Framework: Next.js with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Radix UI
• State Management: Zustand
• Icons: Lucide React

1. Clone the repository:

git clone https://github.com/swispandu/sorting-algorithm-step-visualization.git

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser

1. Input Array: Enter numbers (1-15) separated by commas or use the "Random" button
2. Choose Algorithm: Select a sorting algorithm from the tabs
3. Visualization: Click "Start" to begin the visualization
4. Controls:
   • Use Play/Pause to control animation
   • Click step buttons to jump to specific steps
   • Reset to start over

sorting-algorithm-visualizer/
├── app/                    # Next.js app directory
├── components/             # React components
├── lib/                    # Utilities and hooks
├── public/                 # Static assets
└── styles/                 # Global styles

Contributions are welcome! Please feel free to submit a Pull Request.

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

Created by PanLancer

• Thanks to Radix UI for the primitive UI components
• Inspired by various sorting algorithm visualizers across the web

Made with ❤️ using Stackblitz Bolt, Next.js, Radix UI, TypeScript and Tailwind CSS