An Interactive Platform for Visualizing Algorithms and Data Structures
Live Demo • Report Bug • Request Feature

AlgoVisualizer is a modern web application that helps students and developers understand Data Structures and Algorithms through real-time visualizations.
Built with React, Vite, and Tailwind CSS, it offers a smooth, interactive, and visually appealing way to learn complex concepts.

• 🎯 Real-Time Visualizations — See algorithms in action step-by-step
• 🚀 Interactive Controls — Play, pause, and control execution speed
• 💻 Code & Complexity Views — Learn the logic behind the scenes
• 🧠 AI Learning Assistant — Powered by Google Gemini API
• 🎨 Modern UI — Responsive, minimal, and distraction-free
• 📚 Comprehensive Coverage — Sorting, graph, recursion, and more

AlgoVisualizer/
├── public/
├── src/
│   ├── components/
│   ├── pages/
│   ├── search/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── package.json
├── vite.config.js
└── README.md

• Node.js v14+
• npm v6+ or yarn

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

echo "VITE_GEMINI_API_KEY=your_api_key_here" > .env

Get a free API key from Google AI Studio

npm run dev

Open → http://localhost:5173

npm run build

AlgoVisualizer integrates Google Gemini API to answer algorithm-related questions directly in the app.

Example Questions:

• “Explain Merge Sort step-by-step.”
• “Difference between BFS and DFS.”
• “What’s the time complexity of Quick Sort?”

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

We love contributions from the community!
Please read our Contributing Guide to learn how to set up the project, follow coding standards, and make effective pull requests.

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

Mahaveer Gurjar
GitHub: @mahaveergurjar
Project: AlgoVisualizer

⭐ If you find this project helpful, please give it a star on GitHub! ⭐