Skip to content

MBreece89/Algorithm-Visualizer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

No description or website provided.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published