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

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:

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.