Netflix  App باستخدام React و Redux مع Routing, Pagination, Search, Navbar, Dark Mode, Language Select
تفاصيل العمل

وصف المشروع: تطبيق ويب تفاعلي يحاكي منصة Netflix، مطور باستخدام React ويوفر جميع المزايا الحديثة لواجهات المستخدم الاحترافية، مع: Routing متكامل تصميم متجاوب Responsive إدارة حالة قوية باستخدام Context و Redux تكامل مع Fake API 🎯 الميزات بالتفصيل: ✅ 1. Navbar احترافي للتنقل (Navigation Bar): شريط تنقل رئيسي للتنقل بين الصفحات: Home Favorites Login Signup Language Selector Dropdown: اختيار اللغة بين (مثلا: العربية – الإنجليزية). تحديث النصوص ديناميكيًا حسب اللغة المختارة باستخدام Context أو i18next. ✅ 2. دعم الوضع الداكن (Dark Mode): تبديل بين الوضع الفاتح والداكن عبر زر مخصص في Navbar. حفظ الوضع المختار في LocalStorage لاستعادته تلقائيًا عند إعادة تحميل الصفحة. ✅ 3. عرض الأفلام والمسلسلات (Movies Display): جلب البيانات من Fake API. عرضها في واجهة مستخدم جذابة باستخدام React Bootstrap Cards. ✅ 4. ميزة البحث (Search Feature): مربع بحث لفلترة الأفلام حسب الاسم مباشرة (Realtime Filtering). ✅ 5. ميزة Pagination: تقسيم نتائج عرض الأفلام إلى صفحات متعددة. إمكانية التنقل بين الصفحات بسهولة عبر أزرار pagination. ✅ 6. ميزة المفضلة (Favorites): إضافة الأفلام إلى قائمة المفضلة. إزالة الأفلام من المفضلة بسهولة. صفحة منفصلة لعرض الأفلام المفضلة فقط. ✅ 7. صفحة تفاصيل المنتج (Movie Details): عرض تفاصيل الفيلم أو المسلسل المحدد بواجهة منفصلة ومنظمة. ✅ 8. نظام المصادقة (Authentication System): Login Page: تسجيل الدخول للمستخدمين الحاليين. Signup Page: إنشاء حساب جديد. حماية بعض الصفحات (مثل المفضلة) بحيث تتطلب تسجيل الدخول للوصول (Route Guards). ✅ 9. إدارة الحالة (State Management): استخدام React Context لإدارة بيانات المستخدم وتسجيل الدخول واللغة والوضع الداكن. استخدام Redux Toolkit لإدارة بيانات الأفلام والمفضلة بشكل منظم واحترافي. ✅ 10. التصميم Styling: تطوير جميع الصفحات باستخدام React Bootstrap لواجهة متجاوبة وأنيقة. دعم الوضع الداكن (Dark Mode) بكامل المشروع مع توافق الألوان. 🛠️ الأدوات والتقنيات المستخدمة: React (Components, Hooks) React Router DOM (Routing & Guards) React Bootstrap (UI Design) Redux Toolkit (State Management) Context API (User Auth State, Dark Mode, Lang) Fake API / JSON Server (Movies Data) Pagination Implementation Search Filtering i18next أو Context للتعريب واللغات Context (للوضع الداكن واللغة)

شارك
بطاقة العمل
تاريخ النشر
منذ شهر
المشاهدات
38
المستقل
طلب عمل مماثل
شارك
مركز المساعدة