The final deliverable: a showcase worthy of the product.
Deployment brings together the project deliverables on a dedicated interface: acoustic measurements via sound comparator, real-time 3D CAD inspection, and connected control demonstration.
The technical stack uses SvelteKit with TypeScript typing, a Node.js backend connected to PostgreSQL, team Git version control, and a CI/CD pipeline validated by an HTTP health check.
Learn more — click a sub-step
01Project setup & Git workflow
Development starts with the Git repository creation using a feature-branching workflow and systematic pull request reviews.
The project is initialized with SvelteKit, TypeScript, and the Vite bundler. Tooling includes strict type checking and automated svelte-check validations to catch errors at compile time.
02Data modeling & bilingual routing
Site content is centralized in strongly typed TypeScript data structures. This architecture ensures strict content parity between French and English versions without omission risk.
SvelteKit routing manages localized segments (/ and /en/) and passes data to components through load functions without layout code duplication.
03Design system & interface components
The visual identity is implemented in native CSS through design tokens: variables for color palettes, typographic hierarchies, and modular spacing.
Reusable UI components (navigation, buttons, modals, responsive grids) are assembled into page templates without relying on third-party CSS utility frameworks.
04Backend & database
The persistence layer is powered by a PostgreSQL relational database structured with indexes optimized for lookup and telemetry queries.
API endpoints are implemented in SvelteKit via server routes (+server.ts) with Node.js connection pooling to handle requests asynchronously and securely.
05Interactive components & media processing
The product page incorporates custom modules: a WebGL 3D viewer (Three.js) with orbital camera controls loading a Draco-compressed GLB CAD model, and an acoustic comparator based on the Web Audio API to switch between synchronized audio streams.
The media pipeline applies targeted compression: WebP image conversion and H.264 video encoding with poster frames to reduce bandwidth overhead.
06Testing, accessibility & rendering optimizations
The application adopts a hybrid rendering strategy in SvelteKit: static prerendering (SSG) for documentation pages and server-side rendering (SSR) for dynamic requests.
Accessibility conforms to WCAG standards: validated contrast ratios, full keyboard navigation, and prefers-reduced-motion media query support to disable animations according to user settings.
07Cloud infrastructure & CI/CD deployment
Hosting runs on a Linux virtual private server managed by Polytechnia, configured with an Nginx reverse proxy and auto-renewing Let's Encrypt TLS certificates.
The automated CI/CD pipeline validates every commit to the production branch: type checking, compilation, and build tests. Final deployment is gated by a blocking HTTP health check.