An interactive, darkβmode sorting algorithm visualizer built with React, MUI icons, and sleek neumorphic styling. Watch classic sorting algorithms animate stepβbyβstep, adjust speed, choose algorithms, and enjoy a clean, responsive UI inspired by 2025 design trends.
π Live Demo: https://sorting-visualizer-adidev.vercel.app/
- π― Features
- βοΈ Installation
- π Usage
- ποΈ Project Structure
- π€ Contributing
- π License
- π Acknowledgments
- Algorithms: Bubble, Selection, Insertion, Merge, Quick βοΈ
- Speed Controls: 1Γβ5Γ playback buttons β©
- Play / Pause / Step: Intuitive
βΆοΈ / ββ / β controls - Custom Array: Regenerate random arrays or adjust individual bars π
- DarkβMode Neumorphism: Soft shadows, accent highlights, hover animations β¨
- Sticky Header & Footer: Quick links and author attribution π
- MobileβFirst Design: Touchβfriendly controls and fluid layouts π±
-
Clone the repository
git clone https://github.com/AdidevJJ/sort-visualizer.git cd sort-visualizer -
Install dependencies
npm install # or yarn install -
Start the development server
npm start # or yarn start -
Open in your browser Navigate to http://localhost:3000
- Select an Algorithm: Click the algorithm pill in the header.
- Adjust Speed: Choose a speed multiplier (1Γ to 5Γ).
- Play / Pause / Step: Use the controls to animate or step through the sort.
- Randomize Array: Click π to generate a new set of values.
sort-visualizer/
ββ public/
β ββ index.html # HTML template
ββ src/
β ββ algorithms/ # Sorting logic (Bubble, Selection, Insertion, Merge, Quick)
β ββ components/ # Reusable UI components
β β ββ Bar.js # Renders a single bar
β β ββ Header.js # Sticky top bar with controls and links
β β ββ Footer.js # Bottom attribution footer
β ββ App.js # Main application and state management
β ββ App.css # Neumorphic dark-mode styling & responsive rules
β ββ index.js # Entry point
ββ package.json # Project metadata & scripts
ββ README.md # Project documentation
- Fork the repo
- Create a branch:
git checkout -b feature/YourFeature - Commit your changes:
git commit -m "Add YourFeature" - Push to your branch:
git push origin feature/YourFeature - Open a Pull Request
Please follow the existing code style and include tests or documentation where relevant.
This project is open-source under the MIT License.
- Built with β€οΈ by Adidev J J
- Icons by MaterialβUI (MUI)
Enjoy visualizing your sorts and happy coding! π