🚀 DSA Visualizer

"Stop memorizing code. Start seeing it."

Welcome to DSA Visualizer, an interactive, open-source platform designed to bridge the gap between theoretical algorithm logic and practical implementation. This project is built to help the global community of students and developers master Data Structures and Algorithms through immersive, real-time animations.

---

✨ Key Features

• Real-time Visualization: Watch algorithms work step-by-step with intuitive color-coding for comparisons (Yellow), swaps (Red), and sorted elements (Green).
• Total Playback Control: A custom-built state engine allowing users to Start, Pause, Resume, and Reset animations at any point.
• Dual Learning Experience: Every visualizer is paired with a clean, standard C++ Implementation scrollable directly below the animation.
• Cinematic UI: A fully responsive, dark-mode dashboard designed for focus and clarity.

🛠️ Tech Stack

• React.js – Modern frontend architecture.
• Tailwind CSS – Utility-first styling for a sleek, custom UI.
• Framer Motion – High-performance layout animations for the visualizer bars.
• Lucide React – Clean and consistent iconography.
• React Router DOM – Seamless navigation between Home, Algorithms, and Contact pages.

---

❤️ An Open Source Mission

This project is a community-first initiative. We believe that education should be accessible, visual, and collaborative. Anyone is welcome to contribute and help make this tool better for everyone.

How You Can Help:

1. Star the Repository: If this tool helps you, please consider starring (⭐) the project. It helps the project reach more learners and helps us stay motivated!
2. Add New Algorithms: The project is designed to be highly scalable. Feel free to add your own sorting, searching, or graph algorithms to the library at any time.
3. Improve the Experience: Submit pull requests for UI enhancements, smoother animation logic, or better documentation.

---

📩 Welcome to the Community

We are thrilled to have you here! Whether you are here to learn or to contribute, your presence makes the project better. Feel free to explore the algorithms, star the repo for future reference, and join us in making DSA learning easier for everyone.

---

🤝 How to Contribute (The Workflow)

To ensure your contributions are merged smoothly, please follow this step-by-step workflow:

1. Fork the Project

Click the Fork button at the top right of this page to create a copy of this repository in your own GitHub account.

2. Clone your forked repository

git clone https://github.com/<your_github_username>/DSA-Visualizer.git

3. Create a New Branch

Always work on a new branch for each feature or fix to keep the main branch clean:

git checkout -b fix-issue-<ISSUE-NUMBER>

4. Check Changed Files

After you have added your changes, check which files were modified:

git status -s

5. Add Files to Staging

Add all the changed files to the staging area to prepare them for a commit:

git add .

6. Commit Your Changes

Save your progress with a clear, descriptive message about what you changed:

git commit -m "Added: <EXPLAIN-YOUR-CHANGES>"

7. Push Your Changes

Upload your local branch changes to your forked repository on GitHub:

git push origin fix-issue-<ISSUE-NUMBER>

8. Open a Pull Request

Go to the original sanglaphalder/DSA-Visualizer repository on GitHub. You will see a green "Compare & pull request" button. Click it and describe your work!