Skip to content

README.md

Latest commit

 

History

History
121 lines (86 loc) · 3.18 KB

README.md

File metadata and controls

121 lines (86 loc) · 3.18 KB

Algorithm Visualizer & Practice Problems 🚀

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.

✨ Features

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

🖥️ Run Locally

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.