تطوير منصة تعليمية متكاملة (E-Learning Platform)

منصة تعليم إلكتروني

دي منصة تعليمية إلكترونية متكاملة عملتها باستخدام Next.js وPrisma وPostgreSQL، بتقدم تجربة كاملة للطلاب والمدرسين:

*فكرة المشروع:

الطالب يقدر يسجّل، يتصفح الدورات، يشوف الفيديوهات، يشتري الكورس، يكتب تعليق.

والمدرّس يقدر يضيف كورسات، يتحكم في المحتوى، ويتفاعل مع الطلاب.

فيها تسجيل دخول، فيديوهات، تقييمات، سلة مشتريات، تصميم متجاوب، وتحسينات تجربة المستخدم.

*التقنيات الأساسية:

Frontend: Next.js (App Router)، TypeScript، Tailwind CSS، ShadCN UI

Backend: Prisma + PostgreSQL

State Management: Redux Toolkit + Redux Persist

Authentication: JWT + Google OAuth

Payments: Stripe (محاكاة)

الأنيميشن: GSAP، Lenis، Anime.js

Forms: React Hook Form + Zod

رفع الصور والفيديو: Cloudinary / ImageKit

SEO ودعم أكثر من لغة: i18next + metadata

*تسجيل الدخول والمستخدمين:

تسجيل وتسجيل دخول آمن (بكلمة سر أو Google)

حماية المسارات بناءً على الدور (طالب – مدرس – ادمن)

تخزين الجلسة باستخدام الكوكيز وJWT

صفحة إعدادات الحساب، والتحكم في الصلاحيات

*الدورات والكورسات:

فلترة حسب التصنيف

صفحة تفاصيل للكورس بها فيديو وتقييمات

التعليقات والمراجعات

لوحة تحكم للمدرس لإضافة الكورسات وإدارتها

*سلة الشراء والدفع:

إضافة/إزالة الكورسات من السلة

صفحة Checkout بها معلومات الدفع

محاكاة الدفع باستخدام Stripe

*تجربة المستخدم والتصميم:

تصميم متجاوب بالكامل باستخدام ShadCN وTailwind

سلايدر ديناميكي للدورات باستخدام Swiper

Toast Notifications

تحريك بالسكروول، تأثيرات Parallax، وAnimations متقدمة

تحسين الصور وتحويلها إلى WebP

صفحات احتياطية (fallback) في حالات التحميل أو الخطأ

*مميزات إضافية:

واجهة متعددة اللغات (i18next)

تخزين صور وفيديوهات على Cloudinary أو ImageKit

صفحة تواصل مرتبطة بـ EmailJS

Slug في روابط الكورسات لتحسين الـ SEO

استخدام Chart.js لعرض بيانات بشكل رسومي