https://github.com/lucapalminteri/sorting-algorithms-visualizer
The Sorting Algorithms Visualizer is an interactive web app that helps users understand and visualize sorting algorithms through dynamic, step-by-step animations, providing an educational tool to explore their mechanics and performance.
https://github.com/lucapalminteri/sorting-algorithms-visualizer
algorithm-visualization bubble-sort computer-science educational-tool insertion-sort programming selection-sort sorting-algorithms
Last synced: 9 months ago
JSON representation
The Sorting Algorithms Visualizer is an interactive web app that helps users understand and visualize sorting algorithms through dynamic, step-by-step animations, providing an educational tool to explore their mechanics and performance.
- Host: GitHub
- URL: https://github.com/lucapalminteri/sorting-algorithms-visualizer
- Owner: LucaPalminteri
- Created: 2024-12-03T18:39:13.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-04T15:51:25.000Z (about 1 year ago)
- Last Synced: 2025-02-08T05:27:01.713Z (10 months ago)
- Topics: algorithm-visualization, bubble-sort, computer-science, educational-tool, insertion-sort, programming, selection-sort, sorting-algorithms
- Language: TypeScript
- Homepage: https://sorting-algorithms-visualizer-liart.vercel.app
- Size: 5.13 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sorting Algorithms Visualizer
## Overview
Sorting Algorithms Visualizer is an interactive web application that helps users understand and visualize various sorting algorithms through dynamic, step-by-step animations. This project provides an educational tool to explore the mechanics and performance characteristics of different sorting techniques.
## Features
### Supported Sorting Algorithms
#### Simple Sorting Algorithms
- Bubble Sort
- Selection Sort
- Insertion Sort
#### Efficient Sorting Algorithms
- Merge Sort
- Quick Sort
- Heap Sort
#### Advanced Comparison-Based Algorithms
- Tim Sort
- Intro Sort
### Visualization Capabilities
- Real-time array element comparison
- Swap tracking
- Performance metric tracking (comparisons and swaps)
- Adjustable sorting speed
- Visual representation of algorithm progression
## Technologies Used
- Next.js
- React
- TypeScript
- Tailwind CSS
- Lucide React Icons
## Getting Started
### Prerequisites
- Node.js (v18 or later)
- npm or yarn
### Installation
1. Clone the repository
```bash
git clone https://github.com/LucaPalminteri/sorting-algorithms-visualizer.git
```
2. Navigate to the project directory
```bash
cd sorting-algorithms-visualizer
```
3. Install dependencies
```bash
npm install
# or
yarn install
```
4. Run the development server
```bash
npm run dev
# or
yarn dev
```
5. Open [http://localhost:3000](http://localhost:3000) in your browser
## How to Use
1. Browse through different sorting algorithms from the homepage
2. Click on an algorithm to view its detailed page
3. Customize sorting parameters:
- Array size
- Sorting speed
- Array generation method
4. Observe the step-by-step sorting process
5. Review algorithm-specific details and time complexity
## Learning Resources
Each algorithm page provides:
- Algorithm description
- Time complexity analysis (best, average, and worst-case scenarios)
- Visual representation of sorting mechanics
## Performance Metrics
The visualizer tracks:
- Number of comparisons
- Number of swaps
- Sorting progression
- Algorithm-specific optimizations
## Contributing
Contributions are welcome! Please follow these steps:
1. Fork the repository
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
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Luca Palminteri - [lucapalminteri02@gmail.com]
Project Link: [https://github.com/LucaPalminteri/sorting-algorithms-visualizer](https://github.com/LucaPalminteri/sorting-algorithms-visualizer)
## Acknowledgements
- [Next.js](https://nextjs.org/)
- [React](https://reactjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Lucide Icons](https://lucide.dev/)