✨ GlowSort Visualizer Studio

An interactive, sleek, and modern sorting algorithm visualizer built with React, TypeScript, and Vite. Brought to life with the beautiful components from Shadcn/UI and styled with Tailwind CSS.

🚀 Live Demo

Check out the live version here!

📸 Screenshot

✨ Features

• Interactive Visualization: Watch sorting algorithms animate in real-time.
• Multiple Algorithms: Visualize and compare a variety of classic sorting algorithms:
  • Bubble Sort: A simple comparison-based algorithm.
  • Merge Sort: A highly efficient, stable, divide-and-conquer algorithm.
  • Quick Sort: A fast and widely used sorting algorithm.
  • Insertion Sort: An efficient algorithm for smaller datasets.
  • Selection Sort: A simple, in-place comparison sorting algorithm.
• Customizable Controls:
  • Adjust the sorting speed.
  • Change the size of the array.
  • Generate a new random array at any time.
  • Start, pause, and reset the visualization.
• Algorithm Information: View key details for each algorithm, including its name, description, and time/space complexity.
• Responsive Design: A clean and modern UI that works seamlessly on all devices.

🛠️ Technologies Used

• Frontend: React, TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• UI Components: Shadcn/UI
• Routing: React Router DOM
• State Management: React Hooks (useState, useReducer, etc.)
• Linting: ESLint

📦 Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Node.js (v18 or newer recommended)
• Bun or another package manager like npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/your-username/glowsort-visualizer-studio.git
   cd glowsort-visualizer-studio

2. Install the dependencies:

   bun install
   # Or using npm
   # npm install

🚀 Usage

To start the development server, run the following command:

bun run dev
# Or using npm
# npm run dev

Open http://localhost:5173 (or the port shown in your terminal) to view it in the browser. The application will automatically reload if you change any of the source files.

📜 Available Scripts

In the project directory, you can run:

• bun run dev: Runs the app in development mode.
• bun run build: Builds the app for production to the dist folder.
• bun run lint: Lints the codebase using ESLint.
• bun run preview: Serves the production build locally for preview.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details. (Note: You may need to create this file).# algorithm_visualizer