Learn algorithms by watching them work.
An interactive web-based platform to visualize sorting and graph algorithms in real time with smooth animations and intuitive controls.
🌐 Live Demo:
👉 https://dsa-visualizer-wine.vercel.app/
Understanding algorithms from textbooks can be difficult.
DSA Visualizer transforms abstract algorithm logic into live visual animations, helping learners understand how algorithms actually work step by step.
Ideal for:
- 🎓 Students learning Data Structures & Algorithms
- 👨💻 Developers revising core concepts
- 🧠 Visual learners
See how elements are compared, swapped, and arranged in real time.
- Bubble Sort
- Selection Sort
- Insertion Sort
- Merge Sort
- Quick Sort
Interactive Controls
- Adjustable input size
- Step-by-step animations
- Visual understanding of time complexity
Create graphs and observe shortest-path algorithms in action.
- Dijkstra’s Algorithm
- Bellman-Ford Algorithm
- Floyd-Warshall Algorithm
Interactive Features
- Custom graph creation
- Dynamic source node selection
- Live distance updates
- Distance table visualization
- 🎯 Real-time algorithm animations
- 🖱️ User-controlled inputs
- 📱 Fully responsive design
- ⚡ Smooth visual transitions
- 🧩 Beginner-friendly UI
| Layer | Technology |
|---|---|
| Frontend | React |
| Styling | Tailwind CSS |
| UI Components | shadcn/ui |
| Build Tool | Vite |
| Deployment | Lovable |
| Version Control | Git & GitHub |
User Controls ↓ Algorithm Logic ↓ State Management (React) ↓ Animation Engine ↓ Live Visualization
- Designed and implemented the complete frontend architecture
- Built real-time algorithm animations
- Implemented interactive sorting and graph visualizations
- Designed a clean and responsive UI using Tailwind CSS
- Used reusable UI components with shadcn/ui
- Managed version control using GitHub auto-sync via Lovable
- Deployed the project on the cloud using Lovable
- Strong understanding of sorting and graph algorithms
- Visualizing algorithm behavior in real time
- Advanced React state management
- Used TypeScript for type safety
- UI optimization using Tailwind CSS
- Algorithm time and space complexity insights
- Git-based workflows and cloud deployment
- ➕ Add Heap Sort and Radix Sort
- ➕ Add BFS and DFS graph traversals
- 📊 Performance comparison dashboard
- 💾 Backend integration to save user progress
- 🔐 Authentication system for students
Contributions are welcome!
Fork the repository, experiment, and submit a pull request 🚀
This project is created for educational and learning purposes.