الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

استنساخ كورسيرا

تطبيق صفحة واحدة مستجيبة بالكامل باستخدام Mern Stack! ؟

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

  • رد فعل
  • العقدة
  • Mongo DB
  • يعبر
  • Redux
  • redis
  • مزاح

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

  • مونغو
  • redis

ابدء

استنساخ الريبو إلى بيئتك المحلية ، يجب عليك تثبيت جميع التبعيات في الواجهة الخلفية والواجهة.

للوجود الخلفي ، انتقل إلى المجلد الخلفي (CD الخلفي) وقم بتشغيل npm i

  • تثبيت mongodb

  • أو يمكنك استخدام الموقع

  • أضف متغيراتك البيئية

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

    • Access_token_secret = "بعض السر"
    • Access_token_life = الوقت
    • refresh_token_secret = "بعض السر"
    • refresh_token_life = الوقت
    • sendgrid_key = ""
    • mongo_database = ""
    • Oauth2Client = ""
    • stripe_secret_token = ""
    • redis_host = ""
    • redis_password = ""
    • redis_port = ""

ملاحظة: تأكد من مطابقة متغيرات ملفات .env مع ملفات التكوين مثل الصورة أدناه.

للواجهة الأمامية ، انتقل إلى مجلد الواجهة الأمامية (CD Front-End) وقم بتشغيل npm i

لتشغيل بيئة تطوير ، يمكنك استخدام أمر npm start . سيبدأ هذا خادم ويب تطوير على المنفذ 3000 للواجهة الأمامية ، وخادم API الذي تمت مراقبته NODEMON على المنفذ 8080.

ملاحظة: عليك أن تفعل NPM للبدء في الواجهة الخلفية والواجهة الأمامية.

اختبار الوحدة

يمكنك اختبار الواجهة الخلفية ، ونقاط النهاية السريعة باستخدام الأمر (اختبار NPM)

Docker Compose

Coursera Clone تم التخلص منه ويمكن العثور على مستودع Docker Hub هنا https://hub.docker.com/repository/docker/ayushverma/coursera/general

إذا كنت تستخدم Docker و Docker ، فيمكنك بدء المشروع بأكمله مع: 

 docker-compose up

؟ سمات

طالب

  • نظام المصادقة مع الاشتراك ، تسجيل الدخول ، التحقق من OTP ، إعادة إرسال OTP ، نسيت كلمة المرور (تم التحقق من صحتها بالكامل مع تنبيهات bootstrap)
  • مصادقة Google (OAUTH2) باستخدام React-Google-login و Google Auth-Library
  • بوابة دفع الشريط متكاملة مع الواجهة الخلفية لشراء الدورات التدريبية
  • متجر Redux لإدارة الولايات بسهولة
  • الصفحة الرئيسية مع الدورات التي يتم جلبها بشكل قاطع
  • الدورات الموصى بها على أساس تفضيلات المستخدم
  • تصنيف الدورات
  • الدورات المرجعية حيث يمكن للمستخدمين إزالة أو إضافة إشارة مرجعية
  • تنزيل الموارد (PDF - ملاحظات)
  • مشغل فيديو رد فعل مستجيب لمقاطع الفيديو
  • شريط التقدم
  • Pourspage مع كل محتوى الدورة التدريبية
  • البحث على أساس الدورة والمعلم
  • فصول المجموعة الحية في الوقت الحقيقي

مدرس

  • نظام المصادقة المناسب مع الاشتراك ، تسجيل الدخول ، التحقق من OTP ، إعادة إرسال OTP ، نسيت كلمة المرور (تم التحقق من صحتها بالكامل مع تنبيهات bootstrap)
  • نموذج تحميل المعلم الذي تم التحقق من صحته بالكامل مع الوصفية والعنوان والصورة والتفاصيل الأخرى
  • ckeditor للكتابة في مربع النص مع قدرات على إضافة عناوين مختلفة ، فقرات ، جريئة ، مائل ، رابط ، الجداول ، الأحجام وما إلى ذلك
  • يمكن للمعلم تحميل ما يصل إلى 5 مقاطع فيديو مع شريط تحميل لإظهار التقدم
  • يمكن للمعلم رؤية دوراته التي تم تحميلها
  • يمكن للمعلم حذف مساره
  • يمكن للمعلم تحرير مساره

الاختبار باستخدام Jest و Supertest لنقاط النهاية السريعة.

فصول مجموعة Live في الوقت الفعلي باستخدام Socket.io وتم تحسينها مع Redis لتخزين الرسائل التخزين المؤقت

لقطات الشاشة

صفحات المصادقة

صفحة الاشتراك

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

OTP وإعادة إرسال صفحة OTP

نسيت صفحة كلمة المرور

الشاشات الرئيسية

الصفحة الرئيسية

صفحة بالطبع

صفحة إشارة مرجعية

صفحة الخروج الدفع

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

صفحة التفضيل

دورات المعلم

تفاصيل تحميل المعلم

معلم تحميل مقاطع الفيديو

التصميمات المستجيبة

مصادقة تصميم الهاتف المحمول

تصميم الجوال

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل