Skip to content

README.md

Latest commit

 

History

History
145 lines (99 loc) · 3.59 KB

README.md

File metadata and controls

145 lines (99 loc) · 3.59 KB


🌲 Binary Tree Visualizer 🌿

🎓 Learn • Visualize • Master Data Structures

🚀 An immersive way to explore and understand Binary Trees, BST, AVL, Red-Black Trees, Heaps, and Tries through interactive animations.

🌑 Overview

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.

🌿 Supported Visualizations

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

⚙️ Tech Stack

Layer Tools
💻 Frontend React + Vite
🎨 Styling CSS + Framer Motion + Custom Animations
🧩 Visualization Lottie JSON + Particle.js
📦 Package Manager npm
🔧 Config vite.config.js

🗂️ Folder Structure

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.md

🚀 Getting Started

1️⃣ Clone the Repository

git clone https://github.com/Orb-20/BinaryTree_Visualizer.git

2️⃣ Install Dependencies

npm install

3️⃣ Run Development Server

npm run dev

4️⃣ Open in Browser

🌐 Usually at → http://localhost:5173

✨ Features

  • 🎥 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!)

🌱 Future Improvements

  • 📈 Add Segment Tree and Fenwick Tree
  • 🧠 AI-powered learning hints
  • 🎨 Light/Dark Theme Toggle
  • 📱 Responsive mobile support

💻 Developer

🧑‍💻 Orb-20

Built with passion for open-source & computer science learning ❤️