🌳 Data Structure Playground

Visualize, build, and master complex data structures through interactive animations and hands-on experiments.

🚀 Live Demo

Visit the Playground

✨ Key Features (AVL Tree)

• Interactive Visualization: Watch trees grow and balance in real-time with smooth Framer Motion animations.
• Gesture Control (Drag-to-Rotate): Instead of just clicking buttons, manually pull nodes to perform Left/Right rotations to gain physical intuition of tree balancing.
• Algorithm Timeline: A full playback engine that lets you pause, step forward/backward, and scrub through every comparison and rotation.
• Course Mode: An interactive tutorial that guides beginners through LL, RR, LR, and RL cases with automatic scenario generation and advanced rebalancing heuristics for accurate guidance.
• Knowledge Base (Wiki): Integrated documentation explaining Balance Factors (BF), complexity, and rotation strategies.
• Pro Layout: An IDE-like experience with a collapsible sidebar and zoomable/draggable canvas.
• Multi-language Support: Full support for Traditional Chinese (繁體中文) and English.

🛠️ Tech Stack

• Framework: React 19 + Vite
• Language: TypeScript
• Styling: Tailwind CSS v4
• Animation: Framer Motion
• Interactions: react-zoom-pan-pinch
• I18n: i18next

📥 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm

Installation

1. Clone the repository:

   git clone https://github.com/moon-jam/Data-Structure-Playground.git

2. Navigate to the app directory:

   cd Data-Structure-Playground/app

3. Install dependencies:

   npm install

4. Start the development server:

   npm run dev

🗺️ Roadmap

• AVL Tree (Completed)
• Bloom Filter
• Min-Max Heap
• B-Tree / B+ Tree
• Red-Black Tree
• Trie / Patricia Trie

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.