MoviesHub

يُعد هذا المشروع تطبيق ويب متكامل لإدارة الأفلام يُعرف باسم MovieHub، صُمم كجزء من التدريب المكثف في معهد تكنولوجيا المعلومات (ITI). يتميز التطبيق بواجهة عصرية وتفاعل لحظي مع البيانات، وفيما يلي تفصيل لنوع العمل ومميزاته الفنية:

1. نوع العمل

تطبيق ويب أحادي الصفحة (SPA - Single Page Application) تم بناؤه باستخدام مكتبة React.js. يعتمد التطبيق على معمارية الربط بين الواجهة الأمامية وخادم بيانات (Backend) عبر بروتوكول REST API.

2. الميزات الرئيسية

إدارة كاملة للبيانات (CRUD): يتيح التطبيق عرض قائمة الأفلام، إضافة أفلام جديدة، وحذفها مع تحديث الواجهة تلقائياً دون الحاجة لإعادة تحميل الصفحة.

عرض التفاصيل الديناميكي: استخدام نظام المسارات الذكي لعرض تفاصيل كل فيلم بشكل منفصل بناءً على معرفه الخاص (ID).

نظام تسجيل دخول متطور: واجهة مستخدم مخصصة للتسجيل والولوج تعتمد على مكونات Material UI التفاعلية.

واجهة مستخدم داكنة (Dark Theme): تصميم مريح للعين يتماشى مع منصات المشاهدة العالمية، مع استخدام نظام Bootstrap Grid لضمان تناسق العناصر.

إدارة الحالة المركزية: استخدام MovieContext لضمان مزامنة البيانات بين جميع أجزاء التطبيق بكفاءة.

3. طريقة التنفيذ (التقنيات)

تم تنفيذ العمل باتباع أفضل الممارسات البرمجية باستخدام الأدوات التالية:

React.js & Hooks: الاعتماد على useState و useEffect لإدارة دورة حياة المكونات، و useContext لإدارة البيانات العالمية.

React Router: لتنظيم التنقل بين الصفحات المختلفة مثل صفحة البداية، تفاصيل الفيلم، وصفحة الإضافة.

تنسيق الواجهات (Styling): تم دمج Bootstrap لتنظيم الهيكل العام، و SASS/CSS للتخصيص الدقيق للمظهر، بالإضافة إلى مكتبة Material UI (MUI) للعناصر التفاعلية المعقدة.

تكامل البيانات: استخدام وظيفة fetch البرمجية للتواصل مع خادم محلي لإجراء عمليات جلب وحفظ البيانات.

بيئة التطوير: استخدام Vite كأداة بناء سريعة لضمان أداء سلس أثناء عملية التطوير.