AlgoVisualizer

AlgoVisualizer is a web-based, interactive platform designed to help users understand complex Data Structures and Algorithms (DSA) by visualizing their step-by-step execution. Built with React and Tailwind CSS, it provides a clean, modern, and intuitive interface for learning.

#algorithms#algorithms-visualization#algovisualiser#data-structures#dsa#javascript

View Repository on GitHub ↗

REPOSITORY OVERVIEW

Live repository statistics

★ 32Stars

⑂ 83Forks

◯ 0Open issues

◉ 32Watchers

README preview

🎨 AlgoVisualizer

🌟 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

📚 Learning Resources

🤝 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