Skip to content
كل المشاريع
دراسة حالة هندسية

AURA | أورا

منصة التجارة الإلكترونية الفاخرة للأزياء ونظام إدارة الموارد (ERP)

الدور
تصميم المنتج والهندسة المعمارية والتنفيذ الكامل
نوع المشروع
متجر إلكتروني + نظام ERP داخلي
افتح المنتج المباشر
Next.jsReactTypeScriptTailwind CSSFramer Motion
سطح المكتب
الصفحة الرئيسية لمتجر أورا — قسم البطل بطابع تحريري فاخر وتصميم عربي أولاً

نظرة عامة

أورا منصة أزياء فاخرة بمستوى مؤسسي توحّد واجهة متجر كوتور مع نظام ERP داخلي متكامل — قاعدة كود واحدة تتشارك فيها تجربة العميل والعمليات الخلفية طبقة البيانات نفسها وتتفاعلان معاً في الوقت الفعلي.

صممتُ المنصة وبنيتها من البداية إلى النهاية: هيكلة المعلومات، ولغتان بصريتان مختلفتان تماماً، والهندسة البرمجية للواجهات تحتهما. تُقرأ واجهة المتجر كمجلة أزياء تحريرية بتصميم عربي أولاً واتجاه RTL، بينما لوحة الإدارة قمرة قيادة تشغيلية كثيفة البيانات — عالمان تصميميان متقابلان داخل تطبيق واحد.

المشكلة

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

كان على المنتج أيضاً خدمة جمهورين متقابلين في آن واحد: متسوّقات يتوقعن فخامة تحريرية هادئة، وفريق تشغيل يحتاج شاشات كثيفة وسريعة ومحمّلة بالبيانات. تُضحّي معظم المنصات بأحدهما لخدمة الآخر.

الأهداف

مصدر واحد للحقيقة

أي عملية شراء في المتجر يجب أن تظهر في نظام ERP فوراً — دون مهام مزامنة أو مطابقة يدوية.

إدارة محتوى دون برمجة

يُحدّث المشغّلون أقسام الصفحة الرئيسية والتشكيلات والقوائم من مدير موقع بمعاينة حية — دون أي نشر برمجي.

فخامة عربية أولاً

تصميم تحريري كامل الاتجاه RTL وُلد بالعربية منذ اللحظة الأولى — لا ترجمة لاحقة.

بنية جاهزة مؤسسياً

خدمات وعقود مستودعات وصلاحيات RBAC منذ اليوم الأول، بحيث تُستبدل طبقة البيانات التجريبية بواجهات API حقيقية دون المساس بالواجهة.

البحث

  1. درستُ كيف توظّف دور الأزياء الفاخرة العالمية المساحات البيضاء والخطوط التحريرية والحركة المتحفّظة للإيحاء بمستوى السعر — ولاحظتُ أن المتاجر العربية في المنطقة غالباً تخطيطات مترجمة لا تصاميم عربية أولاً. هذه الفجوة أصبحت موضع تميّز أورا.

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

  3. كشفت مراجعة «من يلمس ماذا» عن تصميم الصلاحيات: تقييد السجلات المالية وإدارة الموظفين بالأدوار العليا، مع مبدّل «العرض كدور» للتحقق بصرياً من حدود كل صلاحية خلال ثوانٍ.

قرارات التصميم

لغتان بصريتان، نظام واحد

واجهة المتجر ورقية دافئة بخطوط Serif ومساحات متنفّسة؛ ولوحة الإدارة قمرة قيادة داكنة بتأثير زجاجي. هذا الانتقال الحاد مقصود — يُخبر الموظف أنه عبر من عالم العلامة إلى عالم التشغيل.

نظام المحتوى يعاين المتجر الحقيقي

يعرض مدير الموقع مكونات الصفحة الرئيسية الفعلية داخل معاينة مؤطرة بمبدّلات سطح المكتب والجهاز اللوحي والجوال — يرى المشغّلون تماماً ما سيراه العملاء قبل النشر.

الخط التحريري هوية

