💻 Architecture Frontend CV-builder

Note

📺 Diagrammes SVG de ce document

frontend-couches.svg — architecture en couches (SPA)
frontend-composants.svg — hiérarchie des composants
frontend-flux-donnees.svg — flux de données (auto-save, chat IA, rendu live)

Documents liés : Cas d’utilisation · Diagramme de classes · Architecture backend

Track Technique 2TUP — Phase 1 : Choix d’architecture

Style d’architecture : Single Page Application Vue 3 intégrée au frontend ClaraJob (clarajob-front-gui). Le CV-builder expose 2 routes seulement : /cv-builder (authentifiée, vue racine CvWorkspaceView) et /cv/:token (publique, CvPublicView). La navigation interne se fait sans changement de route, par le paramètre de requête ?screen= (16 écrans), avec un état global centralisé dans un store Pinia unique (useCvBuilderStore).

Composant Technologie Rôle

Composant	Technologie	Rôle
Framework	Vue 3.5 (Composition API, `<script setup>`)	Composants UI, réactivité
Langage	TypeScript 5.9	Typage statique (`cv-builder.types.ts`)
État global	Pinia 3	Store unique `useCvBuilderStore` (cvData, template, persistance)
Routing	Vue Router 4	2 routes ; navigation interne par `?screen=` (16 écrans)
Client HTTP	axios	Client partagé (`baseURL` → `/api/v1`), JWT via intercepteur
UI	Tailwind CSS 3.4 (+ styles scoped)	Design system, mise en page
Éditeur riche	TipTap 3 (`@tiptap/vue-3`, starter-kit)	Édition de texte riche (`RichTextEditor`)
Utilitaires	`@vueuse/core` (`watchDebounced`), sortablejs, zod	Debounce auto-save/preview, drag & drop, validation des actions IA
Build	Vite 7	Bundling, HMR, lazy-loading des 57 layouts

Framework

Vue 3.5 (Composition API, <script setup>)

Composants UI, réactivité

Langage

TypeScript 5.9

Typage statique (cv-builder.types.ts)

État global

Pinia 3

Store unique useCvBuilderStore (cvData, template, persistance)

Routing

Vue Router 4

2 routes ; navigation interne par ?screen= (16 écrans)

Client HTTP

axios

Client partagé (baseURL → /api/v1), JWT via intercepteur

Tailwind CSS 3.4 (+ styles scoped)

Design system, mise en page

Éditeur riche

TipTap 3 (@tiptap/vue-3, starter-kit)

Édition de texte riche (RichTextEditor)

Utilitaires

@vueuse/core (watchDebounced), sortablejs, zod

Debounce auto-save/preview, drag & drop, validation des actions IA

Build

Vite 7

Bundling, HMR, lazy-loading des 57 layouts

Diagramme en couches

Lecture du diagramme :

Vue racine — CvWorkspaceView (route /cv-builder) sélectionne l’écran actif d’après ?screen= et porte l’auto-save (watchDebounced 2 s sur store.cvData) ; elle est habillée par CvAppShell + CvSidebarNav et monte en permanence CvPrintDocument (rendu d’impression).
Écrans — 16 écrans internes : init, list, templates, design, workspace, ai-coach, ats, adapt, interview, collab, share, versions, extras, admin, preview, public.
Composants d’édition/rendu — EditorSidebar, EditorFormContainer (9 formulaires de section), EditorPreviewPanel → CvLivePreview → CvMiniPreview qui charge paresseusement les 57 layouts (CvLayout*.vue) ; CvPagedPreview (pagination A4) et CvPrintDocument (export PDF).
Composables — useAiChat (singleton module-level : messages, undoStack, executeAction), useCvScoring (score calculé côté client), useCvTemplates (catalogue des templates), useCvVectorExport (window.print()), useCvPersistence (backend si authentifié, fallback localStorage).
Store Pinia unique — useCvBuilderStore : cvData, template/design sélectionné, currentCvId, savedCvs, lastSavedAt, actions autoSave(), loadExistingCv(), createNewCv().
Services API — 7 services réels : cvDocumentService, cvAiService, chatService, aiService, cvVersionService, cvShareService, variantService → backend REST /api/v1.

Important

Écrans maquettes et données en dur (état réel du code) :

