Digitales Modehaus · Ein Unternehmen von ELIXIR
Maison Dustur
Ein redaktionelles Modehaus – Shop und Studio auf einem System.
Maison Dustur ist ein Modehaus, das sich über seine Kollektionen, sein Journal und das Haus selbst erzählt – der Handel lebt in der Geschichte. ELIXIR hat den zweisprachigen Shop, das Studio-Dashboard, das ihn steuert, und eine mobile Shopping-App gestaltet und gebaut – alles auf einer Datenbank und einem Bestellsystem.
- Technologie
- Next.jsReactTypeScriptTailwind CSSSupabasePostgreSQLResendTipTapExpoReact Native
- Jahr
- 2026
- Sprachen
- Französisch · Englisch
- Markt
- Marokko
Phase 01 · ERKENNEN
Ein Modehaus, das erzählt, bevor es verkauft.
Die Aufgabe war kein Shop mit Blog. Die Marke führt mit ihren Kollektionen, ihrem Journal und ihrem Haus; zum Kauf gelangt man über sie.
- 01
Redaktion zuerst
Die Hauptnavigation besteht aus Kollektionen, Journal und Maison – kein „Shop“-Link konkurriert auf oberster Ebene.
- 02
Handel in der Geschichte
Eine Kollektion wird als Kapitel präsentiert; von dort erreicht man ihre Stücke, während Warenkorb und Konto zurückhaltend im Header bleiben.
- 03
Marokko zuerst
Französisch für den frankophonen Hauptmarkt, Englisch für internationale Besucher – und ein Checkout, der sich danach richtet, wie in Marokko bezahlt und geliefert wird.
Phase 02 · DEFINIEREN
Version 1, definiert durch echte Rahmenbedingungen.
Der Umfang richtet sich danach, wie das Haus heute verkauft – Entscheidungen, die im Produkt ausdrücklich getroffen wurden, statt Voreinstellungen zu bleiben.
- 01
Lieferung nur in Marokko
Ein einheitlicher Inlandsversandpreis, mit einem Lieferfenster, das auf der Bestätigung als echte Daten erscheint.
- 02
Preise in MAD
Eine Shopwährung, der marokkanische Dirham, in ganzen Beträgen.
- 03
Nachnahme oder Überweisung
Die beiden Zahlungswege, die Kundinnen und Kunden heute nutzen – ohne Kartenzahlungsanbieter in Version 1.
- 04
Begrenzte Mengen
Höchstens fünf Exemplare eines Stücks pro Bestellposition: eine Kapitel-Edition, kein Massenbestand.
- 05
Französisch und Englisch
Französisch ist Standard- und Pflichtsprache; Englisch wird je Produkt und Artikel ergänzt.
- 06
Betrieb von Anfang an mitgedacht
Rollen und Berechtigungen, Bestellbenachrichtigungen und ein Aktivitätsprotokoll sind Teil des Systems, keine Zusätze.
- 07
Keine Bestellung geht verloren
Zuerst wird die Bestellung gespeichert, dann folgen die E-Mails. Ein E-Mail-Fehler kann eine aufgegebene Bestellung nie rückgängig machen.
Phase 03 · GESTALTEN
Eine Ausstellung, kein Regal.
Die Oberfläche liest sich wie ein Magazin: großzügiger Raum, klare Geometrie und ein einziger ruhiger Akzent – mit einem kurzen, gelassenen Weg zum Kauf.
- 01
Kollektionen als Ausstellungen
Jede Kollektion öffnet sich wie ein Kapitel: ein dominantes Kampagnenbild, eine schlichte Liste von Fakten statt Kennzahlenkarten, dann ein gleichmäßiges Raster ihrer Stücke.
- 02
Die Produktseite
Eine fixierte 3:4-Galerie mit Miniaturleiste, überblendenden Bildern und Vollbildansicht; mobil ein nativer Wischstreifen.
- 03
Ein reduzierter Checkout
Warenkorb, Checkout und Bestätigung haben ein eigenes Layout ohne Navigation, über die man abspringen könnte; die Zahlungswahl bleibt im Checkout-Schritt.
- 04
Ein visuelles System
Warmes Elfenbein, tiefes Burgunder und ein Akzent in Antikgold, fast rechtwinklige Ecken und ein Serif/Sans-Paar – jede Textfarbe auf WCAG-AA-Kontrast geprüft.
Farbpalette
Die Farbpalette von Maison Dustur
Die eigenen Farben der Marke, wie sie ihr Designsystem festlegt.
- Creme#F8F5F0
- Sand#E8E2D8
- Antikgold#B08A64
- Burgunder#5A1E24
- Tinte#1B1B1B
Phase 04 · ENTWICKELN
Eine Datenbank hinter Shop, Studio und App.
Website, Studio-Dashboard und mobile App lesen und schreiben dieselbe Supabase-Datenbank – ein in Studio veröffentlichtes Stück ist genau das, was Kundinnen und Kunden sehen, und jede Bestellung kommt an einem Ort an.
Systemarchitektur
Website
Next.js-Shop auf Französisch und Englisch: Kollektionen, Produktseiten, Journal, Warenkorb und Checkout.
Supabase · PostgreSQL
Produkte, Bestellungen, Kunden und Inhalte, geschützt durch Row-Level Security; Medien in Supabase Storage.
Studio
Das eigene Dashboard des Hauses: Bestellungen, Kunden, Katalog, Journal, Seiten, Medien und Analysen.
Mobile Shopping-App
Expo und React Native – liest denselben Katalog und bestellt über dieselbe Bestellfunktion.
Interaktive Rekonstruktion
Der Bestellkreislauf.
Eine vereinfachte Rekonstruktion einer Bestellung auf ihrem Weg durch das System – vom Shop in die Datenbank und weiter ins Studio-Dashboard. Es werden keine echten Kundendaten gezeigt.
01Shop
Kapitel 001
Ein Stück
Warenkorb
02Datenbank
Supabase · PostgreSQL
- Bestellung
- Adresse
- Positionen
Eine Transaktion
03Studio
- Zahlung
- Unbezahlt
- Versand
- Versendet
Ein Bestellsystem – Shop, Datenbank und Studio.
Ein Bestellsystem – Shop, Datenbank und Studio.
Was das Engineering garantiert
Serverseitige Preisprüfung
Preis und Name jeder Position werden auf dem Server aus dem veröffentlichten Katalog gelesen – nie aus der Anfrage übernommen.
Atomare Bestellanlage
Bestellung, Adresse, Positionen und Kundendatensatz werden in einer einzigen Datenbanktransaktion geschrieben.
Bestandsschutz
Der Bestand wird in derselben Transaktion geprüft; eine Bestellung über den verfügbaren Bestand hinaus wird sauber abgelehnt.
Unabhängige Status
Zahlung (unbezahlt, bezahlt, erstattet) und Versand (von ausstehend bis zugestellt) werden getrennt verfolgt.
Rollen und Berechtigungen
Vier Teamrollen auf Basis feingranularer Berechtigungen legen fest, was jede Person sehen und ändern darf.
Live-Benachrichtigungen
Neue Bestellungen erreichen das Team in Studio in Echtzeit, über Supabase Realtime.
Website Builder
Seiten werden aus einem Register von Abschnittstypen zusammengesetzt – mit Live-Vorschau, Zeitplanung und Versionsverlauf.
Bestell-E-Mails
Kundenbestätigungen, Team-Hinweise und Statusmeldungen, versendet über Resend.
Phase 05 · DESTILLIEREN
Verfeinert, bis es trägt.
Das System wurde in aufeinanderfolgenden Audits des laufenden Produkts geschärft – jeder Durchgang beseitigte ein Risiko oder eine Doppelung.
- 01
Verlässliche Bestellungen
Die Hoheit über Preise und Namen wanderte auf den Server, und Bestellungen wurden mit einem Ratenlimit versehen.
- 02
Bestandsschutz
Die Bestandsprüfung wurde in die Bestelltransaktion selbst verlegt, damit nichts überverkauft werden kann.
- 03
Inhalte an einem Ort
Getrennte Inhaltstabellen wurden im Website Builder zusammengeführt – eine Quelle für jede Seite.
- 04
Der Katalog
Die erste Kollektion, Kapitel 001, wurde Stück für Stück überarbeitet – Namen, Texte und Zusammensetzung –, bis sie stimmig war.
- 05
Der betriebliche Ablauf
Benachrichtigungen, Aktivitätsprotokoll und die beiden Statusspuren geben dem Team einen klaren Weg von der Bestellung bis zur Zustellung.
Ergebnisse
Was das Haus jetzt kann.
Für dieses Projekt werden keine Geschäftszahlen veröffentlicht. Dies sind die Fähigkeiten, die das System bietet.
- Die Marke pflegt Katalog, Kollektionen und Bilder selbst in Studio.
- Das Team bearbeitet Bestellungen von der Zahlung bis zum Versand, mit Live-Benachrichtigungen.
- Seiten und Journal-Artikel werden in Studio zusammengestellt und veröffentlicht.
- Shop und Studio arbeiten mit denselben Daten – was veröffentlicht ist, wird verkauft.
- Die mobile App nutzt dieselbe Bestelllogik statt eines zweiten Bestellsystems.
Die Leistungen hinter dieser Arbeit
Die Leistungen, auf denen dieses Projekt beruht.
Jede davon ist eine Leistung von ELIXIR – öffnen Sie eine, um unseren Ansatz zu sehen.
- 02E-Commerce-EntwicklungOnlineshops, die auf Conversion, Zahlungen und Abläufe ausgelegt sind – nicht nur auf das Schaufenster.Ansehen
- 01WebentwicklungSchnelle, barrierearme Websites und Webanwendungen – gebaut für Suchmaschinen, Performance und Veränderung.Ansehen
- 03Individuelle SoftwareentwicklungSoftware, die sich nach Ihren tatsächlichen Abläufen richtet – von internen Tools bis zu Kernplattformen.Ansehen
Erzählt entlang der ELIXIR-Methode.
Erkennen, Definieren, Gestalten, Entwickeln, Destillieren – dieselben fünf Phasen tragen jedes ELIXIR-Projekt.
Ihr Projekt
Beginnen Sie mit Erkennen: Sagen Sie uns, was nicht funktioniert.
Jedes Projekt beginnt mit einem Blick auf das Problem – vor jeder Empfehlung.