Skip to content

Latest commit

Β 

History

History
122 lines (84 loc) Β· 3.47 KB

File metadata and controls

122 lines (84 loc) Β· 3.47 KB

Live Demo License: MIT

πŸš€ Sort Visualizer

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/


πŸ“– Table of Contents


🎯 Features

  • 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 πŸ“±

βš™οΈ Installation

  1. Clone the repository

    git clone https://github.com/AdidevJJ/sort-visualizer.git
    cd sort-visualizer
  2. Install dependencies

    npm install
    # or
    yarn install
  3. Start the development server

    npm start
    # or
    yarn start
  4. Open in your browser Navigate to http://localhost:3000


πŸš€ Usage

  1. Select an Algorithm: Click the algorithm pill in the header.
  2. Adjust Speed: Choose a speed multiplier (1Γ— to 5Γ—).
  3. Play / Pause / Step: Use the controls to animate or step through the sort.
  4. Randomize Array: Click πŸ”„ to generate a new set of values.

πŸ—‚οΈ Project Structure

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

🀝 Contributing

  1. Fork the repo
  2. Create a branch: git checkout -b feature/YourFeature
  3. Commit your changes: git commit -m "Add YourFeature"
  4. Push to your branch: git push origin feature/YourFeature
  5. Open a Pull Request

Please follow the existing code style and include tests or documentation where relevant.


πŸ“ License

This project is open-source under the MIT License.


πŸ™ Acknowledgments

  • Built with ❀️ by Adidev J J
  • Icons by Material‑UI (MUI)

Enjoy visualizing your sorts and happy coding! πŸŽ‰