Sorting Visualizer

A powerful sorting visualizer built with Next.js, TypeScript, and TailwindCSS. This app provides an interactive visualization of various sorting algorithms with adjustable speed, making it an excellent tool for understanding sorting techniques and computer science fundamentals.

Features

• Sorting Algorithms: Supports multiple algorithms such as Bubble Sort, Selection Sort, Merge Sort, Quick Sort, etc.
• Adjustable Speed: Control the speed of the sorting visualization.
• Responsive Design: Clean and responsive UI built with TailwindCSS.
• Real-time Visualization: Step-by-step visualization of how sorting algorithms work.
• Animations: Smooth transitions and animations to enhance the user experience.

Demo

You can try the live demo here.

Built With

• Next.js 14 (App Router)
• TypeScript
• TailwindCSS

Usage

1. Clone the repository:

   git clone https://github.com/Shaban-Eissa/Next.js-Sorting-Algorithms-Visualizer

2. Navigate into the project directory:

   cd Next.js-Sorting-Algorithms-Visualizer

3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

5. Open the application in your browser: Navigate to http://localhost:3000.

Available Sorting Algorithms

• Bubble Sort
• Selection Sort
• Merge Sort
• Quick Sort
• Insertion Sort

Customization

You can easily add more sorting algorithms or modify the visualizer:

1. Sorting algorithms can be added in the Algorithms folder.
2. The speed controls can be adjusted in the Visualizer.tsx context.

Contributing

You are welcome to contribute to this project. Feel free to open issues, create pull requests, or suggest new features.