Maison de mode numérique · Une entreprise d'ELIXIR
Maison Dustur
Une maison de mode éditoriale, sa boutique et son studio sur un seul système.
Maison Dustur est une maison de mode racontée par ses collections, son journal et la maison elle-même : le commerce vit à l'intérieur du récit. ELIXIR a conçu et construit la boutique bilingue, le tableau de bord Studio qui la pilote et une application mobile, le tout sur une seule base de données et un seul système de commande.
- Technologies
- Next.jsReactTypeScriptTailwind CSSSupabasePostgreSQLResendTipTapExpoReact Native
- Année
- 2026
- Langues
- français · anglais
- Marché
- Maroc
Phase 01 · DISCERNER
Une maison de mode qui raconte avant de vendre.
Le point de départ n'était pas une boutique avec un blog. La marque s'exprime d'abord par ses collections, son journal et sa maison ; l'achat se fait à travers eux.
- 01
L'éditorial d'abord
La navigation principale se compose des Collections, du Journal et de la Maison : aucun lien « Boutique » ne vient les concurrencer.
- 02
Le commerce dans le récit
Une collection est présentée comme un chapitre ; ses pièces s'y découvrent, tandis que le panier et le compte restent discrets dans l'en-tête.
- 03
Le Maroc d'abord
Le français pour le marché principal, francophone ; l'anglais pour les visiteurs internationaux. Et un paiement pensé selon la façon dont on paie et reçoit ses commandes au Maroc.
Phase 02 · DÉFINIR
Une version 1 définie par de vraies contraintes.
Le périmètre découle de la manière dont la maison vend aujourd'hui : des décisions rendues explicites dans le produit, et non laissées par défaut.
- 01
Livraison au Maroc uniquement
Un tarif de livraison national unique, avec une fenêtre de livraison affichée en dates réelles sur la confirmation.
- 02
Prix en MAD
Une seule devise, le dirham marocain, en montants entiers.
- 03
Paiement à la livraison ou virement
Les deux modes de paiement utilisés aujourd'hui : aucun prestataire de paiement par carte dans la version 1.
- 04
Quantités limitées
Cinq exemplaires au plus d'une même pièce par ligne de commande : une sortie de chapitre, pas un stock de masse.
- 05
Français et anglais
Le français est la langue par défaut et obligatoire ; l'anglais s'ajoute par produit et par article.
- 06
L'exploitation intégrée
Rôles et permissions de l'équipe, notifications de commande et journal d'activité font partie du système, pas des options.
- 07
Ne jamais perdre une commande
La commande est enregistrée d'abord, les e-mails ensuite. Un échec d'envoi ne peut jamais annuler une commande passée.
Phase 03 · DESSINER
Une exposition, pas une étagère.
L'interface se lit comme un magazine : de l'espace, une géométrie nette, un seul accent discret, et un parcours d'achat court et apaisé.
- 01
Les collections comme des expositions
Chaque collection s'ouvre comme un chapitre : une image de campagne dominante, une simple liste de faits plutôt que des cartes de chiffres, puis une grille régulière de ses pièces.
- 02
La page produit
Une galerie 3:4 fixe avec un rail de vignettes, des images en fondu enchaîné et une visionneuse plein écran ; un défilement natif par balayage sur mobile.
- 03
Un paiement épuré
Panier, paiement et confirmation disposent de leur propre mise en page, sans navigation pour s'en échapper, et le choix du mode de paiement reste dans l'étape de paiement.
- 04
Un seul système visuel
Un ivoire chaud, un bordeaux profond et un accent or antique, des angles presque droits et un duo serif/sans serif, chaque couleur de texte étant vérifiée pour le contraste WCAG AA.
Palette
La palette de Maison Dustur
Les couleurs de la marque, telles que définies dans son système de design.
- Crème#F8F5F0
- Sable#E8E2D8
- Or antique#B08A64
- Bordeaux#5A1E24
- Encre#1B1B1B
Phase 04 · DÉVELOPPER
Une base de données derrière la boutique, le studio et l'application.
Le site, le tableau de bord Studio et l'application mobile lisent et écrivent dans la même base de données Supabase : une pièce publiée dans Studio est celle que voient les clients, et une commande passée n'importe où arrive au même endroit.
Architecture du système
Site web
Boutique Next.js en français et en anglais : collections, pages produit, journal, panier et paiement.
Supabase · PostgreSQL
Produits, commandes, clients et contenus, protégés par la sécurité au niveau des lignes ; médias dans Supabase Storage.
Studio
Le tableau de bord de la maison : commandes, clients, catalogue, journal, pages, médias et statistiques.
Application mobile
Expo et React Native, qui lit le même catalogue et passe les commandes par la même fonction de commande.
Reconstitution interactive
La boucle de commande.
Une reconstitution simplifiée d'une commande qui traverse le système : de la boutique à la base de données, puis au tableau de bord Studio. Aucune donnée client réelle n'est affichée.
01Boutique
Chapitre 001
Une pièce
Panier
02Base de données
Supabase · PostgreSQL
- Commande
- Adresse
- Articles
Une seule transaction
03Studio
- Paiement
- Non payée
- Expédition
- Expédiée
Un seul système de commande : boutique, base de données et Studio.
Un seul système de commande : boutique, base de données et Studio.
Ce que garantit l'ingénierie
Vérification des prix côté serveur
Le prix et le nom de chaque ligne sont relus dans le catalogue publié, sur le serveur, jamais repris de la requête.
Création de commande atomique
La commande, son adresse, ses lignes et la fiche client sont écrites en une seule transaction.
Protection du stock
Le stock est vérifié dans la même transaction ; une commande dépassant le stock disponible est refusée proprement.
Statuts indépendants
Le paiement (non payé, payé, remboursé) et l'expédition (en attente jusqu'à livré) sont suivis séparément.
Rôles et permissions
Quatre rôles d'équipe, fondés sur des permissions détaillées, déterminent ce que chacun peut voir et modifier.
Notifications en direct
Les nouvelles commandes parviennent à l'équipe dans Studio en temps réel, grâce à Supabase Realtime.
Website Builder
Les pages sont composées à partir d'un registre de types de sections, avec aperçu en direct, programmation et historique des versions.
E-mails de commande
Confirmations client, alertes équipe et mises à jour de statut, envoyées via Resend.
Phase 05 · DISTILLER
Affiné jusqu'à ce qu'il tienne.
Le système a été resserré au fil d'audits successifs du produit en fonctionnement : chaque passage a supprimé un risque ou un doublon.
- 01
La fiabilité des commandes
L'autorité sur les prix et les noms est passée côté serveur, et l'envoi des commandes a été limité en fréquence.
- 02
La protection du stock
La vérification du stock a été placée dans la transaction de commande elle-même, pour qu'il ne puisse pas être survendu.
- 03
Le contenu en un seul lieu
Des tables de contenu distinctes ont été regroupées dans le Website Builder, source unique de chaque page.
- 04
Le catalogue
La première collection, Chapitre 001, a été retravaillée pièce par pièce (noms, textes et composition) jusqu'à trouver sa cohérence.
- 05
Le flux opérationnel
Notifications, journal d'activité et double suivi des statuts offrent à l'équipe un chemin clair, de la commande à la livraison.
Résultats
Ce que la maison peut faire désormais.
Aucun chiffre d'affaires ou indicateur n'est publié pour ce projet. Voici les capacités qu'offre le système.
- La marque gère elle-même son catalogue, ses collections et ses images dans Studio.
- L'équipe traite les commandes, du paiement à l'expédition, avec des notifications en direct.
- Les pages et les articles du journal sont composés et publiés depuis Studio.
- La boutique et Studio reposent sur les mêmes données : ce qui est publié est ce qui est vendu.
- L'application mobile réutilise la même logique de commande, sans second système de commande.
Les services derrière ce travail
Les services sur lesquels repose ce projet.
Chacun est un service proposé par ELIXIR : ouvrez-en un pour découvrir notre approche.
- 02Développement e-commerceDes boutiques en ligne pensées pour la conversion, le paiement et les opérations — pas seulement la vitrine.Voir
- 01Développement webSites et applications web rapides et accessibles, pensés pour le référencement, la performance et l'évolution.Voir
- 03Développement logiciel sur mesureDes logiciels conçus autour de votre fonctionnement réel, des outils internes aux plateformes cœur de métier.Voir
Raconté à travers la Méthode ELIXIR.
Discerner, Définir, Dessiner, Développer, Distiller : les cinq mêmes phases guident chaque projet ELIXIR.
Votre projet
Commencez par Discerner : dites-nous ce qui ne fonctionne pas.
Chaque projet commence par un examen du problème, avant toute recommandation.