Skip to main content

Frontend Development

Application Pattern​

xTrakt web frontends run on two frameworks. Angular applications use standalone components, service-owned state, reactive forms, and scoped SCSS. Vue applications use single-file components with <script setup>, composables for shared state, and scoped CSS.

Before starting work, check which stack the target application uses — see Frontend Architecture for the inventory.

Required Conventions — Both Stacks​

  • Take design tokens from @cogneris-ai/design-tokens; take auth from @cogneris-ai/frontend-auth. Both are framework-agnostic.
  • Take components from @cogneris-ai/ui-angular or @cogneris-ai/ui-vue, matching the application's stack.
  • Write tests with Vitest.
  • Parse backend text/plain JSON responses with safeJsonParse<T>().
  • Prefer canonical theme tokens: --color-primary, --surface-page, --surface-card, --text-muted, --radius-md, --shadow-card.

Required Conventions — Angular​

  • Use standalone components, no NgModules.
  • Store shared state in BehaviorSubject values inside providedIn: 'root' services.
  • Use Reactive Forms with FormBuilder.
  • Keep translations in src/assets/i18n/<locale>.json, loaded by Transloco.

Required Conventions — Vue​

  • Use <script setup> single-file components.
  • Store shared state in composables under src/composables/use*.ts. Do not introduce Pinia.
  • Keep translations in src/locales/<locale>.json, loaded by vue-i18n.
  • Use axios for HTTP and vue-router for routing.

API Response Pattern​

Backends may return JSON bodies with Content-Type: text/plain. Frontends should request text and parse manually.

Angular:

this.http.post(url, body, { responseType: 'text' as 'json' });

Vue applications reach the same outcome through src/core/parsing/safeJsonParse.ts and normalizeApiResponse.ts.