Skip to main content

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.

AVL Tree Car Front is a zero-build SPA — there are no dependencies to install and no compilation step. Getting it running is a matter of cloning the repo, making sure the backend is up, and opening src/index.html through an HTTP server. The steps below walk you through the whole process.
The app must be served over HTTP using a Live Server (or equivalent). Opening src/index.html directly in the browser via file:// will not work because the application loads HTML partials, CSS, and JavaScript assets using relative paths that require an HTTP context to resolve correctly.
1

Start the ATC backend

AVL Tree Car Front has no logic of its own for managing the tree — all insertions, deletions, rebalancing, and traversal data are handled by the Python backend. The backend must be running and reachable before you open the front end.Follow the setup instructions in the ATC backend repository and confirm the server is listening on http://localhost:4500 (the default). The front end will fail silently if the backend is unreachable at startup.
2

Clone the repository

Clone the front-end repository to your local machine:
git clone https://github.com/tutosrive/avl_tree_car_front.git
Then navigate into the cloned folder:
cd avl_tree_car_front
No package manager or install command is needed — all vendor libraries (Bootstrap, Socket.IO client, D3.js) are already committed inside src/app/utils/.
3

(Optional) Configure the backend URL

If your backend runs on a host or port other than the default http://127.0.0.1:4500, open the configuration file and update both URL values before proceeding:
src/app/assets/json/configs.json

{
    "urlAPI": "http://127.0.0.1:4500",
    "urlSOCKET": "http://localhost:4500"
}
  • Set urlAPI to the base URL your backend exposes for REST endpoints.
  • Set urlSOCKET to the URL the Socket.IO server is listening on.
If both the front end and backend are running locally on port 4500, no change is needed. See the Configuration page for full details.
4

Open src/index.html with a Live Server

Use any HTTP-based live-reload server to open the entry point. The most common option is the Live Server extension for VS Code:
  1. Install the Live Server extension in VS Code.
  2. Open the cloned avl_tree_car_front folder in VS Code.
  3. Right-click src/index.html in the Explorer panel and choose Open with Live Server.
Your browser will open a tab pointing to something like http://127.0.0.1:5500/src/index.html. The app loads its HTML, CSS, and JS assets over HTTP, connects to the Socket.IO backend, and fetches the obstacle type definitions from the REST API — all automatically on page load.
Any other local HTTP server works equally well. For example, Python’s built-in server (python -m http.server 5500 run from the src/ directory) or the serve CLI tool are both valid alternatives to the VS Code extension.
5

Start using the app

Once the page loads, you will see the AVL Tree Car Game interface with a dark Bootstrap Vapor theme. Two primary actions are available from the start:
  • Create Road — initializes a fresh road on the backend and unlocks the Add Obstacles button so you can start inserting tree nodes one at a time.
  • Load JSON — loads a full set of obstacles from a JSON configuration, replacing any existing road data on the backend.
After populating the tree, use Watch Roads to visualize the AVL tree and step through pre-order, in-order, and post-order traversals. Individual nodes can be deleted directly from that view.
Every time the page is reloaded, the front-end state resets completely to zero — the application always starts fresh in the browser. However, the Python backend retains its tree history across reloads. To handle this, HomeController.init() automatically emits a reset_avl event to the backend on every page load, resetting the server-side AVL tree so both sides start from a clean state.

Build docs developers (and LLMs) love

Get started for freeTalk to us