🚀 An immersive way to explore and understand Binary Trees, BST, AVL, Red-Black Trees, Heaps, and Tries through interactive animations.
Binary Tree Visualizer is an interactive learning platform built with React + Vite.
It helps students and developers visualize tree-based data structures dynamically — making complex DSA topics easy to grasp.
🧠 It blends learning with visual engagement using 3D particles, smooth transitions, and Lottie animations.
| Tree Type | Description |
|---|---|
| 🌳 Binary Tree | Basic parent-child relationships |
| 🌿 Binary Search Tree (BST) | Ordered hierarchical tree |
| 🌲 AVL Tree | Self-balancing BST |
| 🔴 Red-Black Tree | Balanced search tree with color properties |
| 🧱 Heap | Min/Max heap operations |
| 🌐 Trie | String-based data structure |
| Layer | Tools |
|---|---|
| 💻 Frontend | React + Vite |
| 🎨 Styling | CSS + Framer Motion + Custom Animations |
| 🧩 Visualization | Lottie JSON + Particle.js |
| 📦 Package Manager | npm |
| 🔧 Config | vite.config.js |
BinaryTree_Visualizer/
├── public/
│ └── animations/ # Lottie animations (BST, AVL, Heap, etc.)
├── src/
│ ├── components/ # Core visual and logic components
│ ├── data/ # Quiz and algorithm data
│ ├── assets/ # Icons, SVGs
│ ├── styles.css # Global styles
│ └── App.jsx # Root component
├── index.html
├── vite.config.js
├── package.json
└── README.mdgit clone https://github.com/Orb-20/BinaryTree_Visualizer.gitnpm installnpm run dev🌐 Usually at → http://localhost:5173
- 🎥 Real-time Tree Animations
- 🌳 Visual operations: Insert, Delete, Traverse
- 🧩 Quiz Section for Learning Reinforcement
- 💡 Modern UI with smooth transitions
- 📚 Extendable codebase (add your own data structures easily!)
- 📈 Add Segment Tree and Fenwick Tree
- 🧠 AI-powered learning hints
- 🎨 Light/Dark Theme Toggle
- 📱 Responsive mobile support
🧑💻 Orb-20
Built with passion for open-source & computer science learning ❤️
