Data Structures and Algorithm Visualizer

An interactive web application for visualizing common data structures and algorithms. Built with React, TypeScript, and modern web technologies to help students and developers understand how algorithms work through step-by-step animations.

Features

Visualizers

• Sorting Algorithms - Bubble Sort, Selection Sort, Insertion Sort, Merge Sort, Quick Sort, Heap Sort
• Graph Algorithms - BFS, DFS, Dijkstra's Algorithm, A* Search
• Binary Search Tree - Insert, Search, Traversals (Inorder, Preorder, Postorder, Level-order)
• Stack & Queue - Push/Pop, Enqueue/Dequeue, Peek operations
• Heap (Min/Max) - Insert, Extract, Build Heap operations
• Network Flow - Ford-Fulkerson, Edmonds-Karp algorithms

Core Features

• Step-by-step Animation - Watch algorithms execute one step at a time
• Playback Controls - Play, pause, stop, step forward/backward
• Speed Control - Adjust animation speed from 0.25x to 4x
• Algorithm Information - View time/space complexity and pseudocode
• Custom Input - Enter your own data or generate random datasets
• Responsive Design - Works on desktop and tablet devices

Tech Stack

• Runtime: Bun / Node.js
• Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Animations: Framer Motion
• Icons: Lucide React
• Routing: React Router v6

Getting Started

Prerequisites

• Bun (recommended) or Node.js 18+

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/dsa-visualizer.git
   cd dsa-visualizer

2. Install dependencies:

   bun install
   # or
   npm install

3. Start the development server:

   bun dev
   # or
   npm run dev

4. Open http://localhost:5173 in your browser.

Build for Production

bun run build
# or
npm run build

The built files will be in the dist directory.

Project Structure

src/
├── components/
│   ├── ui/                     # shadcn/ui components
│   ├── layout/                 # Layout components (Header, Sidebar)
│   └── shared/                 # Shared components (ControlPanel, etc.)
│
├── core/
│   └── animation/              # Animation engine and hooks
│       ├── AnimationEngine.ts  # Core animation orchestrator
│       └── useAnimation.ts     # React hook for animations
│
├── visualizers/
│   ├── sorting/                # Sorting algorithms visualizer
│   ├── graph/                  # Graph algorithms visualizer
│   ├── tree/                   # BST visualizer
│   ├── stack-queue/            # Stack & Queue visualizer
│   ├── heap/                   # Heap visualizer
│   └── network-flow/           # Network flow visualizer
│
├── pages/                      # Route pages
├── types/                      # TypeScript type definitions
└── lib/                        # Utility functions

Usage

1. Select a Visualizer - Choose from the homepage grid or navigation menu
2. Configure Data - Enter custom values or generate random data
3. Select Algorithm - Choose the algorithm you want to visualize
4. Control Playback - Use play/pause/step controls to watch the animation
5. Adjust Speed - Use the speed slider to slow down or speed up
6. Learn - Read the algorithm description, complexity, and pseudocode

Algorithm Complexity Reference

Sorting Algorithms

Algorithm	Best	Average	Worst	Space
Bubble Sort	O(n)	O(n²)	O(n²)	O(1)
Selection Sort	O(n²)	O(n²)	O(n²)	O(1)
Insertion Sort	O(n)	O(n²)	O(n²)	O(1)
Merge Sort	O(n log n)	O(n log n)	O(n log n)	O(n)
Quick Sort	O(n log n)	O(n log n)	O(n²)	O(log n)
Heap Sort	O(n log n)	O(n log n)	O(n log n)	O(1)

Graph Algorithms

Algorithm	Time	Space
BFS	O(V + E)	O(V)
DFS	O(V + E)	O(V)
Dijkstra	O((V + E) log V)	O(V)
A*	O(E) to O(V²)	O(V)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.

Acknowledgments

• Inspired by various algorithm visualization tools
• Built with shadcn/ui components
• Icons from Lucide