udemy منصه تعليميه مشابهه ل

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

? الميزات التقنية والهندسية

إدارة الحالة المركزية (State Management with Redux):

استخدام Redux Toolkit لإدارة حالة المستخدم (المصادقة)، وسلة المشتريات، وتتبع تقدم الطالب في الكورسات.

تنفيذ Slices منظمة لكل قطاع في التطبيق لضمان سهولة الصيانة وتدفق البيانات باتجاه واحد (One-way data flow).

تجربة المستخدم والواجهة (UI/UX):

تصميم متجاوب (Tailwind CSS): بناء لوحة تحكم (Dashboard) للطالب تظهر بشكل مثالي على كافة الأجهزة، مع استخدام نظام الألوان الهادئ لتقليل إجهاد العين أثناء الدراسة.

أيقونات تفاعلية (Lucide React): دمج مكتبة Lucide لإعطاء واجهة المستخدم طابعاً عصرياً وبسيطاً، مما يسهل الوصول للمحتوى.

الوظائف البرمجية المتقدمة:

نظام البحث والفلترة: محرك بحث لحظي يتيح للمستخدم العثور على الكورسات حسب الفئة، التقييم، أو السعر.

مشغل الفيديو والدروس: واجهة مشغل فيديو مخصصة تتيح التنقل بين الدروس بسلاسة (Video Playlist) وتتبع ما تم إنجازه.

سلة المشتريات (Shopping Cart): نظام متكامل لإدارة الطلبات وحساب الإجمالي قبل الانتقال لعملية الدفع.

?️ المربع التقني (Tech Stack)

React.js (v19): لضمان سرعة بناء الواجهات واستخدام الـ Virtual DOM بفاعلية.

Redux Toolkit: الحل الأمثل لإدارة تعقيدات البيانات في منصة تعليمية ضخمة.

Tailwind CSS: لتوفير سرعة فائقة في بناء وتخصيص العناصر الرسومية.

React Router: لإدارة التنقل بين "صفحة الكورس"، "لوحة التحكم"، و"صفحة الدفع" بدون إعادة تحميل الموقع.

? التحديات التي واجهتها (تفيد في المقابلات)

تحدي: مزامنة حالة الكورسات بين سلة المشتريات وقائمة الرغبات (Wishlist).

الحل: تم استخدام Redux كـ "Single Source of Truth" لضمان أن التغيير في مكان واحد ينعكس فوراً في جميع أنحاء التطبيق.

تحدي: التعامل مع حجم البيانات في قائمة الكورسات.

الحل: تنفيذ تقنيات الفلترة البرمجية المتقدمة لتقليل وقت الاستجابة.