Skip to content

Frontend Overview

A Vue 3 + Quasar Single Page Application served from frontend/. This page is the landing point: jump to the detail page that matches your task.

  • Component tree — pages, layouts, atomic design primitives, stores, routing.
  • Persona flows — state diagrams for the data-entry user and the back-office user.
  • Design tokens — SCSS tokens and theming.

Quick Start

cd frontend
npm install
cp .env.example .env       # set VITE_API_BASE_URL
npm run dev                # http://localhost:9000
npm run build              # output in dist/spa/

VITE_ is the only prefix Vite exposes to the client. Quasar config lives in quasar.config.js (build targets, plugins, dev-server proxy).

Project Layout

frontend/src/
  api/         ky http client + endpoint constants
  boot/        Quasar boot files (i18n, plugins)
  components/  atoms / molecules / organisms / audit / charts / layout
  layouts/     MainLayout.vue
  pages/       app/, back-office/, system/  (one route = one page)
  router/      routes.ts, guards/
  stores/      Pinia stores (auth, modules, workspace, factors, …)
  i18n/        en, fr locale files
  css/         tokens and Quasar theme overrides

Testing

Playwright covers both component and end-to-end suites; there is no Vitest unit suite. Storybook interaction tests catch visual regressions.

npm run test-ct            # Playwright component tests
npm run test:e2e           # Playwright integration tests
npm run storybook:test     # Storybook test-runner
npm run lint               # ESLint

CI runs test-ct and test:e2e (see .github/workflows/test.yml). The Storybook test-runner is not yet wired into CI; run npm run storybook:test locally to exercise it.

Authorization

useAuthStore holds the user, roles, and permissions; guards in router/guards/ gate routes from there.

Further Reading