0%
Aymen
العودة إلى الأعمال
ويبمُنجز2026

Vocadia

منصة تعليم إلكتروني — إنشاء الدورات والتسجيل وتتبع التقدم، مبنية على خلفية موجهة بالمجال مع صلاحيات دقيقة.

دَوري
مطور Full Stack
الفترة
أكتوبر 2025 — أغسطس 2026
الحالة
مُنجز
نظرة عامة

Vocadia منصة تعليم إلكتروني: يُنشئ المعلّمون دوراتهم وينشرونها، ويلتحق بها الطلاب ويتقدّمون فيها، ويلتقي الطرفان في غرف صفوف مباشرة داخل المنصة. تُتابَع حالة الالتحاق وتقدّم كل طالب على مستوى الخادم، وتخضع كل عملية لصلاحيات دقيقة بحسب الدور.

يعيش الكود في monorepo واحد: خادم Fastify مبني على التصميم الموجّه بالمجال (DDD) مع فصل CQRS بين الأوامر والاستعلامات في كل سياق، ومعه Drizzle للوصول المُنمّط إلى قاعدة البيانات وCasbin محرّكًا للتفويض. أما واجهة الويب فمبنية بـ React وVite، ويُنشر النظام كاملًا على DigitalOcean عبر خط CI/CD متكامل.

التحدّي

المشكلة المطلوب حلّها

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

الحل

كيف بُني

يعزل الخادم كل شأن في وحدة مجال مستقلة خلف فصل CQRS: تمرّ الكتابات عبر أوامر تفرض قواعد المجال، وتمرّ القراءات عبر معالجات استعلام مُصمَّمة على مقاس الواجهة. ولا يتبعثر منطق التفويض داخل المعالجات؛ بل يقيّم Casbin السياسات مركزيًا، فتصبح إضافة صلاحية أو تشديدها تعديلًا في السياسة لا مطاردة في الكود، بينما يُبقي Drizzle المخطط والاستعلامات مُنمّطة من طرف إلى طرف.

تستهلك واجهة React مع Vite هذه الـ API في شاشات تأليف الدورات والالتحاق ومتابعة التقدّم، وتستضيف غرف الصفوف المباشرة للمعلّمين والطلاب. أما النشر فمؤتمت بالكامل: يُبنى الـ monorepo عبر خط CI/CD ثم يصل إلى DigitalOcean.

أبرز الميزات

ماذا يفعل

📚

تأليف الدورات

يُنشئ المعلّمون دوراتهم ويبنون محتواها وينشرونها مباشرة من داخل المنصة.

🎓

الالتحاق وتتبّع التقدّم

يلتحق الطلاب بالدورات ويُسجَّل تقدّمهم على الخادم لكل طالب في كل دورة.

🎥

غرف صفوف مباشرة

غرف تعمل في الزمن الحقيقي يلتقي فيها المعلّمون والطلاب في حصص مباشرة، إلى جانب محتوى الدورات الذي يتابعه الطالب بوتيرته.

🛡️

صلاحيات قائمة على السياسات

يقيّم Casbin كل عملية وفق سياسات تفويض مركزية، فينال كل دور حقوقه بدقّة من غير فحوص أدوار متناثرة في الكود.

🚀

نشر آلي CI/CD

يُبنى الـ monorepo ويُنشر على DigitalOcean عبر خط CI/CD متكامل من دون خطوات نشر يدوية.

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

بُني باستخدام

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

React.js

يغطي React وجهَي الواجهة — شاشات التأليف والمتابعة الغنية بالنماذج وغرف الصفوف المباشرة كثيرة التفاعل — بنموذج مكوّنات واحد، بينما يحافظ Vite على سرعة دورة التطوير.

TypeScript

لغة واحدة ونظام أنواع واحد عبر الـ monorepo كله: تبقى نماذج المجال ومخططات Drizzle وعقود الـ API متزامنة بين خادم Fastify وواجهة React.

الخلفية

Fastify

تتطابق آلية الـ plugins المعزولة في Fastify مع حدود وحدات DDD، إذ يسجّل كل سياق مساراته وأوامره واستعلاماته بنفسه، مع بقاء طبقة الـ API خفيفة وسريعة.

البيانات

PostgreSQL

الدورات والالتحاقات وسجلّات التقدّم بيانات علائقية بطبيعتها؛ يضمن PostgreSQL سلامتها بالقيود والمعاملات، ويعرضها Drizzle كمخطط مُنمّط.

البنية التحتية

Docker

تجعل الحاويات خط CI/CD قابلًا للتكرار: الصور نفسها التي تجتاز البناء هي التي تعمل على خادم DigitalOcean، فلا يعتمد النشر على حالة الخادم.