Casa de moda digital · Una empresa de ELIXIR
Maison Dustur
Una casa de moda editorial, con su tienda y su estudio en un solo sistema.
Maison Dustur es una casa de moda contada a través de sus colecciones, su diario y la propia casa: el comercio vive dentro del relato. ELIXIR diseñó y construyó la tienda bilingüe, el panel Studio que la gestiona y una app móvil de compra, todo sobre una sola base de datos y un solo sistema de pedidos.
- Tecnología
- Next.jsReactTypeScriptTailwind CSSSupabasePostgreSQLResendTipTapExpoReact Native
- Año
- 2026
- Idiomas
- francés · inglés
- Mercado
- Marruecos
Fase 01 · DISCERNIR
Una casa de moda que cuenta antes de vender.
El punto de partida no era una tienda con un blog. La marca se expresa primero con sus colecciones, su diario y su casa; la compra se alcanza a través de ellos.
- 01
Primero lo editorial
La navegación principal es Colecciones, Diario y Maison: ningún enlace de «Tienda» compite con ellos.
- 02
El comercio dentro del relato
Una colección se presenta como un capítulo; sus piezas se descubren desde ahí, y la bolsa y la cuenta quedan discretas en la cabecera.
- 03
Marruecos primero
Francés para el mercado principal, francófono; inglés para los visitantes internacionales. Y un proceso de pago pensado según cómo se paga y se reciben los pedidos en Marruecos.
Fase 02 · DEFINIR
Una versión 1 definida por restricciones reales.
El alcance se fijó según cómo vende hoy la casa: decisiones explícitas en el producto, no valores por defecto.
- 01
Envío solo en Marruecos
Una única tarifa de envío nacional, con una ventana de entrega mostrada en fechas reales en la confirmación.
- 02
Precios en MAD
Una sola moneda, el dírham marroquí, en importes enteros.
- 03
Contra reembolso o transferencia
Las dos formas en que pagan hoy los clientes: sin procesador de tarjetas en la versión 1.
- 04
Cantidades limitadas
Como máximo cinco unidades de una pieza por línea de pedido: un lanzamiento por capítulo, no stock masivo.
- 05
Francés e inglés
El francés es el idioma predeterminado y obligatorio; el inglés se añade por producto y por artículo.
- 06
La operación integrada
Roles y permisos del equipo, notificaciones de pedidos y un registro de actividad forman parte del sistema, no son añadidos.
- 07
No perder nunca un pedido
Primero se guarda el pedido y después se envían los correos. Un fallo de correo nunca puede deshacer un pedido realizado.
Fase 03 · DISEÑAR
Una exposición, no una estantería.
La interfaz se lee como una revista: espacio generoso, geometría precisa y un único acento discreto, con un camino de compra corto y sereno.
- 01
Colecciones como exposiciones
Cada colección se abre como un capítulo: una imagen de campaña dominante, una lista sencilla de hechos en lugar de tarjetas de cifras y, después, una cuadrícula uniforme de sus piezas.
- 02
La página de producto
Una galería 3:4 fija con un carril de miniaturas, imágenes en fundido y un visor a pantalla completa; en móvil, un carrusel nativo por deslizamiento.
- 03
Un proceso de pago depurado
Bolsa, pago y confirmación tienen su propio diseño, sin navegación por la que salir, y la elección del método de pago queda dentro del paso de pago.
- 04
Un único sistema visual
Un marfil cálido, un burdeos profundo y un acento de oro antiguo, esquinas casi rectas y una pareja serif/sans serif, con cada color de texto comprobado para el contraste WCAG AA.
Paleta
La paleta de Maison Dustur
Los colores propios de la marca, tal como los define su sistema de diseño.
- Crema#F8F5F0
- Arena#E8E2D8
- Oro antiguo#B08A64
- Burdeos#5A1E24
- Tinta#1B1B1B
Fase 04 · DESARROLLAR
Una base de datos detrás de la tienda, el estudio y la app.
La web, el panel Studio y la app móvil leen y escriben en la misma base de datos de Supabase: una pieza publicada en Studio es la que ven los clientes, y un pedido realizado desde cualquier lugar llega a un solo sitio.
Arquitectura del sistema
Sitio web
Tienda en Next.js en francés e inglés: colecciones, páginas de producto, diario, bolsa y pago.
Supabase · PostgreSQL
Productos, pedidos, clientes y contenidos, protegidos con seguridad a nivel de fila; archivos multimedia en Supabase Storage.
Studio
El panel propio de la casa: pedidos, clientes, catálogo, diario, páginas, medios y analítica.
App móvil de compra
Expo y React Native, que lee el mismo catálogo y realiza los pedidos mediante la misma función de pedidos.
Reconstrucción interactiva
El ciclo del pedido.
Una reconstrucción simplificada de un pedido que recorre el sistema: de la tienda a la base de datos y al panel Studio. No se muestra ningún dato real de clientes.
01Tienda
Capítulo 001
Una pieza
Bolsa
02Base de datos
Supabase · PostgreSQL
- Pedido
- Dirección
- Artículos
Una sola transacción
03Studio
- Pago
- No pagado
- Envío
- Enviado
Un solo sistema de pedidos: tienda, base de datos y Studio.
Un solo sistema de pedidos: tienda, base de datos y Studio.
Lo que garantiza la ingeniería
Verificación de precios en el servidor
El precio y el nombre de cada línea se vuelven a leer del catálogo publicado en el servidor; nunca se toman de la petición.
Creación atómica de pedidos
El pedido, su dirección, sus líneas y la ficha del cliente se escriben en una sola transacción.
Protección del stock
El inventario se comprueba dentro de la misma transacción; un pedido que supera el stock disponible se rechaza limpiamente.
Estados independientes
El pago (no pagado, pagado, reembolsado) y el envío (de pendiente a entregado) se siguen por separado.
Roles y permisos
Cuatro roles de equipo sobre un conjunto detallado de permisos deciden qué puede ver y cambiar cada persona.
Notificaciones en directo
Los pedidos nuevos llegan al equipo en Studio en tiempo real, mediante Supabase Realtime.
Website Builder
Las páginas se componen a partir de un registro de tipos de sección, con vista previa en directo, programación e historial de versiones.
Correos de pedido
Confirmaciones al cliente, avisos al equipo y actualizaciones de estado, enviados con Resend.
Fase 05 · DESTILAR
Refinado hasta que se sostiene.
El sistema se ajustó en sucesivas auditorías del producto en funcionamiento: cada pasada eliminó un riesgo o una duplicación.
- 01
Fiabilidad de los pedidos
La autoridad sobre precios y nombres pasó al servidor, y el envío de pedidos se limitó en frecuencia.
- 02
Protección del stock
La comprobación del inventario se trasladó a la propia transacción del pedido, para que el stock no pueda sobrevenderse.
- 03
El contenido en un solo lugar
Varias tablas de contenido se consolidaron en el Website Builder, única fuente de cada página.
- 04
El catálogo
La primera colección, Capítulo 001, se reelaboró pieza a pieza (nombres, textos y composición) hasta que fue coherente.
- 05
El flujo operativo
Notificaciones, registro de actividad y el doble seguimiento de estados dan al equipo un camino claro del pedido a la entrega.
Resultados
Lo que la casa puede hacer ahora.
No se publican cifras de negocio de este proyecto. Estas son las capacidades que ofrece el sistema.
- La marca gestiona su propio catálogo, colecciones e imágenes en Studio.
- El equipo tramita los pedidos, del pago al envío, con notificaciones en directo.
- Las páginas y los artículos del diario se componen y publican desde Studio.
- La tienda y Studio funcionan con los mismos datos: lo que se publica es lo que se vende.
- La app móvil reutiliza la misma lógica de pedidos en lugar de un segundo sistema.
Los servicios detrás de este trabajo
Los servicios en los que se apoya este proyecto.
Cada uno es un servicio que ofrece ELIXIR: abre uno para ver cómo lo abordamos.
- 02Desarrollo e-commerceTiendas online pensadas para la conversión, los pagos y la operación, no solo para el escaparate.Ver
- 01Desarrollo webSitios y aplicaciones web rápidos y accesibles, diseñados para el posicionamiento, el rendimiento y el cambio.Ver
- 03Desarrollo de software a medidaSoftware diseñado en torno a cómo trabaja realmente tu empresa, desde herramientas internas hasta plataformas centrales.Ver
Contado a través del Método ELIXIR.
Discernir, Definir, Diseñar, Desarrollar, Destilar: las mismas cinco fases guían cada proyecto de ELIXIR.
Tu proyecto
Empieza con Discernir: cuéntanos qué no está funcionando.
Cada proyecto empieza por analizar el problema, antes de cualquier recomendación.