منصة تعليم إلكتروني
دي منصة تعليمية إلكترونية متكاملة عملتها باستخدام 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 لعرض بيانات بشكل رسومي