شعار لاتيني بخط Serif متباعد يتعايش مع خط عربي بارز؛ وتتولى المساحات الواسعة والصور الممتدة مهمة الإقناع بدلاً من الشارات واللافتات.

هندسة الاستخدام للتجارة عبر الجوال

شريط «أضيفي للحقيبة» الثابت، وتنقل سفلي بالتبويبات، ومساعد المقاس — تُبقي مسار الشراء في متناول إبهام واحد في كل صفحة منتج.

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

البنية المعمارية

بنية موحّدة مفككة الارتباط: تطبيق واحد بموجّه Next.js App Router، مقسّم طبقات بحيث تتخاطب الوحدات عبر الخدمات والأحداث — لا مباشرةً مع حالة وحدة أخرى.

  1. طبقة العرض

    Next.js App Router · React · Tailwind CSS

    73 صفحة موجّهة عبر مجموعتي مسارات — متجر الكوتور وقمرة الإدارة — لكل منهما هيكل تخطيط ورموز تصميم مستقلة.

  2. خدمات النطاق

    TypeScript service singletons

    21 خدمة أحادية (خدمة المنتجات، الطلبات، المخزون…) تملك كامل منطق الأعمال؛ لا تحسب مكونات الواجهة أي قاعدة نطاق بنفسها.

  3. طبقة الأحداث

    Custom EventBus + React hook

    ناقل أحداث EventBus مخصص مع خطاف useEventBus: تُصدر عملية الشراء حدثاً فتتفاعل لوحة الطلبات وتنبيهات المخزون ومؤشرات لوحة التحكم — دون أن تستورد وحدةٌ وحدةً أخرى.

  4. عقود البيانات

    Repository pattern · localStorage adapters

    تفصل واجهات المستودعات بين الخدمات والتخزين؛ 36 مستودعاً تجريبياً يحفظ في localStorage للعرض، وقابلة للاستبدال بواجهات API حقيقية دون المساس بالواجهة.

  5. المصادقة والصلاحيات

    Permission context · role guards

    مصادقة جلسات بكلمات مرور مجزأة تُحفظ منفصلة عن ملفات الموظفين؛ وسياق صلاحيات يحرس المسارات والإجراءات حسب الدور، مع مبدّل حي «العرض كدور».

  6. النشر والأمان

    Vercel · DOMPurify · dynamic SEO

    منشور على Vercel مع بيانات وصفية ديناميكية وOpenGraph وخرائط موقع؛ ويمر كل HTML يُدخله المشغّلون عبر DOMPurify قبل عرضه.

التقنيات المستخدمة

Next.js (App Router)

لماذا
نشرة واحدة تخدم منتجين — المتجر ونظام ERP — بتخطيطات مجموعات المسارات وتقسيم الكود لكل وحدة.
أين
جميع الصفحات الـ 73: مسارات المتجر ومجموعة مسارات لوحة الإدارة.
القيمة
لا يُثقل نظام ERP الضخم حزمة الواجهة المخصصة للعملاء إطلاقاً.

TypeScript

لماذا
بنية الخدمات والمستودعات لا تصمد إلا إذا فرض المترجم العقود بين الطبقات.
أين
334 ملفاً مكتوباً بالكامل — كل خدمة وعقد مستودع ومكوّن.
القيمة
تظل إعادة الهيكلة عبر 17 وحدة آمنة؛ واستبدال البيانات التجريبية بواجهات حقيقية عمليةٌ يتحقق منها النظام النوعي.

Tailwind CSS

لماذا
احتاجت اللغتان البصريتان المتقابلتان نظام أدوات واحداً برموز قابلة للتبديل، مع دعم أصيل لاتجاه RTL.
أين
رموز تحريرية ورقية في المتجر؛ ورموز داكنة زجاجية في لوحة الإدارة.
القيمة
أساسيات مشتركة وقشرتان متباينتان — دون تكرار مكتبة مكونات.

Custom EventBus

لماذا
تفاعلية بين الوحدات دون جلب مكتبة حالة عامة لم تكن البنية بحاجتها.
أين
تسجيل الطلبات وحركات المخزون والإشعارات ومؤشرات لوحة التحكم.
القيمة
تبقى الوحدات مفككة الارتباط: يُضاف مشترك جديد دون تعديل الوحدة المُصدِرة.

Framer Motion

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

DOMPurify

لماذا
أي نظام محتوى يقبل HTML من المشغّلين هو سطح هجوم XSS بحكم التعريف.
أين
كل حقول النصوص المنسقة واللافتات في مدير الموقع، تُعقَّم قبل العرض.
القيمة
ينال المشغّلون المرونة، وينال العملاء صفحة آمنة.

التحديات والحلول

التحدي

تدفق فوري من الشراء إلى نظام ERP — يجب أن تتحدث الطلبات والمخزون ولوحات المؤشرات لحظة إتمام العميل للشراء، دون طابور خلفي يُعتمد عليه في وضع العرض.

الحل

أحداث نطاق بدل الحالة المشتركة: تُصدر عملية الشراء حدثاً عبر EventBus فتتفاعل خدمة كل وحدة استقلالاً — تتحدث لوحة الطلبات وتنبيهات انخفاض المخزون وبطاقات المؤشرات من الحدث الواحد نفسه.

التحدي

نظام محتوى لا يستطيع كسر المتجر — احتاج المشغّلون سلطة على التخطيط دون قدرة على نشر صفحة رئيسية معطوبة.

الحل

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

التحدي

فرض صلاحيات RBAC عبر 54 شاشة إدارية دون تناثر فحوص الأذونات في كل مكوّن.

الحل

سياق صلاحيات واحد يغذي حراس المسارات وبوابات الإجراءات؛ ومبدّل «العرض كدور» يجعل حدود كل دور قابلة للاختبار بصرياً في ثوانٍ.

التحدي

خطوط فاخرة باتجاه RTL — كان على الخط العربي البارز والشعار اللاتيني والتخطيطات المعكوسة أن تبدو مؤلفةً بعناية، لا محوّلة آلياً.

الحل

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

الأداء

تقسيم الكود على مستوى المسار

يُبقي App Router كل وحدة إدارية في حزمتها المستقلة — لا يُحمّل المتسوق غراماً واحداً من كود ERP.

صور محسّنة

تُقدَّم صور الكتالوج والصور التحريرية عبر next/image بمقاسات متجاوبة وصيغ حديثة.

ترجمة بلا أخطاء

تُبنى قاعدة الكود الكاملة البالغة 334 ملفاً دون أي خطأ TypeScript أو ESLint — بوابة صارمة لا طموحاً مؤجلاً.

النتائج

73

صفحة موجّهة

54

شاشة إدارية في ERP

21

خدمة نطاق

17

وحدة إدارية

36

مستودع بيانات قابل للاستبدال

100%

TypeScript، بلا أخطاء Lint

كل رقم أعلاه محسوب مباشرة من قاعدة الكود — لا تقديرات ولا أرقام دعائية.

الدروس المستفادة

  1. الأحداث تتفوق على تمرير الخصائص عند اتساع الوحدات. الاستثمار المبكر في EventBus أبقى الوحدات مفككة الارتباط بينما توسع النطاق من متجر إلى نظام ERP كامل.

  2. قد تتباين اللغات البصرية، أما النظام تحتها فلا. قشرتان فوق أساسيات مشتركة أقل كلفة بكثير من مكتبتي مكونات.

  3. العقود أولاً. كتابة واجهات المستودعات قبل تنفيذها جعلت استبدال البيانات التجريبية بالحقيقية صادقاً — وقابلاً للتحقق تلقائياً عبر المترجم.

  4. العربية أولاً قرار تصميمي لا مرحلة ترجمة. يتغير سلوك الإيقاع وطول السطر والتسلسل البصري حين يولد التخطيط بالاتجاه RTL.

أعمال أخرى مشابهة

تريد نتائج مماثلة لمنتجك؟

لنتحدث عن مشروعك