An interactive web application for visualizing data structures and algorithms. Perfect for students, educators, and anyone learning computer science fundamentals.
Visualize 10 popular sorting algorithms with step-by-step animations:
- Bubble Sort - Simple comparison-based algorithm
- Selection Sort - Finds minimum element repeatedly
- Insertion Sort - Builds sorted array one item at a time
- Merge Sort - Divide and conquer approach
- Quick Sort - Efficient partitioning algorithm
- Heap Sort - Uses binary heap data structure
- Radix Sort - Non-comparative integer sorting
- Shell Sort - Generalized insertion sort
- Counting Sort - Integer sorting by counting occurrences
- Tim Sort - Hybrid stable sorting algorithm
Features:
- Adjustable animation speed
- Customizable array size
- Play/Pause/Step controls
- Visual highlighting of comparisons and swaps
- Algorithm complexity information
Explore and manipulate various tree structures with interactive visualizations:
- Binary Search Tree (BST) - Ordered binary tree
- AVL Tree - Self-balancing BST
- Red-Black Tree - Balanced binary search tree
- Min Heap - Complete binary tree with min-heap property
- Max Heap - Complete binary tree with max-heap property
- Trie - Prefix tree for string operations
- Segment Tree - Range query and update operations
- Fenwick Tree (BIT) - Efficient prefix sum queries
- N-ary Tree - Trees with variable children per node
- B-Tree - Self-balancing search tree for disk storage
Features:
- Insert, delete, and search operations
- Tree traversals (Inorder, Preorder, Postorder, Level-order)
- Visual feedback for operations
- Operation history and status
- Detailed algorithm information
- React 18 - UI framework
- TypeScript - Type-safe JavaScript
- Vite - Fast build tool and dev server
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library
- React Router - Client-side routing
- Shadcn UI - Re-usable component library
- Lucide React - Icon library
- Node.js (v18 or higher)
- npm or yarn
- Clone the repository:
git clone <YOUR_GIT_URL>
cd <YOUR_PROJECT_NAME>- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
- Navigate to the Sort page
- Select a sorting algorithm from the dropdown
- Adjust array size and animation speed using sliders
- Click Randomize to generate a new array
- Click Play to start the visualization
- Use Pause to stop and Step to move one step at a time
- Navigate to the Trees page
- Select a tree type from the dropdown
- Enter a value and click Insert to add nodes
- Use Delete to remove nodes or Search to find them
- Select traversal type to see different tree traversal orders
- Click Clear Tree to start fresh
src/
├── components/
│ ├── sorting/ # Sorting visualizer components
│ ├── tree/ # Tree visualizer components
│ ├── ui/ # Reusable UI components (shadcn)
│ ├── Header.tsx # Navigation header
│ ├── Footer.tsx # Page footer
│ └── Layout.tsx # Main layout wrapper
├── lib/
│ ├── sorting-algorithms.ts # Sorting algorithm implementations
│ ├── tree-operations.ts # BST and AVL operations
│ ├── heap-operations.ts # Heap operations
│ ├── rb-tree-operations.ts # Red-Black tree operations
│ ├── trie-operations.ts # Trie operations
│ ├── segment-tree-operations.ts # Segment tree operations
│ ├── fenwick-tree-operations.ts # Fenwick tree operations
│ ├── nary-tree-operations.ts # N-ary tree operations
│ ├── b-tree-operations.ts # B-tree operations
│ └── traversal-operations.ts # Tree traversal algorithms
├── pages/
│ ├── Index.tsx # Landing page
│ ├── Sort.tsx # Sorting visualizer page
│ ├── Trees.tsx # Tree visualizer page
│ └── NotFound.tsx # 404 page
└── main.tsx # Application entry point
npm run buildThe build output will be in the dist/ directory.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
For questions or feedback, please open an issue on GitHub.
Made with ❤️ for computer science education