Site vitrine L'Atelier de Dame Destria
La vitrine d'un sellier-harnacheur qui travaille le cuir et la paracorde sur mesure pour le cheval et le chien : savoir-faire, catalogue filtrable et prise de contact directe, sur une seule page. Rendue en Server Components, avec un îlot client réduit aux filtres du catalogue.
- Année
- 2026
- Rôle
- Conception et développement du site, structure du contenu éditorial et des visuels, catalogue filtrable, tests d'intégration et livraison conteneurisée.
- Stack
- Next.js 16, React 19, TypeScript, Tailwind CSS v4, Vitest, Docker
- Site en ligne
- damedestria.fr (nouvelle fenêtre)
L'Atelier de Dame Destria fabrique à la main des selles, des licols, des colliers, des laisses multipositions et des ensembles assortis, en cuir et en paracorde, pour le cheval et pour le chien. Le besoin n'était pas une boutique en ligne : chaque pièce est unique et son prix dépend du cuir, des finitions et des broderies, si bien qu'un panier n'aurait rien pu afficher de juste. Le site montre le travail, annonce des tarifs de départ et conduit à un échange — Instagram, e-mail ou téléphone, sans formulaire à remplir ni compte à créer.
Tout tient sur une page unique en Next.js 16 et React 19, découpée en cinq sections reliées par ancres : accueil, savoir-faire, collections, tarifs, contact. Le rendu est en Server Components par défaut ; deux composants seulement passent côté client, le menu de navigation mobile et la galerie de collections, parce qu'ils portent un état d'interface. Le reste du site — texte, images, tarifs — n'envoie pas une ligne de JavaScript au navigateur.
La galerie est le cœur de la page : seize pièces, un sélecteur d'espèce cheval ou chien qui change le jeu de catégories proposé (selles et licols d'un côté, colliers, ensembles et laisses de l'autre), et une bascule « Disponibles uniquement » qui masque les pièces déjà vendues. Toute combinaison de filtres peut ne rien retourner, donc l'état vide est traité explicitement plutôt que laissé à une grille blanche. Le catalogue, les tarifs et la copie vivent dans des modules de contenu typés, et les photographies sont importées statiquement pour que next/image en connaisse les dimensions à la compilation.
Le référencement passe par les metadata de la page, un sitemap et un robots générés par le framework, et une image Open Graph dédiée. Les sections et la galerie sont couvertes par des tests d'intégration en Vitest et Testing Library, écrits sur ce que l'utilisateur voit — un filtre appliqué, un état vide, un lien de contact — pas sur l'implémentation des composants. La livraison se fait en image Docker construite sur la sortie standalone de Next.js, avec un fichier compose qui démarre le conteneur et vérifie que le site répond avant toute mise en ligne.
Mots-clés
- nextjs
- react
- typescript
- tailwind
- css
- ux
- design
- seo
- tests