انتقل إلى المحتوى

دار أزياء رقمية · مشروع تملكه ELIXIR

Maison Dustur

دار أزياء تحريرية، متجرها ولوحة تحكّمها على نظام واحد.

Maison Dustur دار أزياء تُروى عبر مجموعاتها ومجلّتها والدار نفسها — والتجارة تعيش داخل الحكاية. صمّمت ELIXIR وبنت المتجر ثنائي اللغة، ولوحة التحكم Studio التي تديره، وتطبيق متجر للجوال، جميعها على قاعدة بيانات واحدة ونظام طلبات واحد.

الخدمات
تطوير المتاجر الإلكترونيةتطوير المواقعتطوير البرمجيات المخصّصة
التقنيات
Next.jsReactTypeScriptTailwind CSSSupabasePostgreSQLResendTipTapExpoReact Native
السنة
2026
اللغات
الفرنسية · الإنجليزية
السوق
المغرب

المرحلة 01 · التبصّر

دار أزياء تحكي قبل أن تبيع.

لم يكن المطلوب متجرًا مع مدوّنة. تتقدّم العلامة بمجموعاتها ومجلّتها ودارها، ويُوصَل إلى الشراء من خلالها.

  • 01

    التحرير أولًا

    التنقّل الرئيسي هو المجموعات والمجلّة والدار — ولا يوجد رابط «متجر» ينافسها في المستوى الأعلى.

  • 02

    التجارة داخل الحكاية

    تُقدَّم المجموعة كفصل، ومنه يُوصَل إلى قطعها، بينما تبقى الحقيبة والحساب في الترويسة بهدوء.

  • 03

    المغرب أولًا

    الفرنسية للسوق الأساسية الناطقة بالفرنسية، والإنجليزية للزوار الدوليين — وعملية دفع مصمّمة وفق الطريقة التي يدفع بها الناس في المغرب ويتسلّمون طلباتهم.

المرحلة 02 · التحديد

إصدار أول تحدّده قيود حقيقية.

حُدّد النطاق وفق الطريقة التي تبيع بها الدار اليوم — قرارات صريحة داخل المنتج، لا إعدادات افتراضية.

  1. 01

    التوصيل داخل المغرب فقط

    سعر توصيل محلي واحد، مع نافذة تسليم تُعرض بتواريخ فعلية في صفحة التأكيد.

  2. 02

    الأسعار بالدرهم المغربي

    عملة واحدة للمتجر، الدرهم المغربي (MAD)، بمبالغ صحيحة.

  3. 03

    الدفع عند الاستلام أو بالتحويل البنكي

    الطريقتان اللتان يدفع بهما العملاء اليوم — دون معالج بطاقات في الإصدار الأول.

  4. 04

    كميات محدودة

    خمس قطع كحدّ أقصى من القطعة نفسها في كل سطر طلب: إصدار فصل، لا مخزون بالجملة.

  5. 05

    الفرنسية والإنجليزية

    الفرنسية هي اللغة الافتراضية والإلزامية، وتُضاف الإنجليزية لكل منتج وكل مقال.

  6. 06

    التشغيل جزء من النظام

    أدوار الفريق وصلاحياته، وإشعارات الطلبات، وسجلّ النشاط جزء من النظام، لا إضافات لاحقة.

  7. 07

    لا يضيع أي طلب

    يُحفظ الطلب أولًا ثم تُرسل الرسائل. ولا يمكن لفشل في البريد أن يلغي طلبًا تمّ.

المرحلة 03 · التصميم

معرض، لا رفّ.

تُقرأ الواجهة كمجلّة: مساحات رحبة، وهندسة حادّة، ولمسة لونية واحدة هادئة — مع مسار شراء قصير وهادئ.

  • 01

    المجموعات كمعارض

    تُفتتح كل مجموعة كفصل: صورة حملة مهيمنة، وقائمة بسيطة من الحقائق بدل بطاقات الأرقام، ثم شبكة منتظمة لقطعها.

  • 02

    صفحة المنتج

    معرض صور ثابت بنسبة 3:4 مع شريط صور مصغّرة، وانتقال متلاشٍ بين الصور، وعارض بملء الشاشة؛ وشريط سحب أصلي على الجوال.

  • 03

    دفع مجرّد من المشتّتات

    للسلة والدفع والتأكيد تخطيطها الخاص، بلا تنقّل يُخرج منها، ويبقى اختيار طريقة الدفع داخل خطوة الدفع.

  • 04

    نظام بصري واحد

    عاجي دافئ، وعنابي عميق، ولمسة من الذهبي العتيق، وزوايا شبه حادّة، وثنائي خطوط مذيّلة وغير مذيّلة — مع التحقق من تباين كل لون نصّي وفق معيار WCAG AA.

لوحة الألوان

لوحة ألوان Maison Dustur

ألوان العلامة نفسها، كما يحدّدها نظام التصميم الخاص بها.

  • كريمي#F8F5F0
  • رملي#E8E2D8
  • ذهبي عتيق#B08A64
  • عنابي#5A1E24
  • حبري#1B1B1B

المرحلة 04 · التطوير

قاعدة بيانات واحدة خلف المتجر ولوحة التحكم والتطبيق.

يقرأ الموقع ولوحة Studio وتطبيق الجوال من قاعدة بيانات Supabase نفسها ويكتبون فيها — فالقطعة المنشورة في Studio هي ما يراه العملاء، والطلب الذي يُقدَّم من أي مكان يصل إلى مكان واحد.

بنية النظام

الموقع

