Skip to content

README.md

Latest commit

 

History

History
197 lines (142 loc) · 5 KB

README.md

File metadata and controls

197 lines (142 loc) · 5 KB
Raw

⚡ Sorting Algorithm Visualizer ⚡

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

Sorting Visualizer Preview

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

Main Dashboard

Algorithm Comparison in Action

Algorithm Comparison

Mobile Layout

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.