Algorithm-Visualizer

📊 Interactive Data Structures and Algorithms Visualization Tool

Algorithm Visualizer is an interactive web application designed to help users understand complex data structures and algorithms through step-by-step visual animations. This educational tool makes learning algorithms intuitive and engaging by providing clear visualizations of how algorithms work under the hood.

✨ Features

• Interactive Visualizations: Step through algorithms at your own pace with play, pause, and step controls

• Speed Control: Adjust animation speed to focus on complex operations

• Multiple Algorithms: Visualize various algorithms across different categories:

• Sorting: Insertion Sort, Counting Sort, Dutch National Flag

• Searching: Binary Search

• Graph Algorithms: Depth-First Search, Breadth-First Search, Topological Sort

• Tree Structures: Binary Search Tree

• Heap Operations: Min Heap, Max Heap

• Dynamic Programming: Kadane's Algorithm

• Bit Manipulation: Various bit operations

• Greedy Algorithms: Activity Selection

• Comprehensive Information: Each algorithm includes:

• Problem statement

• Step-by-step visualization

• Detailed explanation

• Python implementation

• Time and space complexity analysis

• Real-world use cases

🛠️ Technologies Used

• Next.js 14: React framework with App Router
• TypeScript: For type safety and better developer experience
• Tailwind CSS: For responsive and modern UI design
• shadcn/ui: Component library for consistent UI elements
• React Error Boundary: For graceful error handling
• Lucide React: For beautiful icons

🚀 Installation

1. Clone the repository:

git clone https://github.com/yourusername/algorithm-visualizer.git
cd algorithm-visualizer

2. Install dependencies:

npm install

3. Run the development server:

npm run dev

4. Open http://localhost:3000 in your browser to see the application.

📖 How to Use

1. Select an Algorithm: Choose from the algorithm library in the sidebar

2. Visualization Controls:

3. Play/Pause: Start or pause the animation

4. Step Forward/Backward: Move through the algorithm one step at a time

5. Reset: Return to the initial state

6. Speed Control: Adjust the animation speed

7. Tabs:

8. Visualization: Watch the algorithm in action with step descriptions

9. Explanation: Read detailed information about the algorithm

10. Python Code: View the complete implementation with explanations

📁 Project Structure

algorithm-visualizer/
├── app/                    # Next.js app directory
│   ├── page.tsx            # Main page component
│   └── layout.tsx          # Root layout
├── components/             # React components
│   ├── algorithm-visualizer.tsx          # Main visualizer component
│   ├── algorithm-visualizer-client.tsx   # Client-side wrapper
│   ├── algorithm-visualizer-wrapper.tsx  # Wrapper with algorithm selection
│   ├── visualization-canvas-2d.tsx       # 2D visualization container
│   ├── visualizations/                   # Individual algorithm visualizations
│   │   ├── binary-search.tsx
│   │   ├── binary-search-tree.tsx
│   │   ├── graph-dfs.tsx
│   │   └── ...
│   └── ui/                 # UI components from shadcn
├── lib/                    # Utility functions and data
│   └── algorithms.ts       # Algorithm definitions and metadata
├── public/                 # Static assets
└── ...

🔮 Future Improvements

• Add more algorithms and data structures
• Implement user input for custom test cases
• Add dark mode toggle
• Create algorithm comparison view
• Add complexity analysis charts
• Support for multiple programming languages
• Add user accounts to track progress

📸 Screenshots

Binary Search visualization showing the search process

Dutch national Flag showing the sort process

Topological Sort showing course prerequisites as a directed acyclic graph

Activity Selection problem visualization using the Greedy approach

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgements

• Inspiration from VisuAlgo
• Next.js documentation
• Tailwind CSS for styling
• shadcn/ui for UI components