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
| Technology | Purpose |
|---|---|
| React | Frontend framework |
| Vite | Build tool & dev server |
| Tailwind CSS | Styling |
| JavaScript | Algorithm logic |
| Vercel | Deployment |
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 installecho "VITE_GEMINI_API_KEY=your_api_key_here" > .envGet a free API key from Google AI Studio
npm run devOpen → http://localhost:5173
npm run buildAlgoVisualizer 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?”
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! ⭐