> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/CKoldo/Vacaciones-front/llms.txt
> Use this file to discover all available pages before exploring further.

# Quick Start

> Get the Módulo de Registro de Vacaciones running locally in a few minutes.

Before you start, make sure you have **Node.js 18+** and **npm** installed. The front end connects to a REST API backend — the backend must be running before the front end will work.

<Steps>
  <Step title="Install dependencies">
    Clone the repository and install the project dependencies.

    ```bash theme={null}
    git clone https://github.com/CKoldo/Vacaciones-front.git
    cd Vacaciones-front
    npm install
    ```
  </Step>

  <Step title="Configure the environment">
    Create a `.env` file at the project root and set the URL of your backend API.

    ```bash theme={null}
    VITE_API_URL=http://localhost:5175
    ```

    If you omit this variable, the app falls back to `http://localhost:5175` by default.

    <Note>
      The dev server proxies all `/api` requests to the address in `VITE_API_URL`, so you never need to hard-code the backend URL inside the app. This is configured in `vite.config.ts` under `server.proxy`.
    </Note>
  </Step>

  <Step title="Start the backend">
    The front end makes API calls on every page load. Start your backend server and confirm it is accepting requests at the address you set in `VITE_API_URL` before continuing.
  </Step>

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

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

    The app is available at `http://localhost:5173`. Open it in your browser and you should see the login screen.

    <Tip>
      The dev server starts on port **5173** with `strictPort: true`, so that exact port must be free on your machine.
    </Tip>
  </Step>

  <Step title="Log in">
    On the login screen, enter the username and password for your account and click **Iniciar Sesión**.

    * If your credentials are correct, you are redirected to the home dashboard (`/home`).
    * If login fails, an error message appears beneath the password field. Check that the backend is reachable and that your credentials are correct.

    See [Authentication](/authentication) for a full explanation of roles and session management.
  </Step>

  <Step title="Register your first employee">
    Once logged in, navigate to **Registro de Personal** from the sidebar. Fill in the employee's name, surname, hire date, email, and position, then save the record.

    The hire date is used to calculate when the employee's first vacation period begins (one year after joining). All subsequent vacation scheduling flows from this record.

    <Info>
      Only users with the **admin** role can create and modify employee records. If you do not see the option, contact your system administrator.
    </Info>
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Authentication" icon="lock" href="/authentication">
    Understand JWT login, roles, and session expiry.
  </Card>

  <Card title="Personal registry" icon="user-plus" href="/modules/personal-registry">
    Manage employee master data and hire dates.
  </Card>

  <Card title="Vacation scheduling" icon="calendar-plus" href="/modules/vacation-scheduling">
    Create flexible and block vacation ranges.
  </Card>

  <Card title="Environment variables" icon="sliders" href="/deployment/environment-variables">
    Full reference for all configuration variables.
  </Card>
</CardGroup>