DecodeDSA is an interactive and visual web application designed to make learning Data Structures & Algorithms (DSA) fun, intuitive, and hands-on. It provides step-by-step animated visualizations for core DSA concepts, helping students and developers grasp complex logic through real-time feedback.
🔗 Live Demo: https://decodedsa.netlify.app
- Visualize how data is sorted using:
- Bubble Sort
- Selection Sort
- Insertion Sort
- Merge Sort
- Quick Sort
- Heap Sort
- Understand the step-by-step process of:
- Linear Search
- Binary Search
- Push, pop, enqueue, and dequeue operations visualized dynamically.
- Understand LIFO (Last-In-First-Out) vs FIFO (First-In-First-Out) behavior.
- Visualizations of:
- Inorder Traversal
- Preorder Traversal
- Postorder Traversal
- Explore graphs using:
- Breadth-First Search (BFS)
- Depth-First Search (DFS)
- ✅ Choose and interact with multiple DSA algorithms
- ✅ Enter custom input or generate random data
- ✅ Visual representation of how the algorithm works step by step
- ✅ View corresponding code implementation in real-time
- ✅ Time & space complexity details for each algorithm
- ✅ Beautiful, responsive UI with dark/light theme toggle
- ✅ Easy-to-navigate tabbed layout for quick access to topics
- ✅ Canvas-based visualization with zoom & pan for large arrays (100+ elements)
- Node.js (v14 or later)
-
Clone the repo:
git clone https://github.com/your-username/decodedsa.git cd decodedsa -
Install dependencies:
npm install
-
Start the development server:
npm start
-
Open http://localhost:3000 to view the app.
React.js – for dynamic UI
TypeScript – for type-safe development
Tailwind CSS – for modern responsive styling
Konva.js – for drawing canvas-based visual elements (in advanced sections)
Framer Motion – for smooth animations
| Algorithm | Time Complexity | Space Complexity |
|---|---|---|
| Bubble Sort | O(n²) | O(1) |
| Binary Search | O(log n) | O(1) |
| BFS / DFS | O(V + E) | O(V) |
| Tree Traversals | O(n) | O(h) |
Want to add new algorithms or improve visuals? You’re welcome to contribute!
-
Fork this repository
-
Create your feature branch:
git checkout -b feature/your-feature
-
Commit your changes:
git commit -m "Add: your feature" -
Push to the branch:
git push origin feature/your-feature
-
Open a Pull Request
This project is licensed under the MIT License. Feel free to use, modify, and distribute with credit.
Made with ❤️ by V. Sharanya
- ✨ Feel free to open issues or feature requests!
- Add more advanced algorithms (e.g., Dijkstra's, Kruskal's)
- Add speed control for visualization
- Add time complexity animation chart
- Add sound effects for sorting (fun UX!)
- Canvas-based zoom & pan for large arrays (100+) - ✅ Completed
- Aggregated histogram view for very large arrays (1000+)