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 (للوضع الداكن واللغة)
مهارات العمل