Movie-app using Angular

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

صفحات عرض الأفلام

يتضمن النظام مجموعة من صفحات عرض الأفلام مثل: الآن في السينما، الشائعة، الأعلى تقييمًا، والأفلام القادمة.

تتميز الواجهة بدعم التمرير اللانهائي (Infinite Scroll) أو التقسيم إلى صفحات (Pagination)، مما يتيح للمستخدم استكشاف المزيد من المحتوى بسهولة وبدون إعادة تحميل الصفحة.

صفحة تفاصيل الفيلم

تقدم صفحة التفاصيل تجربة متقدمة تشمل:

ملصق الفيلم

وصف كامل ودقيق

معلومات أساسية (التقييم، سنة الإصدار، التصنيفات)

طاقم التمثيل (إن وجد)

أفلام مشابهة ومقترحة يتم جلبها مباشرة من TMDB

عرض الإعلان الترويجي (Trailer)

يتم تشغيل إعلان الفيلم عبر YouTube iframe بشكل سلس دون مغادرة الصفحة، مما يضمن أفضل تجربة لمعاينة المحتوى.

إدارة قائمة المفضلة

يوفر النظام إمكانية:

إضافة وإزالة الأفلام من المفضلة

حفظ القائمة في Local Storage لضمان بقائها بعد إعادة تحميل الصفحة

إظهار عدّاد مباشر في شريط التنقل لعدد العناصر المفضلة

بحث ديناميكي

خاصية بحث حي (Live Search) تعمل أثناء الكتابة وتعرض نتائج فورية باستخدام:

استعلامات مباشرة لـ TMDB

تقنية Debounce لمنع تكرار الطلبات وتحسين الأداء

الفلترة والفرز

يستطيع المستخدم:

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

فرز النتائج حسب التقييم أو تاريخ الإصدار أو الشعبية

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

تم إضافة نظام بسيط للتسجيل وتسجيل الدخول/الخروج باستخدام Local Storage، مناسب لعرض الفكرة التعليمية بطريقة عملية.

دعم متعدد اللغات

يدعم المشروع 4 لغات بالكامل:

الإنجليزية

العربية (مع واجهة RTL)

الفرنسية

الصينية

يتم تغيير النصوص مباشرة مع تغيير اللغة، كما تنقلب الواجهة بالكامل مع العربية لالتزام الـ RTL.

تبديل الثيم

إمكانية التبديل بين:

وضع النهار (Light Mode)

وضع الليل (Dark Mode)

مع حفظ الاختيار عبر الجلسات باستخدام Local Storage.

تحسينات تجربة المستخدم (UX)

تم تطبيق عدة تحسينات مثل:

مؤشرات تحميل احترافية

زر العودة للأعلى

تصميم متجاوب مطابق لـ Figma

إشعارات تفاعلية باستخدام Angular Material (Snackbars, Alerts)

اعتبارات الوصول (Accessibility)

يشمل النظام دعمًا قويًا لمعايير الوصول:

عناصر قابلة للاستخدام عبر لوحة المفاتيح

استخدام HTML دلالي لتحسين القراءة من قبل الأدوات

توافق كامل مع اتجاه RTL للغة العربية