Basalt Beholder - Outil d’audit industrialisé

Chez Siliceum, un audit technique prenait plus de 10 jours et la qualité variait selon qui le menait. Le vrai problème : chaque auditeur improvisait ses questions, rédigeait son rapport à la main. J ai construit une PWA local-first pour que les audits soient reproductibles, rapides et exploitables.

IV - Persistant 3 jours 2026-01-13 2026-03-14
XP
85%

Le problème

Chez Siliceum, un audit technique c’était facilement dix jours pour deux volets. Dix jours à poser des questions qu’on réinventait à chaque mission, à prendre des notes dans un tableur, à bricoler un rapport PDF à la main en fin de semaine. Le résultat dépendait de qui tenait le stylo. Deux auditeurs sur le même périmètre produisaient deux rapports incomparables, pas par manque de compétence, mais parce qu’il n’y avait rien pour structurer le travail. J’ai voulu qu’un auditeur puisse arriver en mission, ouvrir l’app, et se concentrer sur l’écoute plutôt que sur la logistique.

L’approche : local-first, zéro backend

L’architecture est radicale : une PWA sans backend. Tout vit dans IndexedDB et le système de fichiers local via la File System Access API. Les bases de connaissances sont écrites en YAML, les rapports PDF sont générés côté client en réutilisant directement les composants Vue.

Ce qui rend cette approche pertinente, c’est le terrain. Les auditeurs travaillent chez le client, parfois sans Wi-Fi fiable, parfois dans des salles sans prise réseau. L’outil doit fonctionner hors-ligne du premier au dernier jour de mission. Zéro serveur à maintenir, zéro donnée client qui transite sur le réseau. C’est une contrainte métier avant d’être un choix technique.

Stack

CoucheChoixPourquoi
FrameworkNuxt 4 + Vue 3, TypeScript strictPWA offline-first avec rendu côté client
UIshadcn-nuxt (reka-ui) + TailwindCSS + LucideComposants accessibles, thémables sans effort
StatePinia (setup syntax)Store réactif, naturel avec la Composition API
StockageIndexedDB (idb) + File System Access APITout reste en local, rien ne quitte la machine
ValidationZod (schemas + inférence de types)Un seul endroit pour valider et typer
PDFhtml2pdf.js (composants Vue réutilisés)Les mêmes composants à l’écran et dans le rapport
PWA@vite-pwa/nuxt (offline-first, installable)Fonctionne sans réseau après le premier chargement
TestsVitest + Playwright + Vue Test UtilsCouverture unitaire, composants et E2E

Comment ça marche

L’auditeur ouvre l’application, choisit un questionnaire et une entreprise cible, et commence. Les questions sont structurées par volets et par thèmes, chacune associée à un niveau de maturité CMMI de 0 à 4. Il répond, commente, attache des pièces jointes en collant avec Ctrl+V. Quand il cherche une question précise parmi les 500+, il tape Ctrl+K et la command palette filtre en temps réel.

À la fin du volet, il génère le rapport. Le PDF sort avec des radar charts par thème, la distribution des niveaux de maturité, les badges, les sections rédactionnelles. C’est le même rendu que ce qu’il voit à l’écran, parce que les composants Vue servent aux deux. Vingt secondes et le rapport est prêt, là où il fallait une demi-journée de mise en forme.

Côté admin, l’éditeur permet de créer et maintenir les bases de connaissances avec preview Markdown, références CMMI et auto-save. Les questions sont réordonnables par drag-drop, masquables, regroupables. L’outil s’adapte à l’auditeur, pas l’inverse. Le projet a été développé avec Claude Code, orchestré par une méthodologie agile maison qui structurait la collaboration humain-IA comme un vrai sprint d’équipe.

Le rythme

Le projet est né un 13 janvier à minuit pile. Cinq commits le premier jour pour poser les fondations : upload de pièces jointes, navigation au clavier, icônes Lucide. Le lendemain, rien. Jour off complet, zéro commit.

Et puis le 15 janvier, tout a explosé. Trente commits en une journée, 57% du travail total du projet. Session matinale de 9h à midi : PWA complète, versioning des questionnaires, PDF avec radar charts, éditeur admin Markdown, drag-drop des questions. Pause déjeuner. Reprise l’après-midi pour refondre l’UX d’exécution des audits et l’éditeur de base de connaissances. Le 16, seize commits de polish : command palette, navigation mobile, accessibilité, corrections de contraste. Deux mois plus tard, deux derniers commits pour le déploiement Docker.

53 commits en trois jours actifs. Un outil métier complet, déployé sur l’infra Cloud self-hosted. L’ensemble a été orchestré via Summoner, qui pilotait les sessions Claude Code en parallèle. Dans la même veine d’outillage qualité, QA Panel attaque le problème côté navigateur avec une extension DevTools pour structurer les rapports de bugs. La génération de rapports PDF côté client rejoint les problématiques de PDF Manager, qui manipule aussi des PDF entièrement dans le navigateur.

Stats

Jours actifs3 (13, 15, 16 jan)
Composables21
Composants35+
Date13-16 janvier 2026

Stack technique

Nuxt 4

Framework PWA

Fonctionner hors-ligne chez le client, sans Wi-Fi

IndexedDB

Stockage local

Aucune donnée d'audit ne quitte la machine

shadcn-nuxt

Composants UI

Interface accessible et thémable rapidement

Page accueil

Page accueil

Liste des audits

Liste des audits

Administration

Administration

Base de connaissances

Base de connaissances

Gestion entreprises

Gestion entreprises

Page accueilListe des auditsAdministrationBase de connaissancesGestion entreprises
‘UX et accessibilité’+16 commits

‘Dernière passe sur l expérience utilisateur. Command palette Ctrl+K pour naviguer dans les 500+ questions sans scroller. Navigation mobile, welcome modal pour l onboarding des auditeurs, tooltips accessibles, corrections de contraste.’

  • Command palette (Ctrl+K) pour chercher dans 500+ questions
  • Navigation mobile + welcome modal + tooltips
  • Accessibilité : corrections de contraste
  • Composants UX finaux, formulaires, a11y
‘Le coeur fonctionnel’+30 commits

‘La journée où le projet prend forme. PWA offline-first, versioning des questionnaires pour pouvoir les faire évoluer sans casser les audits en cours, génération PDF avec radar charts par volet, réordonnancement des questions par drag-drop, éditeur admin markdown, pages CMMI. L après-midi, refonte de l UX d exécution des audits pour que le workflow colle à la réalité du terrain.’

  • PWA complète : manifest, service worker, offline-first (6 commits)
  • Version management des questionnaires
  • PDF enrichi : radar charts par volet, distribution des niveaux CMMI
  • Réordonnancement et masquage de questions par drag-drop
  • Admin : éditeur markdown, refs CMMI, pages de maturité
  • Refonte UX exécution audits + éditeur base de connaissances (16h05)
  • Suppression dépendance sharp
Fondations+5 commits

Init du projet, upload de pièces jointes avec Ctrl+V paste pour que les auditeurs puissent annexer des preuves rapidement. Navigation par flèches, iconographie Lucide. Les fondations sont posées.

  • Init du projet (00h00)
  • Upload pièces jointes (Ctrl+V paste, navigation flèches)
  • Remplacement emojis → Lucide icons
  • Nouveau logo Lucide Stone