Learning management system

نظام إدارة التعلم (LMS)

(Next.js و Express.JS)

مقدمة

مرحبًا بكم في تطبيق LMS-نظام إدارة التعلم الحديث المصمم لتوفير تجربة تعليمية تفاعلية وشاملة عبر الإنترنت. تم تصميم هذا النظام الأساسي باستخدام Next.js و Express.js ، بميزات متقدمة لإدارة الدورات ، ومشاركة الطلاب ، وتجارب مستخدم آمنة وسلسة.

بعض معاينة واجهة المستخدم

صفحة التسجيل/تسجيل الدخول

مصادقة كاتب للمستخدم الآمن

صفحة الدورات

المعلم/المشرف لمشاهدة قوائم الدورة التدريبية

دورات/: صفحة الدورة التدريبية

المعلم/المشرف لإنشاء دورة التفاصيل الكاملة وتحريرها وحذفها

صفحة الفصل

المعلم/المسؤول إلى (إنشاء ، تحرير ، حذف ، وشاهد التفاصيل الكاملة) للدورة التدريبية

صفحة التحليلات

المعلم/المسؤول لتحليل مقدار المسار الذي يتم بيعه وكمية الإيرادات المكتسبة

صفحة الفصل

يمكن للعملاء التسجيل لدورة ما ، انظر الفصول المجانية

شريط لعملية الدفع

يقوم العملاء بفحص الدفع

صفحة الفصل

يمكن للعملاء رؤية مرفقات الدورة التدريبية ، تقدمهم بعد شراء الدورة التدريبية

صفحة لوحة القيادة

يمكن للعملاء رؤية دورات التقدم الخاصة بهم ، والدورات المكتملة

قائمة الشريط الجانبي/التنبيهات

واجهات سريعة الاستجابة وسهلة الاستخدام

الميزات الرئيسية

إنشاء وإدارة الدورة الديناميكية: بسهولة إنشاء محتوى الدورة التدريبية وإدارتها بسهولة ، بما في ذلك الصور والمرفقات. مصادقة قوية: تأمين مصادقة المستخدم باستخدام كاتب. تشغيل وتحميل الفيديو التفاعلي: مدمج مع MUX لتجربة فيديو سلسة. المدفوعات الآمنة: تكامل الشريط للتعامل مع مدفوعات الدورات والاشتراكات. واجهة سهلة الاستخدام: التصميم الحديث والاستجابة مع CSS Tailwind. تحميل المستندات والصور: استخدام التحميل لإدارة الملفات الخالية من المتاعب.

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

الواجهة

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

• رد فعل 18.2.0
• Next.js 13.4.12
• Tailwind CSS 3.3.5
• رد الفعل النموذج 7.48.2
• React-Quill 2.0.0
• إعادة شحن 2.10.3
• لوكيد مفاعل 0.294.0

المكتبات الرئيسية:

• @Clerk/NextJS 4.27.2 : لمصادقة المستخدم الآمنة.
• @Mux/Mux-Dewode و @Mux/Mux-Player-React 7.3.3 & 2.3.0 : لتشغيل الفيديو وتحميله.
• @تحميل/رد فعل 6.0.2 : للتعامل مع المستند وتحميل الصور.
• رد فعل-توب 2.4.1 : للإشعارات الأنيقة.
• Zustand 4.4.7 : إدارة الدولة.

تحسينات UI/UX:

• Tailwind Merge 2.0.0 : لتحسين فئات CSS Tailwind.
• CMDK 0.2.0 : واجهة قائمة الأوامر.
• React-Dropzone 14.2.3 : قم بتسحب وإسقاط تحميل ملفات.
• @Tanstack/React-Table 8.10.7 : لبناء الجداول وإدارتها.
• @radix-ui/react-dialog ، @radix-ui/react-dropdown-menu ، وما إلى ذلك ، لمكونات واجهة المستخدم المتقدمة.

سمات:

• واجهة تفاعلية وسهلة الاستخدام.
• تكامل سلس مع دفق الفيديو وخدمات تحميل الملفات.
• أدوات إنشاء وإدارة الدورة الشاملة.
• التصميم المستجيب لضمان التوافق عبر مختلف الأجهزة.

أدوات التطوير:

• ESLINT 8.54.0 : للرمز.
• PostCSS 8.4.31 و Autoprefixer 10.4.16 : لمعالجة CSS.
• TypeScript 5.3.2 : لتكوين النوع.

الخلفية

التقنيات الرئيسية:

• Express.js 4.18.2 : العمود الفقري للخادم ، والتعامل مع التوجيه والأدوات الوسيطة.
• Mongoose 8.0.2 : ODM لـ MongoDB ، تبسيط تفاعلات قاعدة البيانات.
• Node.js: بيئة وقت التشغيل لتنفيذ JavaScript على جانب الخادم.

قاعدة البيانات:

• MongoDB: قاعدة بيانات NOSQL المستخدمة لتخزين بيانات التطبيق.

المكتبات الرئيسية والأدوات الوسيطة:

• Dotenv 16.3.1 : لإدارة متغيرات البيئة.
• Nodemon 3.0.2 (التطوير): لإعادة تشغيل الخادم تلقائيًا أثناء التطوير.

سمات:

• نقاط نهاية API قوية لاسترجاع البيانات والتلاعب بها.
• اتصال آمن بقاعدة البيانات مع معالجة استعلام فعالة.
• بنية قابلة للتطوير مناسبة لتوسيع الميزات وقاعدة المستخدمين.

الأمن والمصادقة:

• تدابير أمنية متكاملة لنقاط نهاية API.
• منطق المصادقة والترخيص لحماية بيانات المستخدم.

أدوات التطوير:

• حزم NPM مختلفة لتعزيز الوظائف والكفاءة.
• Postman لاختبار والتحقق من نقاط نهاية API.

التكامل:

• Stripe لمعالجة الدفع: مدمجة مع Webhooks Stripe للتعامل مع المعاملات.
• خدمات الطرف الثالث الآخر كما هو مطلوب من قبل التطبيق.