Le dernier livrable : une vitrine à la hauteur du produit.
La mise en ligne regroupe les livrables du projet sur une interface dédiée : restitution des mesures acoustiques via comparateur sonore, manipulation du modèle CAO en 3D temps réel et présentation du pilotage connecté.
L'infrastructure technique mobilise SvelteKit avec typage TypeScript, un backend Node.js connecté à PostgreSQL, une gestion de version Git en équipe et un pipeline CI/CD validé par contrôle de santé HTTP.
En savoir plus — cliquez une sous-étape
01Initialisation du projet & organisation Git
Le développement débute par la création du dépôt Git avec une stratégie de branches par fonctionnalité (feature branching) et des revues de code systématiques par pull request.
Le projet est initialisé avec SvelteKit, TypeScript et le bundler Vite. L'outillage de contrôle de code inclut un typage strict et des vérifications automatisées via svelte-check pour prévenir les erreurs dès la compilation.
02Modélisation des données & routage bilingue
Les contenus du site sont centralisés dans des structures de données TypeScript fortement typées. Cette architecture garantit la parité exacte des données entre les versions française et anglaise sans risque d'omission.
Le routage SvelteKit gère les segments linguistiques (/ et /en/) et transmet les données aux composants via les fonctions de chargement (load functions) sans duplication de code d'affichage.
03Design system & composants d'interface
La charte graphique est implémentée en CSS natif via un ensemble de tokens : variables pour la palette de couleurs, la hiérarchie typographique et les espacements modulaires.
Les composants d'interface réutilisables (navigation, boutons, modales, grilles responsives) sont assemblés pour composer les gabarits de pages sans dépendre de bibliothèques CSS tierces.
04Backend & base de données
La couche de persistance repose sur une base de données relationnelle PostgreSQL, structurée avec des index adaptés aux requêtes de consultation et de télémétrie.
Les points d'entrée API sont implémentés dans SvelteKit via des routes serveur (+server.ts) avec gestion d'un pool de connexions Node.js pour traiter les requêtes de manière asynchrone et sécurisée.
05Composants interactifs & traitement des médias
La page produit intègre des modules sur mesure : une visionneuse 3D WebGL (Three.js) avec manipulation orbitale du modèle CAO au format GLB compressé Draco, et un comparateur acoustique fondé sur la Web Audio API pour commuter des flux sonores synchronisés.
Le pipeline média applique des compressions adaptées : conversion des images en WebP et encodage des vidéos en H.264 avec images d'affiche (posters) pour limiter la consommation de bande passante.
06Tests, accessibilité & optimisation de rendu
Le site applique une stratégie de rendu hybride dans SvelteKit : prérendu statique (SSG) pour les pages documentaires et rendu serveur (SSR) pour les données dynamiques.
L'accessibilité respecte les critères WCAG : ratios de contraste validés, navigation complète au clavier et gestion de la directive prefers-reduced-motion pour désactiver les animations selon les préférences de l'utilisateur.
07Infrastructure cloud & déploiement CI/CD
L'hébergement s'appuie sur un serveur privé virtuel sous Linux administré par Polytechnia, avec reverse-proxy Nginx et certificats TLS Let's Encrypt renouvelés automatiquement.
Le pipeline CI/CD automatisé valide chaque commit sur la branche de production : vérification des types, compilation et tests de build. La mise en ligne finale est conditionnée par un contrôle de santé HTTP (health check) bloquant.