نظرة عامة
منصة رقمية متكاملة لوكالة سمارت، تجمع الموقع التسويقي، ومعرض الأعمال، ومركز المعرفة، واستقبال طلبات العملاء، ولوحة الإدارة ضمن منظومة واحدة.
التحديات
إدارة عدد كبير من أقسام المحتوى دون الاعتماد على بيانات ثابتة داخل الواجهة. تقديم تجربة عربية حديثة تشمل المشاريع والمقالات وصفحات التواصل وطلب التسعير. حماية العمليات الإدارية مع إبقاء المحتوى العام متاحًا من خلال واجهة API موحدة. ربط الوسائط وبيانات العملاء المحتملين بخدمات خارجية قابلة للتغيير والتوسّع. تجهيز المشروع للنشر داخل بيئة حاويات وخلف وكيل عكسي.
الحل
تم بناء الواجهة باستخدام React وTypeScript، مع React Router لإدارة التنقل بين الصفحات، وTanStack Query لجلب البيانات وإدارة حالتها. كما استُخدمت Framer Motion وRadix UI لإنشاء مكونات تفاعلية، بالإضافة إلى محرر Tiptap لإدارة المحتوى.
أما الواجهة الخلفية، فقد تم تطويرها باستخدام NestJS، مع تقسيم النظام إلى وحدات وخدمات مستقلة، واستخدام DTOs للتحقق من البيانات، ومخططات Mongoose لتنظيم نماذج قاعدة البيانات. كما يتضمن النظام استجابات موحدة، والتحقق من المدخلات، ومصادقة JWT، وصلاحيات تعتمد على دور المستخدم، وتوثيقًا لواجهات API باستخدام Swagger.
البنية التقنية
واجهة عامة ولوحة تحكم داخل تطبيق واحد مبني باستخدام Vite، مع تحميل كسول للمسارات. واجهة API مبنية باستخدام NestJS ومتصلة بقاعدة بيانات MongoDB. نقطة تجميع خاصة بالصفحة الرئيسية تسترجع الخدمات والمشاريع والتقنيات والفريق والباقات والأسئلة والمقالات بالتوازي. نظام تخزين صور متوافق مع S3 باستخدام Cloudflare R2، مع التحقق من نوع الملفات وأحجامها. إمكانية إرسال بيانات العملاء المحتملين إلى n8n دون تعطيل حفظ الطلب عند تعذر الاتصال بالويب هوك. إعدادات Docker متعددة المراحل، مع استخدام Nginx لتشغيل الواجهة وTraefik للتوجيه وإدارة شهادات TLS.
الوحدات الأساسية
إدارة المشاريع وتصنيفاتها وتقنياتها ودراسات الحالة. إدارة المدونة والتصنيفات والوسوم وبيانات تحسين محركات البحث. إدارة الخدمات والباقات والاستضافات والأسئلة الشائعة. إدارة أعضاء الفريق وشهادات العملاء وبيانات الشركة وصفحة من نحن. إدارة العملاء المحتملين وطلبات المشاريع والنشرة البريدية والإحصاءات. المصادقة ورفع الوسائط وإدارة المحتوى من خلال لوحة تحكم محمية.
النتائج
أصبحت أقسام الموقع الأساسية مرتبطة بمصدر بيانات مركزي، ويمكن إدارتها من خلال لوحة تحكم واحدة. كما تم الفصل بوضوح بين المحتوى العام والعمليات الإدارية، مع تجهيز المشروع للبناء والنشر في بيئة الإنتاج.
ويؤكد فحص البناء أن الواجهة الأمامية والواجهة الخلفية قابلتان للتجميع للإنتاج، مع وجود اختبار وحدة قديم يحتاج إلى تحديث قبل اعتبار المشروع مكتملًا بشكل نهائي.
