Frontend Architecture
xTrakt web frontends run on two frameworks. The platform-fe shell embeds product satellites in iframes, and each satellite is deployed independently on its own origin.
Application Inventory
| Application | Framework | Role |
|---|---|---|
platform-fe | Angular 22 | Shell, navigation, admin console |
workflow-fe | Angular 22 | Satellite |
id-fe | Angular 22 | Identity: login, signup, MFA, SAML |
sso-client-fe (projects/) | Angular 22 | SSO client |
vision-fe, portal-fe, ecm-fe, sign-fe, tickets-fe, template-fe | Vue 3.5 + Vite | Satellites |
status/web | Vue 3.5 + Vite | Public status page |
template-addin | Vue 3.5 + Vite | Office add-in |
sso-client-fe (vue-client/) | Vue 3.5 + Vite | SSO client |
The framework split is under review in ADR R-02 (architecture/adr-r-02-convergencia-frontend.md in this repository, outside the documentation site), which proposes Vue as the single target. Until that ADR is accepted, both stacks are supported and this page describes both.
Shared Across Both Stacks
These hold regardless of framework:
| Area | Convention |
|---|---|
| Design tokens | @cogneris-ai/design-tokens — CSS custom properties, framework-agnostic |
| Auth | @cogneris-ai/frontend-auth — framework-agnostic |
| Components | @cogneris-ai/ui-angular or @cogneris-ai/ui-vue, by stack |
| Tests | Vitest on both sides — no Karma, no Jest |
| API parsing | Backends may return JSON with Content-Type: text/plain; parse with safeJsonParse<T>() |
| Composition | Satellites are embedded in iframes by the shell, not by module federation |
Canonical theme tokens include --color-primary, --surface-page, --surface-card, --text-muted, --radius-md, and --shadow-card. Legacy aliases remain compatibility-only.
Angular Conventions
| Area | Convention |
|---|---|
| Components | Standalone components, no NgModules |
| State | BehaviorSubject in providedIn: 'root' services |
| Forms | Reactive Forms with FormBuilder |
| i18n | Transloco, files in src/assets/i18n/<locale>.json |
| Styling | Component-scoped SCSS with global tokens in styles.scss |
| TypeScript | 6.0 |
Vue Conventions
| Area | Convention |
|---|---|
| Components | Single-file components, <script setup> |
| State | Composables (src/composables/use*.ts) — no Pinia |
| Router | vue-router |
| i18n | vue-i18n, files in src/locales/<locale>.json |
| HTTP | axios |
| Styling | Scoped CSS with global tokens |
| TypeScript | 5.9 |
Locales
Both stacks ship the same 15 locales: ar, bn, de, en, es, fr, hi, it, ja, ko, pl, pt-BR / pt, ru, uk, zh.
The Portuguese locale key differs by stack — Angular apps use pt-BR, Vue apps use pt. Check the target app before adding or referencing a translation key.