This project is an interactive web application that visually demonstrates core Data Structures and Algorithms like:
- Sorting (Bubble, Merge, Quick)
- Tree Traversals (Inorder, Preorder, Postorder, Level Order)
- Graph Algorithms (BFS, DFS, Dijkstra)
Built to help students, educators, and engineers see how algorithms work in real-time.
✅ Clean and minimal UI built with ReactJS
✅ Step-by-step animation for each algorithm
✅ Custom input support with instant visualization
✅ Code + Pseudocode display for learning
✅ Adjustable speed and size of data
✅ Modular structure to add new algorithms easily
Algorithm-playground-demo.mp4
| Technology | Purpose |
|---|---|
| React.js | UI Framework |
| JavaScript | Core logic for algorithms |
| HTML/CSS | Layout and styling |
| Framer Motion / GSAP | Smooth animations |
| Vite / Webpack | Build tools |
- Clone this repo
git clone https://github.com/yourusername/DSA-Visualizer.git cd DSA-Visualizer - Install dependencies
npm install
- Start development server
npm run dev
- Open in browser
| Category | Algorithms |
|---|---|
| Sorting | Bubble, Selection, Insertion, Merge, Quick |
| Trees | DFS (Preorder, Inorder, Postorder), BFS |
| Graphs | BFS, DFS, Dijkstra’s (Coming Soon) |
| Searching | Binary Search (Upcoming) |
Mastery over DSA fundamentals
Strong grasp of algorithm visualization and simulation
Real-world application of React component structure and state management
Enhanced problem-solving + front-end integration
Add heap, trie, disjoint sets
Improve accessibility and mobile responsiveness
Add code export/download option
User-selectable themes (dark/light)
Upload test cases as .json files