collab, interview et extras sont des maquettes recouvertes par CvComingSoonOverlay (« coming soon ») — aucune API branchée.
L’écran ATS (CvAtsScreen) calcule un score réel via useCvScoring, mais les listes de mots-clés (« présents » / « manquants ») et les vérifications de format sont des données en dur.
Les KPI de l’écran de partage (CvShareScreen) sont des placeholders à zéro (« Aucune donnée encore ») — pas de statistiques backend.

Hiérarchie des composants

Règles de composition :

Un seul point d’entrée par route : CvWorkspaceView compose les 16 écrans ; CvPublicView (route /cv/:token) rend directement CvMiniPreview avec les données publiques.
Les écrans composent des composants métier ; CvMiniPreview est le composant de rendu partagé par tout le monde (éditeur, templates, aperçu, export, impression, vue publique).
Le chat Clara est découpé : AiCoachTab → ChatMessageBubble → ChatQuickActions / ChatActionPreview ; l’état du chat vit dans le composable singleton useAiChat, pas dans un composant.
Les 57 layouts sont des composants purs (props data, accentColor… → rendu HTML/CSS), chargés à la demande via defineAsyncComponent.

Flux de données

Trois flux structurent l’application :

Auto-save — saisie dans un formulaire → mutation directe de store.cvData → watchDebounced 2000 ms (CvWorkspaceView) → store.autoSave() → PUT /api/v1/cv-documents/{id} (ou POST à la création ; fallback localStorage hors authentification) → mise à jour de lastSavedAt.
Chat IA (Clara) — message utilisateur → POST /api/v1/ai/chat (message + cvData
historique) → la réponse contient des actions ; les actions informatives (suggestion, score, template) sont exécutées immédiatement, les actions modifiantes sont proposées en quick actions et attendent la validation de l’utilisateur → executeAction() valide l’action (zod), prend un snapshot d’annulation (undoStack), mute le store → l’auto-save standard persiste le résultat.
Rendu live — CvLivePreview observe store.cvData avec watchDebounced 300 ms et pousse une copie vers CvMiniPreview (layout sélectionné) ; l’export PDF passe par useCvVectorExport → window.print() sur CvPrintDocument (@media print), le PDF est produit par le navigateur — pas d’appel backend d’export.

Sync Gate 2 — Vérification track fonctionnel ↔ track technique

UC Chemin technique frontend Statut

UC	Chemin technique frontend	Statut
UC01 — Créer un CV de zéro	`CvInitScreen2` + `ScratchWizardModal` → `store.createNewCv()` → `POST /cv-documents`	✅ couvert
UC02 — Importer depuis le profil	`CvInitScreen2` → `cvDocumentService.importFromProfile()` → `POST /cv-documents/import-profile`	✅ couvert
UC03 — Importer un CV PDF	`CvInitScreen2` → `cvDocumentService.importCvFromPdf()` → `POST /cv-documents/import-pdf`	✅ couvert
UC04 — Générer un CV complet par IA	`ScratchWizardModal` → `cvAiService` → `POST /ai/generate-cv`	✅ couvert
UC05 — Lister / ouvrir / supprimer ses CV	`CvListScreen` → `useCvPersistence` → `GET /cv-documents/me`, `DELETE /cv-documents/{id}`	✅ couvert
UC06 — Éditer les sections	`CvWorkspaceScreen` → `EditorFormContainer` (9 formulaires) → `store.cvData`	✅ couvert
UC07 — Choisir un template	`CvTemplatesScreen` / `DesignTab` → `useCvTemplates` (57 layouts, catalogue local)	✅ couvert
UC08 — Personnaliser le design	`DesignTab` → `StyleControls` / `ColorCustomizer` → store (couleur, police, espacement)	✅ couvert
UC09 — Prévisualiser le CV	`CvPreviewScreen` / `EditorPreviewPanel` → `CvLivePreview` → `CvMiniPreview` / `CvPagedPreview`	✅ couvert
UC10 — Exporter en PDF	`useCvVectorExport` → `window.print()` → `CvPrintDocument` (impression navigateur)	✅ couvert
UC11 — Dialoguer avec Clara	`CvAiCoachScreen` → `useAiChat` → `POST /ai/chat` → validation → `executeAction()`	✅ couvert
UC12 — Reformuler un texte par IA	`RichTextEditor` → `aiService` → `POST /ai/reformulate`	✅ couvert
UC13 — Générer une section par IA	`RichTextEditor` → `cvAiService` → `POST /ai/generate-section`	✅ couvert
UC14 — Adapter le CV à une offre	`CvAdaptScreen` → `POST /cv/match` puis création de variante	✅ couvert
UC15 — Gérer les variantes	`CvVersionsScreen` / `VariantsTab` → `/cv-documents/{id}/variants` (CRUD)	✅ couvert
UC16 — Sauvegarde automatique	`CvWorkspaceView` `watchDebounced` 2 s → `store.autoSave()` → `PUT /cv-documents/{id}`	✅ couvert
UC17 — Gérer les versions	`CvVersionsScreen` / `VersionHistoryPanel` → `/cv-documents/{id}/versions` (+ restore)	✅ couvert
UC18 — Partager le CV (lien public)	`SharePanel` → `PUT /cv-documents/{id}/share` (activation, slug)	✅ couvert (KPI maquette)
UC19 — Consulter un CV partagé	route `/cv/:token` → `CvPublicView` → `GET /cv-documents/shared/{token}` (ou `/s/{slug}`)	✅ couvert

