Projet démonstratif
Studio Aleria
Démonstration de refonte e-commerce pour une marque de vêtements de sport : boutique statique très légère, fiches produits, composition d'un ensemble et parcours d'achat entièrement simulé.
- Statut
- Projet démonstratif
- Secteur
- E-commerce — marque de vêtements de sport
- Année
- 2026
- En ligne
- studio-aleria-demo.vercel.app
Projet démonstratif. Concept démonstratif indépendant — non affilié à l'entreprise. Maquette de présentation conçue par Roman Gomes, sans commande ni partenariat : La marque Studio Aleria n'est pas présentée ici comme une référence client. Aucune commande ni aucun paiement réel ne peut y être effectué.
Fig. A — Bureau, 1440 × 900Fig. B — Mobile, 390 × 844
01Point de départ
Le problème
Une marque de vêtements vend d'abord une allure. Sur une boutique en ligne, cet univers doit exister dès le premier écran, et le chemin de la fiche produit à la confirmation doit rester court, surtout sur mobile.
02Cap
L’objectif
Proposer une boutique à l'image de la marque, légère sur mobile, avec un parcours d'achat lisible de bout en bout — sans toucher à la boutique existante ni traiter la moindre commande réelle.
03Ce que j’ai construit
La solution
Un site statique exporté, servi sans serveur d'application : accueil, collection, fiches produits, guide des tailles, histoire de la marque, aide et recherche.
Un composeur d’ensemble : le haut et le bas choisis chacun à sa taille, ajoutés au panier en un seul geste.
Un parcours d'achat simulé de bout en bout : panier conservé dans le navigateur, commande et confirmation sans aucun appel réseau ni paiement.
Un drapé textile en 3D procédurale (three.js), chargé en différé et jamais nécessaire pour lire la page ou acheter.
Des médias optimisés par script (AVIF, WebP, MP4), un bandeau de démonstration sur chaque page et une double protection contre l'indexation.
Un adaptateur de catalogue prêt pour une future connexion à une API de commerce, et une cartographie des anciennes adresses pour préparer la migration SEO.
04Fiche technique
Technologies
- Next.js 16 (export statique)
- React 19
- TypeScript
- Tailwind CSS 4
- three.js
- sharp (AVIF / WebP)
- Vitest
- Playwright + axe
05Ce qui est livré
Le résultat
- Une démonstration en ligne, non indexée : aucune commande, aucun paiement, aucune donnée transmise.
- Une boutique complète : collection, fiches produits, composeur d'ensemble, recherche, panier, commande, confirmation et pages légales.
- Des tests automatisés présents : unitaires (Vitest) et recette de bout en bout (Playwright, contrôle d'accessibilité axe).
- La liste des points à valider par la marque avant toute mise en production, livrée avec le code.
Aucun chiffre d’audience ou de ventes ici : une démonstration n’en produit pas. Ce qui compte se vérifie en ouvrant le site.
Voir la démonstration en ligne (nouvel onglet)
Votre projet
Votre projet mérite le même soin.
Décrivez votre activité et votre objectif en quelques lignes. Je reviens vers vous avec une première lecture de votre projet et une proposition claire.