AVL Tree Car Front is the front-end component of the AVL Tree Car project. It provides an interactive single-page application where you can create a road, place obstacles at specific coordinates, and watch the AVL tree rebalance live — all rendered as an animated SVG using D3.js and synchronized with the Python backend over Socket.IO.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/tutosrive/avl_tree_car_front/llms.txt
Use this file to discover all available pages before exploring further.
Introduction
Learn what the project does, how it fits into the full stack, and what you need before running it.
Quickstart
Clone the repo, point it at your backend, and get the app running in minutes.
Configuration
Adjust the API and Socket.IO URLs in the JSON config file to match your environment.
Architecture
Understand the MVC module structure, data flow, and how the front end integrates with the backend.
What you can do
Create a Road
Set the road width and initialize the canvas before adding obstacles.
Load from JSON
Bulk-import obstacles from a structured JSON file and sync them to the backend in one step.
Add Obstacles
Place typed obstacles (cone, rock, tree, tire, and more) at precise X/Y coordinates.
Visualize Traversals
Trigger pre-order, in-order, and post-order traversals and watch nodes highlight in sequence.
How it works
Start the backend
Clone and run the AVL Tree Car backend on
http://localhost:4500. The front end cannot function without it.Open the front end in a Live Server
Serve
src/ with a Live Server (e.g. the VS Code extension). The app uses relative paths, so opening index.html directly via file:// will not work.Create a road or load a JSON config
Use Create Road to set the road width, or Load JSON to import a full obstacle set at once.
This project requires the ATC backend to be running before the front end is opened. See the Quickstart for step-by-step setup instructions.