CineScope

🎬 CineScope — Movie & TV Show Catalog Platform

CineScope هو تطبيق ويب متكامل لعرض واستكشاف الأفلام والمسلسلات تم تطويره باستخدام React 18 و TypeScript مع الاعتماد على بنية حديثة تعتمد على Context API و React Router v6 لإدارة الحالة والتنقل بين الصفحات بشكل سلس وفعال.

يعتمد المشروع على JSON Server كـ Mock REST API لمحاكاة العمليات الحقيقية للـ backend، مما يتيح تنفيذ عمليات CRUD كاملة مثل عرض البيانات، إضافة عناصر جديدة، تعديلها، وحذفها بشكل ديناميكي.

تم تصميم التطبيق بأسلوب Component-Based Architecture، حيث تم تقسيم الواجهة إلى مكونات قابلة لإعادة الاستخدام مثل شريط التنقل (NavBar)، بطاقات العرض (Cards)، وفلاتر البحث والتصفية (Filters).

يدعم التطبيق مجموعة من المميزات التفاعلية مثل:

البحث الفوري عن الأفلام والمسلسلات حسب العنوان

فلترة المحتوى حسب التقييم (Rating) أو النوع (Genre)

نظام ترتيب البيانات حسب السنة أو الاسم أو التقييم

نظام Wishlist لحفظ العناصر المفضلة مع تخزينها في localStorage لضمان استمرار البيانات بعد إعادة التحميل

كما تم بناء نظام إدارة الحالة باستخدام useReducer داخل Context API لتنظيم عمليات إضافة وحذف وتحديث قائمة المفضلات بشكل مركزي ومنظم، مع دعم تحديثات فورية (Optimistic UI) لتحسين تجربة المستخدم.

تم ربط التطبيق بواجهة API محلية باستخدام JSON Server مع إعداد Proxy في Vite لتجنب مشاكل CORS، مما يجعل بيئة التطوير مشابهة للأنظمة الحقيقية.

واجهة المستخدم تعتمد على تصميم عصري داكن (Dark Cinematic UI) مع تجربة استخدام سلسة ومتجاوبة تعمل بكفاءة على جميع الأجهزة.

المشروع مصمم ليكون قابل للتوسع مستقبلاً، مع إمكانية إضافة:

نظام تسجيل دخول (Authentication)

صفحات إدارة (Admin Dashboard)

دعم التصفح غير المتصل (Offline mode)

تحسين الأداء باستخدام React performance optimizations