UC01 — Créer un CV de zéro

CvInitScreen2 + ScratchWizardModal → store.createNewCv() → POST /cv-documents

✅ couvert

UC02 — Importer depuis le profil

CvInitScreen2 → cvDocumentService.importFromProfile() → POST /cv-documents/import-profile

✅ couvert

UC03 — Importer un CV PDF

CvInitScreen2 → cvDocumentService.importCvFromPdf() → POST /cv-documents/import-pdf

✅ couvert

UC04 — Générer un CV complet par IA

ScratchWizardModal → cvAiService → POST /ai/generate-cv

✅ couvert

UC05 — Lister / ouvrir / supprimer ses CV

CvListScreen → useCvPersistence → GET /cv-documents/me, DELETE /cv-documents/{id}

✅ couvert

UC06 — Éditer les sections

CvWorkspaceScreen → EditorFormContainer (9 formulaires) → store.cvData

✅ couvert

UC07 — Choisir un template

CvTemplatesScreen / DesignTab → useCvTemplates (57 layouts, catalogue local)

✅ couvert

UC08 — Personnaliser le design

DesignTab → StyleControls / ColorCustomizer → store (couleur, police, espacement)

✅ couvert

UC09 — Prévisualiser le CV

CvPreviewScreen / EditorPreviewPanel → CvLivePreview → CvMiniPreview / CvPagedPreview

✅ couvert

UC10 — Exporter en PDF

useCvVectorExport → window.print() → CvPrintDocument (impression navigateur)

✅ couvert

UC11 — Dialoguer avec Clara

CvAiCoachScreen → useAiChat → POST /ai/chat → validation → executeAction()

✅ couvert

UC12 — Reformuler un texte par IA

RichTextEditor → aiService → POST /ai/reformulate

✅ couvert

UC13 — Générer une section par IA

RichTextEditor → cvAiService → POST /ai/generate-section

✅ couvert

UC14 — Adapter le CV à une offre

CvAdaptScreen → POST /cv/match puis création de variante

✅ couvert

UC15 — Gérer les variantes

CvVersionsScreen / VariantsTab → /cv-documents/{id}/variants (CRUD)

✅ couvert

UC16 — Sauvegarde automatique

CvWorkspaceView watchDebounced 2 s → store.autoSave() → PUT /cv-documents/{id}

✅ couvert

UC17 — Gérer les versions

CvVersionsScreen / VersionHistoryPanel → /cv-documents/{id}/versions (+ restore)

✅ couvert

UC18 — Partager le CV (lien public)

SharePanel → PUT /cv-documents/{id}/share (activation, slug)

✅ couvert (KPI maquette)

UC19 — Consulter un CV partagé

route /cv/:token → CvPublicView → GET /cv-documents/shared/{token} (ou /s/{slug})

✅ couvert

Verdict Sync Gate 2 : les 19 cas d’utilisation réels ont un chemin technique complet (écran → store/composable → service API → backend /api/v1). Les écrans collab, interview et extras sont hors périmètre fonctionnel (maquettes « coming soon ») ; le score ATS est calculé côté client (useCvScoring) et l’analyse de mots-clés ATS reste à brancher — design validé avec ces réserves explicites.