An interactive, production-quality platform to visualize Data Structures & Algorithms — step by step, with beautiful animations.
- 6 algorithms: Bubble, Selection, Insertion, Merge, Quick, Heap Sort
- Animated color-coded bars (comparing / swapping / sorted / pivot)
- Real-time stats: comparisons, swaps, array accesses
- Step mode, pause/resume, speed & size sliders
- Linear Search and Binary Search
- Highlighted active / visited / eliminated elements
- lo / mid / hi pointers for Binary Search
- All CRUD operations with live animations
- Overflow/underflow detection with messages
- Insert, Search, Clear
- Animated Inorder, Preorder, Postorder, Level Order traversals
- Auto-computed SVG layout
- BFS, DFS, Dijkstra on a weighted graph
- Animated node states: visited → current → path
- Edge path highlighting with weight labels
- Description, complexity, use cases
- Code viewer in JavaScript, Python, Java
- Framework: Next.js 16 (App Router)
- Language: TypeScript 5
- Styling: Tailwind CSS 4 + CSS Variables
- State: Zustand
- Animations: React State + CSS Transitions
git clone https://github.com/yourusername/dsa-visualizer.git
cd dsa-visualizer
npm install
npm run devapp/ # Next.js App Router pages
page.tsx # Landing page
dashboard/ # Dashboard
visualizers/ # 7 visualizer pages
components/
layout/ # Navbar, Sidebar, VisualizerLayout
shared/ # AlgorithmPanel
ui/ # Button, Select, Slider, etc.
lib/
algorithms/ # Step generators (sorting, searching, graph)
constants/ # Default graph, visualizer metadata
store/ # Zustand state stores
types/ # All TypeScript interfaces
utils/ # Helpers, color functions
npm run build
# Deploy to Vercel, Netlify, or any Node host- A* pathfinding
- AVL Tree with balancing
- Algorithm comparison mode (side-by-side)
- Custom array input
- Sound effects
- Export animation as GIF
- Quiz mode
MIT License