Digital fashion house · An ELIXIR venture
Maison Dustur
An editorial fashion house, with its store and its studio on one system.
Maison Dustur is a fashion house told through collections, a journal and the house itself — commerce lives inside the story. ELIXIR designed and built the bilingual storefront, the Studio dashboard that runs it, and a mobile store app, all on one database and one order system.
- Technology
- Next.jsReactTypeScriptTailwind CSSSupabasePostgreSQLResendTipTapExpoReact Native
- Year
- 2026
- Languages
- French · English
- Market
- Morocco
Phase 01 · DISCERN
A fashion house that tells stories before it sells.
The brief was not a storefront with a blog. The brand leads with its collections, its journal and its house; shopping is reached through them.
- 01
Editorial first
The primary navigation is Collections, Journal and Maison — there is no Shop link competing at the top level.
- 02
Commerce inside the story
A collection is presented as a chapter; its pieces are reached from there, and the bag and account sit quietly in the header.
- 03
Morocco first
French for the primary, francophone market; English for international visitors — and a checkout shaped by how people in Morocco pay and receive orders.
Phase 02 · DEFINE
Version 1, defined by real constraints.
The scope was set by how the house actually sells today — decisions made explicit in the product, not left as defaults.
- 01
Morocco-only delivery
One domestic delivery rate, with a delivery window shown as real dates on the confirmation.
- 02
Prices in MAD
One storefront currency, the Moroccan dirham, in whole amounts.
- 03
Cash on delivery or bank transfer
The two ways customers pay today — no card processor in Version 1.
- 04
Limited quantities
At most five of a piece per order line: a chapter release, not bulk stock.
- 05
French and English
French is the default and required language; English is added per product and article.
- 06
Operations built in
Staff roles and permissions, order notifications and an activity log are part of the system, not add-ons.
- 07
Never lose an order
The order is saved first; emails follow. An email failure can never undo an order that was placed.
Phase 03 · DESIGN
An exhibition, not a shelf.
The interface reads like a magazine: generous space, sharp geometry and one quiet accent — with the path to purchase kept calm and short.
- 01
Collections as exhibitions
Each collection opens as a chapter: a dominant campaign image, a plain list of facts instead of stat cards, then an even grid of its pieces.
- 02
The product page
A sticky 3:4 gallery with a thumbnail rail, crossfading images and a fullscreen viewer; a native swipe strip on mobile.
- 03
A stripped checkout
Cart, checkout and confirmation sit in their own layout, with no navigation to leave by, and the payment choice kept inside the checkout step.
- 04
One visual system
Warm ivory, a deep burgundy and an antique-gold accent, near-square corners and a serif/sans pairing — with every text colour checked for WCAG AA contrast.
Palette
Maison Dustur's palette
The brand's own colours, as defined in its design system.
- Cream#F8F5F0
- Sand#E8E2D8
- Antique gold#B08A64
- Burgundy#5A1E24
- Ink#1B1B1B
Phase 04 · DEVELOP
One database behind the store, the studio and the app.
The website, the Studio dashboard and the mobile app read and write the same Supabase database — so a piece published in Studio is the piece customers see, and an order placed anywhere arrives in one place.
System architecture
Website
Next.js storefront in French and English: collections, product pages, journal, cart and checkout.
Supabase · PostgreSQL
Products, orders, customers and content, protected by row-level security; media in Supabase Storage.
Studio
The house's own dashboard: orders, customers, catalogue, journal, pages, media and analytics.
Mobile store app
Expo and React Native, reading the same catalogue and placing orders through the same order function.
Interactive reconstruction
The order loop.
A simplified reconstruction of one order moving through the system — from the storefront, into the database, to the Studio dashboard. No real customer data is shown.
01Storefront
Chapter 001
A piece
Bag
02Database
Supabase · PostgreSQL
- Order
- Address
- Items
One transaction
03Studio
- Payment
- Unpaid
- Fulfilment
- Shipped
One order system — storefront, database and Studio.
One order system — storefront, database and Studio.
What the engineering guarantees
Server-side price verification
Every line's price and name are re-read from the published catalogue on the server — never trusted from the request.
Atomic order creation
The order, its address, its line items and the customer record are written in one database transaction.
Stock protection
Inventory is checked inside the same transaction; an order beyond the available stock is rejected cleanly.
Independent statuses
Payment (unpaid, paid, refunded) and fulfilment (pending to delivered) are tracked separately.
Roles and permissions
Four staff roles over a granular permission set decide what each person can see and change.
Live notifications
New orders reach staff in Studio in real time, through Supabase Realtime.
Website Builder
Pages are composed from a registry of section types, with live preview, scheduling and version history.
Order emails
Customer confirmations, staff alerts and status updates, sent through Resend.
Phase 05 · DISTILL
Refined until it holds.
The system was tightened through successive audits of the running product — each pass removing a risk or a duplication.
- 01
Order reliability
Price and name authority moved to the server, and order submission was rate-limited.
- 02
Stock protection
Inventory checks were moved inside the order transaction itself, so stock can't be oversold.
- 03
Content in one place
Separate content tables were consolidated into the Website Builder, one source for every page.
- 04
The catalogue
The first collection, Chapter 001, was reworked piece by piece — names, copy and composition — until it held together.
- 05
The operational workflow
Notifications, the activity log and the two status tracks give staff one clear path from order to delivery.
Outcomes
What the house can do now.
No business figures are published for this project. These are the capabilities the system provides.
- The brand manages its own catalogue, collections and imagery in Studio.
- Staff process orders through payment and fulfilment, with live notifications.
- Pages and journal articles are composed and published through Studio.
- The storefront and Studio run on the same data, so what is published is what is sold.
- The mobile app reuses the same order logic instead of a second order system.
Services behind this work
The services this project draws on.
Each is a service ELIXIR offers — open one to see how we approach it.
- 02E-commerce DevelopmentOnline stores built around conversion, payments and operations — not just the storefront.View
- 01Web DevelopmentFast, accessible websites and web applications engineered for search, performance and change.View
- 03Custom Software DevelopmentSoftware designed around how your business actually works, from internal tools to core platforms.View
Your project
Start with Discern: tell us what isn't working.
Every project begins with a look at the problem before any recommendation.