تخطّي إلى المحتوى
أمير أبو دراز
تطوير Full-Stack · نظام CMS مخصص

Z Agency — موقع الشركة ونظام إدارة المحتوى

موقع ثنائي اللغة ونظام إدارة محتوى مخصص لشركة Z Agency، يجمع بين واجهة احترافية لعرض خدمات الشركة ومشاريعها ونظام إدارة متكامل للتحكم بالمشاريع والمحتوى والوسائط وبيانات SEO ومعلومات الموقع.

الدور
مطور Full-Stack
نوع المشروع
موقع شركة ونظام CMS مخصص
السوق
المملكة العربية السعودية
الحالة
المملكة العربية السعودية
السنة
2026

التقنيات

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Prisma
  • PostgreSQL
زيارة الموقع(يفتح في تبويب جديد)عرض المشاريع

نظرة داخل منصة Z Agency

نظرة أقرب على الموقع العام ونظام الإدارة المخصص الذي تم تطويره لإدارة مشاريع Z Agency ومحتواها وعمليات تحديث الموقع.

home

home responsive

home

home

services

projects

Z Agency — موقع الشركة ونظام إدارة المحتوى

about

contact

dashboard

أكثر من مجرد موقع لعرض الأعمال

احتاجت Z Agency إلى حضور رقمي احترافي يعرض خدماتها ومشاريعها وقدراتها باللغتين العربية والإنجليزية، مع إمكانية إدارة المحتوى بسهولة مع نمو أعمال الشركة وتوسع معرض مشاريعها. اعتمادًا على تصاميم UI/UX المقدمة لي، طورت المنصة من الصفر كمشروع Full-Stack متكامل. شمل العمل واجهات الموقع العامة، والبنية البرمجية، وربط قاعدة البيانات، ودعم اللغتين واتجاه RTL، بالإضافة إلى بناء نظام إدارة مخصص. بدلًا من الاعتماد على محتوى ثابت داخل الكود، بنيت هيكلًا قائمًا على CMS يتيح للفريق إدارة المشاريع والمحتوى ونشره من خلال لوحة داخلية، مع الحفاظ على تجربة الموقع العامة متناسقة وقابلة للصيانة والتوسع.

دوري في المشروع

توليت مسؤولية التطوير الكامل للمشروع، بدءًا من تحويل تصاميم UI/UX المقدمة إلى موقع إنتاجي، وصولًا إلى بناء نظام إدارة المحتوى وطبقة البيانات وآليات الإدارة وتعدد اللغات ونشر المشروع.

  • تطوير المنصة بالكامل من الصفر كـ Full-Stack
  • تحويل تصاميم UI/UX المقدمة إلى واجهات فعلية
  • تطوير نظام CMS ولوحة الإدارة المخصصة
  • تصميم طبقة البيانات وربط Prisma وSupabase
  • تنفيذ العربية والإنجليزية مع دعم RTL بالكامل
  • نشر المشروع وتسليمه تقنيًا من البداية إلى الإنتاج

إمكانات المنصة

تجمع المنصة بين موقع الشركة ومعرض أعمالها ونظام CMS داخلي تم تطويره بما يتناسب مع احتياجات Z Agency الفعلية لإدارة المحتوى والمشاريع.

  • نظام CMS مخصص

    نظام إدارة مخصص للتحكم بالمشاريع والخدمات والمحتوى والبيانات الديناميكية للموقع من خلال لوحة إدارة مركزية.

  • إدارة معرض المشاريع

    إدارة منظمة للمشاريع تشمل المحتوى ودراسات الحالة والوسائط وبيانات SEO وخيارات النشر الخاصة بكل مشروع.

  • تجربة ثنائية اللغة

    تجربة متكاملة باللغتين العربية والإنجليزية مع محتوى محلي وتنقل متوافق مع اللغة ودعم كامل لاتجاه RTL للعربية.

  • إدارة الوسائط

    إدارة مركزية للوسائط والأصول البصرية المستخدمة في المشاريع ومحتوى الموقع.

  • إدارة SEO

    حقول SEO قابلة للإدارة من خلال الـCMS للتحكم ببيانات المشاريع والموقع دون الحاجة إلى تعديل الكود في التحديثات الاعتيادية.

  • إدارة طلبات التواصل

    يتم حفظ طلبات نموذج التواصل داخل لوحة الإدارة، مما يوفر للفريق مكانًا مركزيًا لمراجعة العملاء المحتملين والرسائل الواردة.

  • سير عمل نشر المحتوى

    آلية منظمة تتيح إدارة محتوى الموقع ومشاريع معرض الأعمال وتجهيزها قبل نشرها وعرضها على الموقع العام.

التقنيات والبنية البرمجية

تم بناء المنصة باستخدام تقنيات حديثة تعتمد على TypeScript، مع Next.js وTailwind CSS للواجهات، وPrisma وSupabase لطبقة البيانات، بالإضافة إلى أدوات إدارة الحالة والنشر.

الواجهة الأمامية

  • Next.js
  • TypeScript
  • Tailwind CSS
  • Zustand

التكاملات

  • Prisma
  • Supabase
  • PostgreSQL

أنظمة المنتج

  • Vercel

الجودة وقابلية الصيانة

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

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

نتائج المشروع

  • إطلاق موقع Z Agency كمنصة إنتاجية متاحة فعليًا
  • توحيد إدارة المشاريع ومحتوى الموقع داخل CMS مخصص
  • تقليل الحاجة إلى تعديل الكود عند إجراء تحديثات المحتوى الاعتيادية
  • تقديم التجربتين العربية والإنجليزية من خلال منصة واحدة قابلة للصيانة