متجر مبني بـ Next.js بالفرنسية والإنجليزية: المجموعات، وصفحات المنتجات، والمجلّة، والسلة، والدفع.

Supabase · PostgreSQL

المنتجات والطلبات والعملاء والمحتوى، محميّة بأمان على مستوى الصفوف؛ والوسائط في Supabase Storage.

Studio

لوحة التحكم الخاصة بالدار: الطلبات، والعملاء، والكتالوج، والمجلّة، والصفحات، والوسائط، والتحليلات.

تطبيق المتجر للجوال

مبني بـ Expo وReact Native، يقرأ الكتالوج نفسه ويقدّم الطلبات عبر دالة الطلبات نفسها.

إعادة بناء تفاعلية

دورة الطلب.

إعادة بناء مبسّطة لطلب واحد يعبر النظام — من المتجر إلى قاعدة البيانات، ثم إلى لوحة Studio. لا تُعرض أي بيانات حقيقية للعملاء.

01المتجر

Maison Dusturالسلة1

الفصل 001

قطعة

السلة

الدفع
الدفع عند الاستلام
تحويل بنكي

02قاعدة البيانات

Supabase · PostgreSQL

  • الطلب
  • العنوان
  • القطع

معاملة واحدة

المخزون−1

03Studio

Studio
طلب جديد
الدفع
غير مدفوع
التنفيذ
تمّ الشحن
رسالة الحالة

نظام طلبات واحد — المتجر وقاعدة البيانات وStudio.

نظام طلبات واحد — المتجر وقاعدة البيانات وStudio.

ما تضمنه الهندسة

  • التحقق من الأسعار على الخادم

    يُعاد قراءة سعر كل سطر واسمه من الكتالوج المنشور على الخادم — ولا يُؤخذان من الطلب أبدًا.

  • إنشاء الطلب ذرّيًا

    يُكتب الطلب وعنوانه وأسطره وسجلّ العميل في معاملة واحدة في قاعدة البيانات.

  • حماية المخزون

    يُتحقّق من المخزون داخل المعاملة نفسها، ويُرفض الطلب الذي يتجاوز المخزون المتاح بشكل نظيف.

  • حالات مستقلة

    يُتابَع الدفع (غير مدفوع، مدفوع، مُسترَد) والتنفيذ (من قيد الانتظار حتى التسليم) كلٌّ على حدة.

  • الأدوار والصلاحيات

    أربعة أدوار للفريق قائمة على صلاحيات مفصّلة تحدّد ما يمكن لكل شخص رؤيته وتعديله.

  • إشعارات فورية

    تصل الطلبات الجديدة إلى الفريق في Studio لحظيًا عبر Supabase Realtime.

  • Website Builder

    تُركّب الصفحات من سجلّ لأنواع الأقسام، مع معاينة حيّة وجدولة وسجلّ للإصدارات.

  • رسائل الطلبات

    تأكيدات للعملاء وتنبيهات للفريق وتحديثات للحالة، تُرسل عبر Resend.

المرحلة 05 · الاستخلاص

صُقل حتى صار متماسكًا.

جرى إحكام النظام عبر عمليات تدقيق متتالية للمنتج أثناء تشغيله — كل جولة أزالت خطرًا أو تكرارًا.

  1. 01

    موثوقية الطلبات

    انتقلت سلطة الأسعار والأسماء إلى الخادم، وحُدّ تكرار إرسال الطلبات.

  2. 02

    حماية المخزون

    نُقل التحقق من المخزون إلى داخل معاملة الطلب نفسها، حتى لا يُباع أكثر من المتاح.

  3. 03

    المحتوى في مكان واحد

    دُمجت جداول المحتوى المنفصلة في Website Builder، ليصبح المصدر الوحيد لكل صفحة.

  4. 04

    الكتالوج

    أُعيد العمل على المجموعة الأولى، الفصل 001، قطعةً قطعة — الأسماء والنصوص والتكوين — حتى تماسكت.

  5. 05

    سير العمل التشغيلي

    الإشعارات وسجلّ النشاط ومساري الحالة يمنحون الفريق طريقًا واضحًا من الطلب إلى التسليم.

النتائج

ما تستطيع الدار فعله الآن.

لا تُنشر أرقام أعمال لهذا المشروع. هذه هي القدرات التي يوفّرها النظام.

  • تدير العلامة كتالوجها ومجموعاتها وصورها بنفسها في Studio.
  • يعالج الفريق الطلبات من الدفع حتى التنفيذ، مع إشعارات فورية.
  • تُركّب الصفحات ومقالات المجلّة وتُنشر من خلال Studio.
  • يعمل المتجر وStudio على البيانات نفسها، فما يُنشر هو ما يُباع.
  • يعيد تطبيق الجوال استخدام منطق الطلبات نفسه بدل نظام طلبات ثانٍ.

الخدمات وراء هذا العمل

الخدمات التي يستند إليها هذا المشروع.

كلٌّ منها خدمة تقدّمها ELIXIR — افتح إحداها لترى كيف نتعامل معها.

تُروى عبر منهجية ELIXIR.

التبصّر، التحديد، التصميم، التطوير، الاستخلاص — المراحل الخمس نفسها تقود كل مشروع من ELIXIR.

  1. 01التبصّر
  2. 02التحديد
  3. 03التصميم
  4. 04التطوير
  5. 05الاستخلاص
استكشف منهجية ELIXIR

مشروعك

ابدأ بالتبصّر: أخبرنا بما لا يعمل كما ينبغي.

يبدأ كل مشروع بالنظر في المشكلة قبل أي توصية.

ابدأ التدقيقدراسات الحالة