🧩 Algorithm Visualizer

Interactive visualization of sorting and searching algorithms built with PHP, MySQL, and JavaScript

---

📸 Preview

---

✨ Features

Feature	Description
🎯 Multiple Algorithms	Bubble Sort, Quick Sort, Merge Sort, and Binary Search
🎨 Interactive Visualization	Real-time animated bar charts showing algorithm execution
⏯️ Playback Controls	Play, Pause, Reset with adjustable speed (100ms - 1000ms)
🎮 Keyboard Shortcuts	Press Space to toggle play/pause
📊 Step-by-Step Tracking	Watch each comparison and swap in detail
🔍 Search Support	Binary Search with target value input
💾 Database Persistence	All steps stored in MySQL for review
📱 Responsive Design	Works on desktop and mobile devices
🎨 Modern UI	Clean, colorful, and user-friendly interface

---

🚀 Quick Start

Prerequisites

• PHP 7.4 or higher
• MySQL 5.7 or higher
• Web server (Apache/Nginx) or XAMPP/WAMP/MAMP
• Composer (optional, for autoloader)

Installation

# 1. Clone the repository
git clone https://github.com/Bendz07/algorithm-visualizer.git
cd algorithm-visualizer

# 2. Set up the database
mysql -u root -p < database/schema.sql

# 3. Configure environment
cp .env.example .env
# Edit .env with your database credentials

# 4. Install dependencies (optional)
composer install

# 5. Start your web server
# For PHP built-in server:
php -S localhost:8000 -t public/

# For XAMPP/WAMP:
# Place the project in htdocs/www folder

Quick Access

Open your browser and navigate to:

http://localhost:8000/

or

http://localhost/algorithm-visualizer/public/

---

🎯 Usage Guide

1️⃣ Choose an Algorithm

Select from the dropdown menu:

• Bubble Sort - Simple adjacent comparison sort
• Quick Sort - Divide and conquer with pivot
• Merge Sort - Recursive merge-based sorting
• Binary Search - Find target in sorted array

2️⃣ Enter Your Data

For Sorting:

[5, 3, 8, 1, 2, 7, 4, 6]

For Binary Search:

[10, 20, 30, 40, 50, 60, 70, 80]

Then enter a target value (e.g., 50)

3️⃣ Visualize & Interact

Button	Action
🟢 Visualize	Generate algorithm steps
▶️ Play	Start animation
⏸️ Pause	Pause animation
🔄 Reset	Go back to first step
🎚️ Speed Slider	Adjust animation speed

---

🧮 Supported Algorithms

Sorting Algorithms

Bubble Sort - O(n²) Time Complexity

• Compares adjacent elements and swaps if they're in wrong order
• Largest elements "bubble" to the end
• Visual: Red bars indicate comparisons/swaps

Quick Sort - O(n log n) Average

• Uses divide-and-conquer approach
• Selects a pivot and partitions around it
• Visual: Red bar shows pivot element

Merge Sort - O(n log n) Time

• Divides array into halves recursively
• Merges sorted sub-arrays
• Visual: Shows merging process

Search Algorithms

Binary Search - O(log n) Time

• Requires sorted array
• Repeatedly divides search space in half
• Visual: Red bar shows current middle element

---

🏗️ Project Structure

algorithm-visualizer/
├── config/
│   └── database.php          # Database configuration
├── public/                    # Web root
│   ├── index.php              # Main entry point
│   ├── css/
│   │   └── style.css          # Stylesheets
│   └── js/
│       ├── visualizer.js      # Main visualization logic
│       └── api.js             # API calls
├── src/
│   ├── Controllers/
│   │   ├── AlgorithmController.php
│   │   └── HomeController.php
│   ├── Models/
│   │   ├── StepModel.php
│   │   └── SessionModel.php
│   └── Algorithms/
│       ├── AlgorithmInterface.php
│       ├── BubbleSort.php
│       ├── QuickSort.php
│       ├── MergeSort.php
│       ├── BinarySearch.php
│       └── SearchInterface.php
├── logs/                      # Application logs
├── .env                       # Environment variables
├── composer.json              # Composer dependencies
└── README.md                  # This file

---

🛠️ Technology Stack

---

📊 Database Schema

CREATE TABLE algorithm_steps (
    id INT AUTO_INCREMENT PRIMARY KEY,
    session_id VARCHAR(36) NOT NULL,
    step_number INT NOT NULL,
    array_state TEXT NOT NULL,
    active_indices TEXT,
    message VARCHAR(255),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    INDEX idx_session (session_id)
);

---

🎮 Keyboard Shortcuts

Key	Action
Space	Toggle Play/Pause
Enter	Start Visualization

---

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Setup

# Clone your fork
git clone https://github.com/Bendz07/algorithm-visualizer.git

# Install dependencies
composer install

# Run tests (if any)
phpunit

# Start development server
php -S localhost:8000 -t public/

Adding New Algorithms

1. Create a new class in src/Algorithms/
2. Implement the AlgorithmInterface (for sorting) or SearchInterface (for searching)
3. Add your algorithm to the dropdown in public/index.php
4. Update the controller's switch statement

---

🐛 Troubleshooting

Database Connection Error

• Ensure MySQL is running
• Check credentials in .env file
• Verify database exists: CREATE DATABASE algorithm_visualizer;
• Run the SQL schema to create tables

Composer Autoloader Missing

• Run composer install in the project root
• Or use the manual autoloader (see public/index.php)

Blank Page / No Visualization

• Check PHP error logs
• Enable error reporting: error_reporting(E_ALL); ini_set('display_errors', 1);
• Verify all files are in correct locations
• Check browser console for JavaScript errors

---

📝 License

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

---

🙏 Acknowledgments

• Inspired by various algorithm visualization tools
• Built with ❤️ for the developer community
• Thanks to all contributors and open-source libraries

---

📬 Contact

X and Gmail - @b_abdelali - abdel.contact@gmail.com

Project Link: https://github.com/Bendz07/algorithm-visualizer

---

Made with ❤️ and PHP

Features • Quick Start • Usage Guide • Algorithms • Contributing

---

📸 Screenshots Gallery

---

⭐ Star History

---

Don't forget to ⭐ star this repository if you found it helpful!