A React-based application to visualize sorting algorithms and pathfinding algorithms with beautiful animations using Framer Motion. This project was created as a learning tool for Data Structures and Algorithms.

• Visualize popular sorting algorithms:
  • Bubble Sort
  • Quick Sort (coming soon)
  • Merge Sort (coming soon)
  • Insertion Sort (coming soon)
• Control the speed of the visualization
• Generate new random arrays of different sizes
• Color coding to highlight comparisons, swaps, and sorted elements

• Visualize pathfinding algorithms:
  • Breadth-First Search
  • Dijkstra's Algorithm (coming soon)
  • A* Search Algorithm (coming soon)
• Create walls to block paths
• Customize grid size and animation speed
• Visual indications for visited nodes and the shortest path

• React.js: For building the user interface
• Framer Motion: For smooth animations and transitions
• TailwindCSS: For styling
• Vite: For fast development and building

• Node.js (v16 or later recommended)
• npm or yarn

1. Clone the repository:

   git clone <your-repo-url>
   cd algorithm-visualizers

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to http://localhost:5173

• src/components/sorting: Components for the sorting visualizer
• src/components/pathfinding: Components for the pathfinding visualizer
• src/algorithms: Implementation of various algorithms
• src/utils: Helper functions for arrays and grid operations

Here are some resources to help you understand the algorithms implemented:

• Visualizing Sorting Algorithms
• Pathfinding Visualizations
• Big-O Cheat Sheet

Feel free to contribute to this project by:

1. Implementing additional algorithms
2. Improving visualizations
3. Adding new features
4. Fixing bugs

This project is open source and available under the MIT License.

Happy visualizing and learning! 🚀