This project is a visualizer for various sorting algorithms. It provides an interactive way to learn and understand how different sorting algorithms work by displaying them in action. The application is built using modern web development tools, including React, TypeScript, and Zustand for state management.
Check out the live demo of the application here.
Desktop.Demo.mp4
Mobile.Demo.mp4
- Responsive Design: The visualizer is fully responsive, offering a seamless experience on both desktop and mobile devices.
- Algorithm Visualizations: Currently supports the following sorting algorithms:
- Selection Sort
- Insertion Sort
- Bubble Sort
- Quick Sort
- Customizable Settings: Users can adjust the speed of the visualization, the size of the array, and the display mode (bars or numbers).
- Vite: For fast and optimized development and build tooling.
- React: For building the user interface.
- TypeScript: Ensuring type safety and reducing runtime errors.
- Zustand: For simple and scalable state management.
- Framer Motion: For smooth and customizable animations.
- PNPM: For fast, disk space efficient package management.
- Clone the repository:
git clone https://github.com/ignaciomartinelias/sorting-algorithms-app-v2.git
cd sorting-visualizer- Install dependencies using PNPM:
pnpm install- Start the development server:
pnpm dev- Open your browser and navigate to http://localhost:5173/ to view the application.
- Select an Algorithm: Choose from the available sorting algorithms in the sidebar.
- Adjust Settings: Use the controls to adjust speed, array size, and display mode.
- Start Visualization: Click the "Play" button to start the visualization of the selected algorithm.
- Onboarding Process: Introduce an onboarding process to guide first-time users through the application.
Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.