AlgoViz – Algorithm Visualizer

A modern, interactive web application for learning and visualizing algorithms through real-time, step-by-step animations.

Live Demo | GitHub | Documentation

🎯 Overview

AlgoViz is an educational platform designed to help developers, students, and anyone preparing for coding interviews understand algorithms through beautiful, interactive visualizations. Watch sorting algorithms rearrange bars, see graph traversal explore nodes, and observe pathfinding algorithms find optimal routes.

✨ Features

• Real-Time Visualization: Watch algorithms execute step-by-step with smooth animations
• Interactive Controls: Adjust speed, pause, resume, and reset visualizations
• Multiple Algorithms:
  • Sorting: Bubble Sort, Merge Sort, Quick Sort
  • Graph Traversal: BFS, DFS
  • Pathfinding: Dijkstra's Algorithm, A* Search
• Educational Content: View algorithm complexity, descriptions, and properties
• Modern UI: Beautiful dark theme with responsive design
• Performance Optimized: Smooth animations and efficient algorithms

🚀 Getting Started

Prerequisites

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

Installation

1. Clone the repository

   git clone https://github.com/yourusername/algoviz.git
   cd algoviz

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Open your browser Navigate to http://localhost:3000

Build for Production

npm run build

The build folder is ready to be deployed.

📱 Usage

Sorting Algorithms

1. Select an algorithm from the dropdown
2. Adjust array size and speed
3. Click "Start" to begin visualization
4. Watch the bars animate as the algorithm proceeds
5. Use "Reset" to generate a new array

Graph Traversal

1. Choose between BFS or DFS
2. Select drawing mode (Wall, Start, or End)
3. Click on the grid to place walls, start, and end points
4. Click "Start" to begin traversal
5. Watch the algorithm explore the grid

Pathfinding

1. Choose between Dijkstra's or A*
2. Set your start point (green) and end point (red)
3. Draw walls to create obstacles
4. Click "Start" to find the shortest path
5. The path will be highlighted in purple

📂 Project Structure

src/
├── components/
│   ├── Navbar.js
│   ├── LandingPage.js
│   ├── SortingVisualizer.js
│   ├── GraphVisualizer.js
│   ├── PathfindingVisualizer.js
│   ├── ControlPanel.js
│   └── InfoPanel.js
├── algorithms/
│   ├── sorting/
│   │   ├── bubbleSort.js
│   │   ├── mergeSort.js
│   │   └── quickSort.js
│   ├── graph/
│   │   ├── bfs.js
│   │   └── dfs.js
│   └── pathfinding/
│       ├── dijkstra.js
│       └── aStar.js
├── styles/
│   ├── index.css
│   ├── App.css
│   ├── Navbar.css
│   ├── LandingPage.css
│   ├── ControlPanel.css
│   ├── InfoPanel.css
│   ├── SortingVisualizer.css
│   ├── GraphVisualizer.css
│   └── PathfindingVisualizer.css
├── utils/
│   ├── helpers.js
│   └── constants.js
├── App.js
└── index.js

🎨 Color Scheme

• Background: Deep Navy (#020617)
• Card Background: Darker Blue (#0f172a)
• Primary Accent: Cyan (#38bdf8)
• Secondary Accent: Indigo (#6366f1)
• Success: Green (#10b981)
• Warning: Amber (#f59e0b)
• Danger: Red (#ef4444)
• Text: Light Slate (#f1f5f9)

🔧 Technologies Used

• Frontend: React.js 18
• Styling: Custom CSS3 with CSS Variables
• Animation: CSS transitions + JavaScript timers
• Build Tool: Create React App
• Deployment: Netlify / Vercel

📊 Algorithm Specifications

Sorting Algorithms

Algorithm	Best	Average	Worst	Space	Stable
Bubble Sort	O(n)	O(n²)	O(n²)	O(1)	✓
Merge Sort	O(n log n)	O(n log n)	O(n log n)	O(n)	✓
Quick Sort	O(n log n)	O(n log n)	O(n²)	O(log n)	✗

Graph Algorithms

Algorithm	Time	Space
BFS	O(V + E)	O(V)
DFS	O(V + E)	O(V)

Pathfinding Algorithms

Algorithm	Time	Space	Optimal
Dijkstra	O((V+E) log V)	O(V)	✓
A*	O(b^d)	O(b^d)	✓

🎓 Learning Resources

Each algorithm includes:

• Description: What the algorithm does
• Complexity Analysis: Time and space complexity for all cases
• Stability: Whether the algorithm maintains relative order of equal elements
• Visual Feedback: Color-coded highlights showing algorithm progress

🚀 Deployment

Deploy to Netlify

1. Push your code to GitHub
2. Connect your repository to Netlify
3. Set build command: npm run build
4. Set publish directory: build
5. Deploy!

Deploy to Vercel

1. Push your code to GitHub
2. Import your project to Vercel
3. Vercel auto-detects React apps and configures build settings
4. Click deploy!

🐛 Known Limitations

• Large array sizes (200+) may experience performance degradation
• Grid visualizations optimized for screens 1024px and above
• Some animations may appear choppy on lower-end devices

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

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

👨‍💻 Authors

• Your Name - Initial work

🙏 Acknowledgments

• Inspired by educational algorithm visualization platforms
• Icons from Unicode emoji set
• Color scheme inspired by modern design systems

📞 Support

If you encounter any issues, please:

1. Check existing GitHub issues
2. Create a new issue with detailed description
3. Include screenshots or videos if applicable

🗺️ Roadmap

• Sound effects toggle
• Side-by-side algorithm comparison
• Custom array input
• Algorithm step-through mode
• More sorting algorithms (Insertion, Selection, Heap)
• More graph algorithms (Prim's, Kruskal's)
• Maze generation algorithms
• User accounts and progress tracking

---

Happy Learning! 🚀