An interactive algorithm visualizer + coding playground.
Visualize classic algorithms step-by-step OR write your own code and see it animate live.
Perfect for learning, teaching, or practicing coding interview problems.
- 🎥 Algorithm Visualizer – Watch algorithms animate step-by-step with explanations.
- 💻 Coding Playground – Write your own solution, run it, and visualize instantly.
- 📚 Practice Problems – Solve curated problems across data structures & algorithms.
- 📈 Categories Supported (more coming soon):
- Arrays & Strings
- Linked Lists
- Stacks & Queues
- Recursion
- Dynamic Programming
Clone and serve the project:
git clone https://github.com/your-username/algorithm-visualizer.git
cd algorithm-visualizer
# Run with Python
python -m http.server 8000
# Or with Node.js
npx http-server
⚠️ Note: ES6 modules require serving via HTTP. Opening index.html directly may cause import errors.
📂 Project Structure
bash
Copy
Edit
algorithm-visualizer/
│
├── index.html # Main app entry
├── style.css # Styling & animations
├── script.js # Core JavaScript logic
│
├── algorithms/ # Algorithm implementations
│ └── algorithms.js
│
├── problems/ # Problem definitions
│ └── array_practice.js
│
└── README.md
🧑💻 Example Problems
Sliding Window → Maximum sum subarray
Two Pointers → Find pair with target sum
Stack → Next Greater Element
Linked List → Reverse a linked list
Recursion → Fibonacci sequence visualization
🎯 How to Use
Select an algorithm or problem from the dropdown.
Click Run Algorithm (for built-ins) or Run My Code (for your solution).
Watch the visualization animate step-by-step with highlights and explanations.
Debug, tweak, and improve your code visually.
🚀 Roadmap
Add linked list, tree, and graph visualizations
Expand problem sets (DP, Greedy, Graphs)
User progress tracking & difficulty levels
Advanced debugging tools
Richer UI/UX with step controls
🛠️ Tech Stack
Technology Purpose
HTML5 App structure
CSS3 Styling & animations
Vanilla JS Core logic with ES6 modules
No frameworks Lightweight, browser-only build
🤝 Contributing
Contributions are welcome! 🎉
You can help by:
Adding new algorithms to algorithms/algorithms.js
Creating new problems in problems/
Enhancing UI/UX or visualization features
Expanding the documentation
To contribute:
Fork the repo
Create a feature branch (git checkout -b feature/new-algorithm)
Commit changes
Open a Pull Request 🎯
📄 License
This project is licensed under the MIT License.
Feel free to use, modify, and share for learning or teaching purposes.