# System Technology Stack

This document explains the basic building blocks used to create the **Weststar Anti-Gravity** application.

## 1. The Core Language: **JavaScript (JS)**
*   **What it is:** The programming language that runs in the web browser.
*   **Role:** It handles all the logic (e.g., "When I click this button, navigate to that page" or "Calculate the remaining hours for this engine").
*   **File Extension:** `.js` or `.jsx`

## 2. The Framework: **React**
*   **What it is:** A library for building User Interfaces (UI).
*   **Role:** Instead of writing one huge HTML file, React lets us break the app into small, reusable **Components** (like Lego bricks).
    *   *Example:* `Sidebar.jsx`, `AircraftDetails.jsx`, `Button.jsx`.
*   **JSX:** A syntax that lets us write HTML-like code inside JavaScript files.

## 3. The Styling: **CSS (Cascading Style Sheets)**
*   **What it is:** The visual design language.
*   **Role:** Determines colors, fonts, spacing, and layout.
*   **Variables:** We use "CSS Variables" (e.g., `--bg-primary`) to easily switch between Light Mode and Dark Mode.

## 4. The Build Tool: **Vite**
*   **What it is:** A blazing fast build tool.
*   **Role:** It bundles all your code (JS, CSS, Images) and serves them to the browser. It runs the "Development Server" that lets you see changes instantly.

## 5. The Structure (Single Page Application - SPA)
*   **Concept:** Unlike traditional websites that reload the page every time you click a link, this app loads **once**.
*   **Routing:** When you click a sidebar item, JavaScript swaps the content of the main view instantly without refreshing the page. This feels fast and app-like.

## Summary Table

| Layer | Technology | Purpose |
| :--- | :--- | :--- |
| **Logic** | JavaScript (ES6+) | Programming the behavior. |
| **UI** | React | Building the interface blocks. |
| **Markup** | JSX | Writing HTML inside JS. |
| **Style** | CSS3 | Making it look good. |
| **Tooling** | Vite + Node.js | Running the system. |
