• ✅ Bubble Sort (Implemented)
• ✅ Merge Sort (Implemented)
• ✅ Quick Sort (Implemented)
• ✅ Selection Sort (Implemented)
• ✅ Insertion Sort (Implemented)
• ✅ Heap Sort (Implemented)
• ✅ Counting Sort (Implemented)
• ✅ Radix Sort (Implemented)

AlgoVisualizer is a modern, interactive web application designed to help students, developers, and algorithm enthusiasts understand complex Data Structures and Algorithms (DSA) through visual, step-by-step execution. Whether you're preparing for technical interviews, studying for exams, or simply curious about how algorithms work under the hood, AlgoVisualizer makes learning engaging and intuitive.

• 🎯 Visual Learning: See algorithms in action with real-time, animated visualizations
• 🚀 Interactive Controls: Adjust speed, pause, and step through algorithms at your own pace
• 🎨 Modern UI: Clean, responsive interface built with React and Tailwind CSS
• 📚 Comprehensive Coverage: From basic sorting to advanced pathfinding algorithms
• 🔧 Educational Focus: Perfect for students, teachers, and self-learners
• 💻 No Installation: Run directly in your browser

• Interactive Controls:
  • Step-by-step algorithm visualization
  • Interactive forward/backward navigation
  • Real-time complexity metrics (comparisons, swaps, merges)
  • Educational explanations for each step
  • Keyboard navigation support (arrow keys)
  • Visual representation of algorithm steps

Technology	Description
	Frontend framework for building UI
	Fast build tool and dev server
	Utility-first CSS framework
	Programming language
	Deployment platform

AlgoVisualizer/
├── public/                  # Static assets
│   └── vite.svg            # Vite logo
├── src/                    # Source files
│   ├── components/         # React components
│   │   ├── Sorting/       # Sorting algorithm components
│   │   ├── Pathfinding/   # Pathfinding components
│   │   ├── Graph/         # Graph algorithm components
│   │   └── UI/            # Reusable UI components
│   ├── algorithms/         # Algorithm implementations
│   │   ├── sorting/       # Sorting algorithm logic
│   │   ├── pathfinding/   # Pathfinding algorithm logic
│   │   └── graph/         # Graph algorithm logic
│   ├── utils/             # Utility functions
│   │   ├── helpers.js     # Helper functions
│   │   └── constants.js   # App constants
│   ├── styles/            # CSS modules and styles
│   │   └── *.module.css   # Component-specific styles
│   ├── App.jsx            # Main App component
│   ├── App.css            # Global styles
│   ├── main.jsx           # Entry point
│   └── index.css          # Base CSS
├── .gitignore             # Git ignore rules
├── index.html             # HTML template
├── package.json           # Dependencies and scripts
├── vite.config.js         # Vite configuration
└── README.md              # Project documentation

Before you begin, ensure you have the following installed:

• Node.js (v14.0 or higher)
• npm (v6.0 or higher) or yarn

1. Clone the repository

   git clone https://github.com/mahaveergurjar/AlgoVisualizer.git
   cd AlgoVisualizer

2. Install dependencies

   npm install
   # or
   yarn install

3. Start the development server

   npm run dev
   # or
   yarn dev

4. Open your browser

   Navigate to http://localhost:5173 to view the application.

npm run build
# or
yarn build

The optimized production build will be generated in the dist/ folder.

1. Select a sorting algorithm from the dropdown menu
2. Adjust the array size and speed using the sliders
3. Click "Generate New Array" to create random data
4. Press "Start" to begin the visualization
5. Use "Pause/Resume" to control the execution
6. Click "Reset" to return to the initial state

1. Choose between Dijkstra's or A* algorithm
2. Click on the grid to set walls/obstacles
3. Set start and end points
4. Adjust visualization speed
5. Click "Visualize" to see the algorithm in action

1. Select DFS or BFS
2. Click nodes to create a graph structure
3. Choose a starting node
4. Watch the traversal process unfold

We welcome contributions from developers of all skill levels! Whether it's fixing bugs, adding features, improving documentation, or suggesting ideas, your help is appreciated.

1. Fork the repository

   git clone https://github.com/YOUR-USERNAME/AlgoVisualizer.git

2. Create a feature branch

   git checkout -b feature/AmazingFeature

3. Make your changes

   • Write clean, readable code
   • Follow the existing code style
   • Add comments where necessary
   • Test your changes thoroughly

4. Commit your changes

   git commit -m 'Add some AmazingFeature'

5. Push to your branch

   git push origin feature/AmazingFeature

6. Open a Pull Request

   • Provide a clear description of your changes
   • Reference any related issues
   • Wait for review and feedback

• ✅ Ensure your code follows the project's coding standards
• ✅ Write meaningful commit messages
• ✅ Test your changes before submitting
• ✅ Update documentation if needed
• ✅ Be respectful and constructive in discussions
• ✅ Follow the standard visualization layout (see below)
• ❌ Don't submit spam or low-quality PRs

All algorithm visualizations must follow this consistent layout for a uniform user experience:

