🎨 AlgoVisualizer

<p align="center"> <img src="https://img.shields.io/badge/AlgoVisualizer-Interactive%20Learning-blue?style=for-the-badge" alt="Banner" /> </p> <p align="center"> <b>An Interactive Platform for Visualizing Algorithms and Data Structures</b><br> <a href="https://algo-visualizer-green.vercel.app/">Live Demo</a> • <a href="https://github.com/mahaveergurjar/AlgoVisualizer/issues">Report Bug</a> • <a href="https://github.com/mahaveergurjar/AlgoVisualizer/issues">Request Feature</a> </p>

---

🌟 Overview

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.

---

✨ Features

• 🎯 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

---

🛠️ Tech Stack

| Technology | Purpose | | ------------ | ----------------------- | | React | Frontend framework | | Vite | Build tool & dev server | | Tailwind CSS | Styling | | JavaScript | Algorithm logic | | Vercel | Deployment |

---

📁 Project Structure

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

---

🚀 Quick Start

1️⃣ Prerequisites

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

2️⃣ Installation

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

3️⃣ Setup API Key

echo "VITE_GEMINI_API_KEY=your_api_key_here" > .env

Get a free API key from Google AI Studio

4️⃣ Run the App

npm run dev

Open → http://localhost:5173

5️⃣ Build for Production

npm run build

---

🤖 AI Learning Assistant

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?”

---

📸 Screenshots

<p align="center"> <img src="screenshot/screenshot1.png" alt="Algorithm Visualization Example" width="700"/> </p>

---

📚 Learning Resources

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

---

🤝 Contributing

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.

---

📜 License

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

---

👨‍💻 Author

Mahaveer Gurjar
GitHub: @mahaveergurjar
Project: AlgoVisualizer

---

<p align="center"> ⭐ If you find this project helpful, please give it a star on GitHub! ⭐ </p>