> ## Documentation Index
> Fetch the complete documentation index at: https://isp.misidev.space/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick start

> Install, configure, and run the ICP System frontend in under five minutes.

Follow these steps to get the ICP System frontend running locally and log in for the first time.

<Note>
  ICP System requires a compatible REST API backend. The frontend proxies all `/api` requests to the backend host you configure in your `.env` file. Make sure your backend is running and reachable before starting the dev server.
</Note>

<Steps>
  <Step title="Prerequisites">
    Before you begin, make sure you have the following installed and available:

    * **Node.js** v18 or later (v20+ recommended)
    * **npm** v9 or later (bundled with Node.js)
    * Access to a running ICP System backend API — see [Backend API](/deployment/backend-api) for setup instructions

    Verify your Node.js version:

    ```bash theme={null}
    node --version
    ```
  </Step>

  <Step title="Clone the repository and install dependencies">
    Clone the repository and install the project's npm dependencies from inside the `red-dashboard/` directory.

    ```bash theme={null}
    git clone https://github.com/DjAlvaroCuba/ISP-Capacity-FRONT.git
    cd ISP-Capacity-FRONT/red-dashboard
    npm install
    ```

    npm will install all runtime and development dependencies declared in `package.json`, including React 19, Material UI v7, TanStack Query, Recharts, and Vite.
  </Step>

  <Step title="Configure the environment">
    Create a `.env` file at the root of the `red-dashboard/` directory (next to `package.json`) and set `VITE_API_BASE_URL` to point at your backend API:

    ```bash theme={null}
    VITE_API_BASE_URL=http://127.0.0.1:8000/api
    ```

    Vite's dev server is pre-configured to proxy all requests that start with `/api` to `http://127.0.0.1:8000`, so the frontend never makes cross-origin requests during local development. If your backend runs on a different host or port, update both `VITE_API_BASE_URL` and the proxy `target` in `vite.config.ts` to match.

    <Tip>
      For production deployments, set `VITE_API_BASE_URL` to your backend's public URL and remove or adjust the Vite proxy configuration. See [Configuration](/deployment/configuration) for details.
    </Tip>
  </Step>

  <Step title="Start the development server">
    Run the dev server with:

    ```bash theme={null}
    npm run dev
    ```

    Vite will compile the project and open a local server, typically at `http://localhost:5173`. The terminal output will show the exact URL.

    Other available scripts:

    ```bash theme={null}
    # Build a production bundle
    npm run build

    # Preview the production build locally
    npm run preview

    # Run ESLint
    npm run lint
    ```
  </Step>

  <Step title="Log in">
    Open your browser and navigate to:

    ```
    http://localhost:5173/login
    ```

    Enter your **username** and **password**, then click **Entrar**. On success, the server returns a JWT access token that is saved to `localStorage` under the key `access_token`. You are then redirected to the home page.

    If you enter incorrect credentials, the login page displays: *"Credenciales inválidas. Verifica tu usuario y contraseña."*

    <Info>
      User accounts and passwords are managed through the backend API. Ask your administrator if you do not have credentials yet. See [Users & roles](/admin/users-roles) for how accounts are created.
    </Info>
  </Step>

  <Step title="Explore the Capacity & Risks dashboard">
    After logging in, you land on the **Capacity & Risks** dashboard — the home page of ICP System. From here you can:

    * Review KPI cards showing total contracted, assigned, and available bandwidth
    * Inspect risk distribution across your connections
    * Navigate to **Providers**, **Nodes**, **Connections**, **Clients**, **Equipment**, or **Zabbix** monitoring using the sidebar
  </Step>
</Steps>