┌─────────────────────────────────────────────────────────────┐
│  HEADER SECTION                                             │
│  - Problem Title (e.g., "Trapping Rain Water")              │
│  - Problem Description/LeetCode Number                      │
│  - Back to Problems Button                                  │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  INPUT CONTROLS ROW                                         │
│  - Input Field (for array/data input)                       │
│  - Navigation Controls (Previous/Next Step)                 │
│  - Step Counter (e.g., "31/39")                             │
│  - Reset Button                                             │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  ALGORITHM TABS (if multiple approaches)                    │
│  - Brute Force O(n²)                                        │
│  - Optimal O(n)                                             │
└─────────────────────────────────────────────────────────────┘

┌──────────────────────────┬──────────────────────────────────┐
│  LEFT PANEL              │  RIGHT PANEL                     │
│                          │                                  │
│  CODE SECTION            │  VISUALIZATION SECTION           │
│  - Syntax highlighted    │  - Main visual representation    │
│  - Line numbers          │  - Interactive bars/nodes/graph  │
│  - Current line highlight│  - Color-coded elements          │
│  - Step-by-step execute  │  - Animated transitions          │
│                          │  - Current position indicator    │
└──────────────────────────┴──────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  DATA STRUCTURE DISPLAY (if applicable)                     │
│  - Arrays/Stacks/Queues being used                          │
│  - Show values at each step                                 │
│  - Highlight active elements                                │
│  Example:                                                   │
│    Left Max Array (lmax):  [0, 1, 1, 2, 2, 2, ...]          │
│    Right Max Array (rmax): [3, 3, 3, 3, 3, 2, ...]          │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  OUTPUT SECTION                                             │
│  - Final result display                                     │
│  - Clear visual indicator                                   │
│  Example: "Total Trapped Water: 6"                          │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  EXPLANATION SECTION                                        │
│  - Step-by-step explanation of current operation            │
│  - Formula/logic being applied                              │
│  Example: "Water at index 4 = min(max[4], rmax[4])          │
│            - height[4] = min(2, 3) - 1 = 1"                 │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│  COMPLEXITY ANALYSIS                                        │
│  - Time Complexity: O(n) with explanation                   │
│  - Space Complexity: O(n) with explanation                  │
│  - Brief description of approach                            │
└─────────────────────────────────────────────────────────────┘

When creating a new visualization, ensure you include:

1. Header Section

   • Clear problem title
   • Subtitle with problem number or description
   • Navigation back to problem list

2. Input Controls

   • Input field for custom data entry
   • Play/Pause button for animation
   • Step forward/backward buttons (◄ ►)
   • Speed control slider
   • Reset button to start over
   • Step counter showing progress

3. Code Display (Left Panel)

   • Syntax-highlighted code
   • Line numbers
   • Current executing line highlighted
   • Support for multiple language tabs (C++, Java, Python)

4. Visualization Area (Right Panel)

   • Main visual representation (bars, nodes, grid, etc.)
   • Smooth animations between states
   • Color coding:
     • Blue - Currently processing
     • Green - Completed/correct
     • Red - Comparison/error
     • Yellow/Gold - Special focus
     • Gray - Default/unprocessed
   • Clear labels and indices

5. Data Structure Display

   • Show auxiliary arrays/stacks/queues if used
   • Display current values
   • Highlight active elements
   • Update in sync with main visualization

6. Output Section

   • Large, clear display of final result
   • Use success color (green) for completion
   • Include units or context

7. Explanation Panel

   • Dynamic text explaining current step
   • Show formulas or calculations
   • Update with each step
   • Keep it concise and clear

8. Complexity Analysis

   • Time complexity with Big-O notation
   • Space complexity with Big-O notation
   • Brief explanation of why
   • Comparison with other approaches if applicable

Before submitting your visualization, ensure:

• Follows the standard layout structure
• Includes all required sections
• Code is properly syntax highlighted
• Animations are smooth and not too fast/slow
• Colors are consistent with the design system
• Responsive design works on different screen sizes
• Input validation handles edge cases
• Step-by-step navigation works correctly
• Explanation text is clear and educational
• Complexity analysis is accurate
• Code is well-commented
• No console errors or warnings

This project participates in Hacktoberfest! We encourage quality contributions during October and throughout the year.

The visualization follows our standard layout with:

• Input controls at the top
• Code visualization on the left
• Interactive elevation map on the right
• Data structure displays (lmax, rmax arrays)
• Real-time output and step explanations
• Complexity analysis at the bottom

Standard layout showing all required components

Add more screenshots of your visualizations here

Want to learn more about the algorithms visualized in this project?

• Big-O Cheat Sheet
• VisuAlgo
• GeeksforGeeks - Algorithms
• Introduction to Algorithms (CLRS)

• No known critical issues at this time
• Report bugs via GitHub Issues

Distributed under the MIT License. See LICENSE file for more information.

Mahaveer Gurjar

• GitHub: @mahaveergurjar
• Project Link: https://github.com/mahaveergurjar/AlgoVisualizer

• Inspired by the need for better algorithm education tools
• Thanks to all contributors who have helped improve this project
• Built with ❤️ for the developer community

If you're contributing for the first time (like during Hacktoberfest 🎃), follow these simple steps to set up AlgoVisualizer locally:

# 1️⃣ Fork this repository (click 'Fork' on GitHub)
# 2️⃣ Clone your fork
git clone https://github.com/<your-username>/AlgoVisualizer.git

# 3️⃣ Navigate into the project folder
cd AlgoVisualizer

# 4️⃣ Install required dependencies
npm install

# 5️⃣ Start the local development server
npm run dev

Now open your browser and go to 👉 http://localhost:5173

to explore the app locally!