⚡ Sorting Algorithm Visualizer ⚡

A brutal, cyberpunk‑styled playground for sorting algorithms.
Watch numbers dance with neon bars, smooth animations, and reactive sound.

Made by: Amer Biberović

Features • Algorithms • Getting Started • Screenshots & GIFs

---

🔮 Overview

Sorting Algorithm Visualizer is an interactive web app for exploring classic and exotic sorting algorithms.
It combines:

• Modern cyberpunk UI (glassmorphism, neon glow, dark theme),
• Smooth, GPU‑accelerated animations with Framer Motion,
• Audio feedback based on bar height,
• Step‑by‑step controls and detailed complexity info,
• Multi‑language UI (English, Spanish, French, Bosnian).

Perfect for learning, teaching, or just watching algorithms do their magic.

---

🚀 Features

• Rich algorithm library
  • From basic sorts to cursed ones like Bogo Sort.
• Interactive controls
  • Play / Pause / Reset
  • Step‑by‑step execution
  • Speed and array size sliders
  • Sound on/off
• Visual storytelling
  • Colored bars for comparisons, swaps, pivots and sorted elements
  • Live progress bar and step counter
  • Tooltip with current bar values
• Educational side panel
  • Time complexity (Best / Average / Worst)
  • Space complexity
  • Short algorithm description
  • Warnings for pathological algorithms (e.g. Bogo Sort)
• Responsive & polished
  • Works on desktop, tablet and mobile
  • Clean layout with sidebar + main visualizer

---

🧠 Algorithms

Basic

• Bubble Sort
• Selection Sort
• Insertion Sort

Efficient

• Merge Sort
• Quick Sort (Lomuto)
• Quick Sort (Hoare)
• Heap Sort
• Shell Sort

Linear‑Time (Counting Family)

• Radix Sort
• Counting Sort
• Bucket Sort

Variations & Fun Stuff

• Cocktail Shaker Sort
• Comb Sort
• Gnome Sort
• Cycle Sort
• Stooge Sort
• Odd‑Even Sort (Brick Sort)
• Bitonic Sort
• Pancake Sort
• Bogo Sort – intentionally awful, included for fun and learning

---

🎛 UI & Visualization

• State colors

  • 🟦 Default – idle bars
  • 🟨 Comparing – elements being compared
  • 🟥 Swapping – elements being swapped
  • 🟩 Sorted – elements in final position
  • 🟪 Pivot – pivot element in Quick Sort

• Animations

  • Framer Motion driven transitions
  • Neon glow for active bars
  • Smooth scaling and layout transitions

• Controls

  • Play / Pause – control execution
  • Reset – back to initial random array
  • Step Forward – advance one algorithm step
  • Speed – 1–200ms delay between frames
  • Array Size – 5–200 elements
  • Step Mode – manual step‑by‑step exploration
  • Mute – toggle audio feedback

---

🌐 Multi‑language Support

The UI text (labels, controls, headings) supports:

• 🇬🇧 English (default on load)
• 🇪🇸 Spanish
• 🇫🇷 French
• 🇧🇦 Bosnian

You can switch language from the header dropdown at any time.
Algorithm names and descriptions are designed to be educational and friendly.

---

🛠 Tech Stack

• React 18 – functional components & hooks
• TypeScript – strict typing
• Vite – ultra‑fast dev server & bundler
• Tailwind CSS – utility‑first styling
• Framer Motion – animation engine
• Zustand – lightweight global state management
• Lucide React – icon set
• Web Audio API – dynamic tone generation for bar sounds

---

📦 Getting Started

# Install dependencies
npm install

# Start dev server
npm run dev

# Production build
npm run build

# Preview production build
npm run preview

Open the printed local URL (usually http://localhost:5173) in your browser.

---

📸 Screenshots & GIFs

Replace the image paths below with your own assets in an assets/ folder.

Main Dashboard

Algorithm Comparison in Action

Mobile Layout

---

⚠️ Notes

• Bogo Sort is intentionally inefficient and may run "forever" for larger arrays – use with tiny inputs only.
• Audio feedback is generated using the Web Audio API based on bar height.
• All algorithms are implemented as generator functions, enabling precise control over steps, pauses and resumes.

---