# MaskanX Frontend

Independent React, TypeScript, and Vite frontend for MaskanX.

## Service Contract

- Default development URL: `http://127.0.0.1:5173`
- Backend API: configured with `VITE_MASKANX_API_URL`
- Local proxy target: configured with `VITE_MASKANX_PROXY_TARGET`
- Database access: none; this service never receives PostgreSQL credentials

## Local Setup

```powershell
npm install
Copy-Item .env.local.example .env.local
npm run local
```

Start `maskanx-backend` on port `8088` before using the full UI.

## Campaigns page

The Campaigns page needs `VITE_META_AD_ACCOUNT_ID` set to the Meta ad account
id (`act_<digits>`) in your `.env.*` file.

If it is unset the page still loads and lists campaigns, but four things are
silently unavailable: the ad-account billing panel, the warning shown when no
payment method is attached, ad preview in the wizard, and the account-minimum
budget check (the backend cannot look up `min_daily_budget` without an
account, so it skips that validation and logs a warning).

Ad preview also requires `META_ADS_ACCESS_TOKEN` to be configured on the
backend, in Settings > Environments.

## Commands

| Command | Purpose |
| --- | --- |
| `npm run start` | Preview the production build on port 5173 |
| `npm run build` | Type-check and build `dist/` |
| `npm run local` | Local Vite server using `.env.local` |
| `npm run dev` | Development server using `.env.development` |
| `npm run test` | Test-mode type-check and production build |
| `npm run lint` | ESLint checks |
| `npm run prod` | Production-mode preview |

Database migration and seed commands intentionally live in
`maskanx-backend`. A frontend must never own database credentials.

## Production

Build the container with the browser-visible backend URL:

```powershell
docker build `
  --build-arg VITE_MASKANX_API_URL=https://api.example.com `
  -t maskanx-frontend .
```

The backend must allow the deployed frontend origin through
`MASKANX_CORS_ORIGINS`.