BST Explorer

An interactive visualizer for exploring Binary Search Trees, powered by Flask and Cytoscape.js. 🌳

---

🚀 Overview

Welcome to BST Explorer! This is a full-stack web application designed to help users visualize the structure and traversal algorithms of a Binary Search Tree (BST). The backend, powered by Python and Flask, handles all the tree logic, while the frontend uses Cytoscape.js to render a beautiful and interactive graph.

I built this project to create a hands-on educational tool for a fundamental data structure. By separating the logic (backend) from the presentation (frontend), it demonstrates a more robust application architecture. Whether you're studying for a data structures exam or just curious about how BSTs work, I hope this tool makes the concepts clearer and more engaging.

---

✨ Features

Here are some of the cool things this project can do:

• Interactive BST Visualization: See a Binary Search Tree built from your input, rendered beautifully with Cytoscape.js.
• Custom Tree Generation: Input your own list of numbers to create a custom BST.
• Random Tree Generation: Instantly generate a tree with random numbers for quick exploration.
• Real-time Traversal Results: After building a tree, see the Pre-order, In-order, and Post-order traversal sequences calculated by the backend.
• Flask-Powered Backend: All tree construction and traversal logic is handled efficiently by a robust Flask server.
• Dynamic Light/Dark Theme: A sleek theme toggle that adapts to your preference.
• Responsive Design: A clean and modern interface that works seamlessly on any device.

---

🛠️ Installation & Setup

Getting this full-stack project running on your local machine involves setting up the Python backend and serving the frontend.

1. Clone the repository

   git clone [https://github.com/cikeyz/bst-explorer.git](https://github.com/cikeyz/bst-explorer.git)
   cd bst-explorer

2. Set up the Python Backend

   • It's highly recommended to use a virtual environment.

     # Create a virtual environment
     python -m venv venv
     
     # Activate it (on Windows)
     venv\Scripts\activate
     
     # Activate it (on macOS/Linux)
     source venv/bin/activate

   • Install the required Python packages:

     pip install -r requirements.txt

3. Run the Application

   • Start the Flask server:

     python app.py

   • The server will start, typically on http://127.0.0.1:5000.

4. View in Browser

   • Open your web browser and navigate to http://127.0.0.1:5000.

The application should now be running locally!

---

💡 Usage Examples

Using the visualizer is simple and interactive:

• To Build a Custom Tree: Enter a space-separated list of integers into the input box and click the "Build BST" button.
• To Generate a Random Tree: Click the "Generate Random" button to create a new tree with 30 random numbers.
• To View Traversals: After a tree is built, the Pre-order, In-order, and Post-order traversal results will automatically appear in the results panel.
• To Change the Theme: Use the theme toggle button to switch between light and dark modes.

---

💻 Tech Stack / Dependencies

This project was built with a few key technologies to create a full-stack experience.

• Backend:
  • Language: Python
  • Framework: Flask
  • Server: Gunicorn (for production)
• Frontend:
  • Structure: HTML5, CSS3
  • Logic: JavaScript (ES6+)
  • Visualization: Cytoscape.js with the Dagre.js layout extension.
• Deployment: Configured for Vercel.

---

🙌 Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
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

Found a bug? Don't worry, we all create them. Just open an issue and I'll take a look!

---

📜 License

This project is distributed under the MIT License. See the LICENSE file for more information. It's pretty permissive, so you can do almost anything you want with it.

---

📬 Contact

Carl Kristian (CK) Ortiz

• GitHub: @cikeyz
• LinkedIn: ck-ortiz
• Email: carlkristianrortiz@iskolarngbayan.pup.edu.ph

_Crafted with ☕ and a bit of chaos._