SourceShan: نظام إدارة محتوى آمن (Headless CMS) لإدارة محافظ عملائي باستقلاليه ومزامنه فوريه مع GitHub

SourceShan: الحل الجذري لإدارة مواقع العملاء

وُلد SourceShan من رحم المعاناه اليوميه لمطوري المواقع: "هل يجب علي العودة إليك في كل مره أريد إضافة مشروع جديد؟"

بدلاً من التعديل اليدوي المستمر يقدم SourceShan لوحة تحكم مركزيه (SaaS) تمنح كل عميل القدره على إدارة محفظته باستقلاليه تامة

أبرز المميزات التقنية:

حمايه عند الحافه (Edge-First Security): يتم التحقق من التوكنز (JWT) في طبقة الـ CDN قبل الوصول للسيرفر باستخدام مكتبة jose مما يوفر سرعة استجابه فائقه وحمايه من هجمات DDoS

نظام التزام ذري (Atomic Batch Commits): عند تعديل العميل لمشروع (نصوص + صور) تقوم المنصه بدمج كل التغييرات في "Commit" واحد عبر GitHub Tree API مما يضمن سلامة البيانات (كل شيء يُحفظ أو لا شيء)

واجهه مبنيه على المخططات (Schema-Driven UI): يتم توليد نماذج الإدخال تلقائياً من ملفات JSON Schema مما يعني أن إضافة حقل جديد لا تتطلب كتابة كود بل مجرد تعديل في المخطط

عزل تام للبيانات: رغم أنها منصه واحده إلا أن بيانات كل عميل معزوله تماماً مما يضمن الأمان والخصوصيه

المزايا الرئيسية (Key Features):

مصادقة الحافه (Edge Authentication): حمايه فائقه السرعة على مستوى الـ CDN

نظام القوالب الديناميكي (Schema-Driven Engine): واجهه تتكيف تلقائياً مع نوع المحتوى (نصوص، صور، قوائم)

إدارة المستخدمين (RBAC): نظام صلاحيات (Admin vs Client) يسمح للمطور بالتحكم الكامل في محافظه او ادارة العملاء و للعميل بالتحكم في محتواه فقط

الرفع الذكي للصور: معالجة وتحسين الصور (Sharp) قبل إرسالها إلى GitHub لضمان الأداء

الاتصال المستمر (Connection Pooling): تقنيه لمنع استنزاف اتصالات قاعدة البيانات في البيئات السحابيه (Serverless)

واجهه زجاجيه (Glassmorphism): تصميم عصري وجذاب يعكس هوية "CodeShan" الرقميه

محرر السحب والإفلات: إعادة ترتيب المشاريع والعناصر بسهولة تامه باستخدام Framer Motion

التقنيات المستخدمة (Tech Stack):

الواجهة الأمامية (Frontend):

Next.js 16 (App Router)

React 19

Tailwind CSS v4 (Glassmorphism)

Framer Motion (Transitions & DND)

Lucide Icons

الواجهة الخلفية (Backend & Security):

Next.js API Routes (Edge & Node Runtime)

MongoDB Atlas (Mongoose)

GitHub API (Octokit)

Jose / JWT (Dual Token Auth)

Sharp (Image Optimization)

نقاط القوة الفريدة (لماذا هذا المشروع احترافي؟):

هندسة الأمان (Security Architecture): استخدام Jose للتحقق على الـ Edge و JsonWebToken للتوقيع على السيرفر هو حل "هجين" ذكي للتغلب على قيود بيئة الـ Edge Runtime

التعامل مع GitHub API: تنفيذ Batch Commits للتعامل مع ملفات متعدده (صور + JSON) في عمليه واحده يعكس خبرة عميقه في التعامل مع واجهات برمجة التطبيقات المعقده

تصميم النظام (System Design): استخدام الـ Singleton Pattern لاتصالات قاعدة البيانات يحل مشكله شائعه جداً في تطبيقات Next.js مع قواعد البيانات التقليديه

ملخص دراسة الحاله (Case Study Summary):

التحدي: إدارة محافظ متعدده لعملاء مختلفين دون الحاجة لتحديث الكود يدوياً لكل تغيير بسيط مع ضمان أمان البيانات وفصلها

النهج: بناء منصة مركزية (CMS) تقوم بدور الوسيط الآمن بين العميل ومستودع الكود الخاص به على GitHub

التنفيذ: استخدام Next.js Middleware للحمايه و GitHub API للتخزين و MongoDB لإدارة الصلاحيات

النتيجة: منصة SaaS متكامله وفرت ساعات من العمل اليدوي ومنحت العملاء حرية التعديل مع الحفاظ على معايير أمان عاليه