منصة افلام تفاعلية

نوع العمل

تطوير منصة أفلام تفاعلية تتيح للمستخدمين تصفح الأفلام، إدارة قائمة المشاهدة الخاصة بهم، والتنقل بين صفحات متعددة ضمن تجربة استخدام منظمة وسلسة. كما يتضمن المشروع لوحة تحكم إدارية لإدارة المحتوى وإضافة أو تعديل بيانات الأفلام.

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

React - React Router - Redux Toolkit - Axios - Material UI (MUI) - Vite - JSON Server

أبرز المميزات

* عرض مكتبة أفلام بتصميم مرتب وسهل التصفح مع إمكانية الوصول لتفاصيل كل فيلم.

* نظام Watchlist يسمح للمستخدم بإضافة الأفلام المفضلة وإدارتها بسهولة.

* تنفيذ عمليات CRUD كاملة لإضافة الأفلام وتعديلها وحذفها وإدارة البيانات بشكل ديناميكي.

* صفحات تسجيل الدخول وإنشاء الحساب كأساس لنظام مصادقة سيتم استكماله لاحقًا مع تطوير الخلفية البرمجية.

* استخدام Lazy Loading لتحسين سرعة تحميل الصفحات وتجربة المستخدم.

* إدارة مركزية لحالة التطبيق باستخدام Redux لتقليل التعقيد وتنظيم تدفق البيانات داخل المشروع.

* تصميم واجهات حديث باستخدام Material UI مع دعم تجربة استخدام واضحة ومتجاوبة على مختلف الأجهزة.

* صفحات مخصصة للأخطاء والتنقل غير الصحيح لتحسين تجربة المستخدم أثناء التصفح.

آلية التنفيذ

تم بناء المشروع باستخدام React مع تقسيم الواجهة إلى مكونات قابلة لإعادة الاستخدام لتسهيل التطوير والصيانة. تم استخدام Redux Toolkit لتنظيم البيانات وإدارة الحالة العامة للتطبيق، مع الاعتماد على Thunks لجلب البيانات وتحديثها بشكل غير متزامن.

كما تم استخدام React Router لإدارة التنقل بين الصفحات وتحميل البيانات لبعض الصفحات عبر Loaders، بينما اعتمدت أجزاء أخرى على تخزين البيانات داخل Redux Store.

في المرحلة الحالية تم استخدام JSON Server لمحاكاة واجهة خلفية مؤقتة، مع التخطيط لاحقًا لتطوير Backend كامل واستكمال نظام المصادقة والوظائف المتبقية.