A simple yet interactive visualization tool built with React and Vite to demonstrate how the Bubble Sort algorithm works in real-time.
- Introduction
- Installation
- Usage
- Features
- Project Structure
- Dependencies
- Configuration
- Examples
- Contributors
- License
This project visualizes the Bubble Sort algorithm using animated vertical bars whose height represents array values. When sorting is initiated, the component animates comparisons and swaps with visual highlights, helping users learn sorting behavior intuitively.
-
Clone the repository:
git clone https://github.com/lcscostadev/SortingVisualizer.git cd SortingVisualizer -
Install dependencies:
npm install
To start the development server:
npm run devThen, open http://localhost:5173 in your browser to view the application.
- Random bar generation
- Bubble Sort visualization
- Animated bar swapping with color change
- Real-time rendering using React hooks
- Lightweight build using Vite
SortingVisualizer/
├── index.html
├── package.json
├── src/
│ ├── App.jsx
│ ├── main.jsx
│ ├── components/
│ │ ├── Bar.jsx
│ │ ├── Bar.css
│ │ ├── BarList.jsx
│ │ ├── BarList.css
│ │ └── index.js
├── public/
└── styles/
Runtime:
react^18.2.0react-dom^18.2.0
Development:
vite^4.1.0@vitejs/plugin-react@types/react,@types/react-dom
No special configuration required. The project uses Vite for fast builds and live reload. The entry point is main.jsx, rendering the main App component into the #root element in index.html.
- Click "Generate Random Values" to generate a new random array of bars.
- Click "Sort" to visualize the bubble sort algorithm.
- Bars that are being swapped during sorting are highlighted in red.
Built by lcscostadev
This project is licensed under the MIT License.