Skip to content

Sorting Algorithm Visualizer built with Next.js, TypeScript and TailwindCSS

Notifications You must be signed in to change notification settings

sajidfayaz/sortingvisualizer

Repository files navigation

Sorting Algorithm Visualizer

Overview

Sorting Algorithm Visualizer is a web application that allows users to visualize various sorting algorithms in action. It provides an interactive interface to understand how sorting algorithms work and compare their performance.

Features

  • Visualize popular sorting algorithms such as Bubble Sort, Insertion Sort, Selection Sort, Merge Sort, and Quick Sort.
  • Adjustable animation speed to control the pace of visualization.
  • Responsive design for optimal viewing experience on different devices.

Technologies Used

  • Frontend: Next.js (with TypeScript)
  • State Management: React Context API
  • Styling: Tailwind CSS
  • Type Checking: TypeScript
  • Version Control: Git, GitHub

Setup

To run the Sorting Algorithm Visualizer locally, follow these steps:

  1. Clone the repository:
    git clone https://github.com/your-username/sorting-algorithm-visualizer.git
    
  2. Navigate to the project directory:
    cd sorting-algorithm-visualizer
  3. Install dependencies:
    npm install
  4. Start the development server:
    npm start
  5. Open your browser and visit http://localhost:3000 to view the application.

Usage

  1. Select a sorting algorithm from the dropdown menu.
  2. Adjust the animation speed using the slider.
  3. Click the "Play" icon to visualize the selected sorting algorithm in action.
  4. Explore different sorting algorithms and observe their behavior.

Contributions are welcome!

Releases

No releases published

Packages

No packages published