SortVitz is an interactive web application that visualizes various sorting algorithms in an engaging and user friendly manner. It is designed to help users understand how sorting algorithms work through step-by-step graphical representations. The platform supports multiple algorithms, customization options, and performance metrics to provide a comprehensive learning experience.

• Supported Algorithms:
  • Sorting Algorithms
  • Search Algorithms
  • Graph Algorithms
• Real-time graphical representation of the sorting process

• Users can generate random arrays of numbers or input their custom arrays for sorting

• A slider to control the speed of the sorting animation, ranging from slow to Fast

• Real-time updates on:
  • Number of Comparisons
  • Number of swaps

• A detailed explanation of each algorithm is displayed alongside the visualization, helping users understand the logic and steps involved.

• The code implementation for the selected algorithm is displayed in an easy-to-read format.

Ensure you have the following installed:

• Node.js (for running the development server)
• npm (for package management)
• Git (for cloning the repository)

1. Clone the repository:

   git clone https://github.com/donnellyCodes/alx-frontend-project

2. Navigate into the project directory:

   cd algorithmvisualizer

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

5. Open your web browser at:

http://localhost:3000 ```

1. Select an Algorithm according to the category:
   • Choose an algorithm from the list provided.
2. Generate an array automatically or input an array manually:
   • Use the "Generate New Array" button for a random array to pop up or enter random values to form an array
3. Adjust Speed:
   • Use slider to set the sorting speed
4. Start Sorting:
   • Click "Start Sorting* to begin the visualization
5. Replay:
   • Click "Replay" to replay the sorting process for review

- **Frontend:** React.js, HTML, CSS
- **Styling:** Custom CSS and Google Fonts
- **Visualization:** Dynamic rendering using React's state management

Contributions are welcome! If you have ideas ir improvements, feel free to fork the repository and submit a pull request.

This project is licensed under the MIT License

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh