Valorcy

المشروع الرئيسي

Valorcy

منصة SaaS لبناء المواقع بالذكاء الاصطناعي

Valorcy منظومة SaaS متكاملة لبناء المواقع وإطلاقها وإدارتها بالذكاء الاصطناعي. ليست موقعاً واحداً — بل منتج واحد يُقدَّم عبر ثلاثة تطبيقات إنتاجية تتشارك نظام التصميم وتعريفات الأنواع والأدوات المساعدة والمصادقة داخل مستودع أحادي (Monorepo) واحد.

تطبيقات إنتاجية
3تطبيقات إنتاجية
مستودع أحادي مشترك
1مستودع أحادي مشترك
وحدة وظيفية
40+وحدة وظيفية
لغات مدعومة
3لغات مدعومة
زيارة الموقع

منتج واحد، ثلاثة تطبيقات

كل تطبيق يُبنى ويُنشر بشكل منفصل، لكنها تتشارك الأساس نفسه — فتبدو وتتصرف كمنتج واحد.

الموقع التسويقيالواجهة العامة للمنصة
لوحة تحكم المستخدمالتطبيق الذي يعيش فيه العملاء
لوحة الإدارةتشغيل المنصة
الأساس المشتركمستودع أحادي مشترك
  • مكتبة مكونات واحدة تستهلكها التطبيقات الثلاثة — الزر أو النافذة أو الجدول يُعرَّف مرة واحدة ويتصرف بالطريقة نفسها في كل مكان
  • نظام تصميم واحد من المتغيرات والخطوط والمسافات، بحيث يبدو الموقع التسويقي ولوحة المستخدم ولوحة الإدارة منتجاً واحداً بلا لبس
  • أنواع TypeScript مشتركة تمتد من مخطط قاعدة البيانات إلى عقود الـ API وخصائص الواجهة — أي تغيير في المخطط يظهر كخطأ في وقت البناء لا كعطل في وقت التشغيل
  • أدوات مساعدة مشتركة للتنسيق والتحقق والصلاحيات والوصول إلى البيانات، ما يلغي تكرار المنطق بين التطبيقات
  • مصادقة وإدارة جلسات موحّدة — ينتقل المستخدم من الموقع التسويقي إلى لوحة التحكم دون تسجيل دخول ثانٍ
  • معمارية ومعايير كتابة كود موحّدة تُبقي ثلاثة تطبيقات قابلة للمراجعة والصيانة بواسطة فريق صغير

01

الموقع التسويقي

الواجهة العامة للمنصة

زيارة الموقع
https://valorcy.com
الموقع التسويقي screenshot

الغرض

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

أهم المزايا

المحتوى والصفحات

  • صفحات الهبوط
  • الأسعار
  • معرض القوالب
  • استعراض أداة البناء بالذكاء الاصطناعي
  • المدونة
  • التوثيق

النمو والأداء

  • صفحات محسّنة لمحركات البحث
  • بيانات وصفية ديناميكية
  • ضبط Core Web Vitals
  • عرض من جانب الخادم
  • نقطة دخول المصادقة
  • تصميم متجاوب

تحديات تم حلها

  • منع الرسوم المتحركة الغنية والمحتوى البصري الثقيل من الإضرار بمؤشرات Core Web Vitals — عبر عرض المسار الحرج من الخادم وتأجيل الحركة إلى ما بعد أول رسم للصفحة.
  • جعل محتوى القوالب والمدونة قابلاً للفهرسة رغم أنه يأتي من قاعدة البيانات نفسها التي تكتب إليها لوحة التحكم، باستخدام إعادة التوليد الثابت التدريجي بدل تصدير منفصل لنظام إدارة المحتوى.
  • شرح منتج قائم على الذكاء الاصطناعي بصرياً دون صفحة مثقلة بالفيديو تكلف ثوانٍ من زمن التحميل.

مساهماتي

  • بنيت التطبيق التسويقي من طرف إلى طرف، من معمارية الصفحات حتى اللمسة الأخيرة في الحركة.
  • نفّذت طبقة البيانات الوصفية الديناميكية بحيث يصدر كل قالب وخطة سعر ومقال بعناوين وأوصاف ووسوم Open Graph صحيحة.
  • ضبطت مؤشرات Core Web Vitals — استراتيجية الصور وتحميل الخطوط والعمليات المعطِّلة للعرض — للحفاظ على سرعة الموقع على الهاتف.
  • ربطت نقطة دخول المصادقة التي تنقل المستخدم إلى لوحة التحكم بجلسة قائمة بالفعل.

التقنيات

Next.jsTypeScriptTailwind CSSFramer MotionSSR / ISR

02

لوحة تحكم المستخدم

التطبيق الذي يعيش فيه العملاء

لوحة تحكم المستخدم
لوحة تحكم المستخدم screenshot

الغرض

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

أهم المزايا

البناء

  • بناء المواقع بالذكاء الاصطناعي
  • محرر السحب والإفلات
  • السمات
  • القوالب
  • نظام التصميم

المحتوى

  • نظام إدارة المحتوى
  • إدارة المدونة
  • مدير الملفات
  • دعم تعدد اللغات

التجارة

  • المنتجات
  • الطلبات
  • التحليلات

المنصة

  • إدارة المواقع
  • النطاقات
  • التكاملات

الحساب

  • أعضاء الفريق
  • إدارة الاشتراكات
  • الفوترة
  • الإعدادات
  • المصادقة

تحديات تم حلها

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

مساهماتي

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

التقنيات

Next.jsTypeScriptTailwind CSSShadcn UISupabaseDrizzle ORMTanStack Query

03

لوحة الإدارة

تشغيل المنصة

لوحة الإدارة
لوحة الإدارة screenshot

الغرض

التطبيق الداخلي المستخدم لتشغيل المنصة: إدارة المستخدمين واشتراكاتهم، وتعريف الخطط، والإشراف على المواقع المنشورة، وتنظيم القوالب والمحتوى، وضبط إعدادات الذكاء الاصطناعي، والتحكم في صلاحيات كل فرد داخل الشركة.

أهم المزايا

المستخدمون

  • إدارة المستخدمين
  • الأدوار والصلاحيات
  • أدوات الدعم

الإيرادات

  • إدارة الاشتراكات
  • إدارة الخطط

المحتوى

  • الإشراف على المواقع
  • إدارة نظام المحتوى
  • إدارة المدونة
  • إدارة القوالب

المنصة

  • لوحة التحليلات
  • إعدادات الذكاء الاصطناعي
  • مفاتيح المزايا
  • سجلات التدقيق
  • الإعدادات

تحديات تم حلها

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

مساهماتي

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

التقنيات

Next.jsTypeScriptTailwind CSSShadcn UIPostgreSQLDrizzle ORMRBAC

ما الذي يثبته هذا المشروع

  • تصميم وإطلاق منتج متعدد التطبيقات بدلاً من مواقع منفصلة
  • بناء نظام مكونات قابل للتوسّع يصمد عبر ثلاث واجهات مختلفة تماماً
  • امتلاك المزايا من طرف إلى طرف — نموذج البيانات وطبقة الـ API والواجهة والتفاصيل النهائية
  • الموازنة بين أداء وSEO بمستوى المواقع التسويقية وتفاعلية بمستوى لوحات التحكم
  • التعامل مع الصلاحيات القائمة على الأدوار والفوترة والإشراف — وهي أجزاء الـ SaaS التي لا تظهر إلا على نطاق إنتاجي
Next.jsTypeScriptTailwind CSSShadcn UISupabasePostgreSQLDrizzle ORMFramer MotionTurborepo