Skip to main content

Frontend Development

Application Pattern​

xTrakt frontend applications use Angular standalone components, service-owned state, reactive forms, and scoped SCSS.

Required Conventions​

  • 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/{en,pt-BR}.json.
  • 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.

API Response Pattern​

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

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