تطبيق ويب متكامل مخصص لمحبي مسلسل "Rick and Morty"، يعتمد على استهلاك بيانات Rick and Morty API الرسمية. يهدف المشروع إلى تقديم تجربة تصفح غنية تسمح للمستخدمين بالبحث عن آلاف الشخصيات، الحلقات، والأماكن، مع توفير نظام فلترة ذكي يعرض تفاصيل الحالة، النوع، والموقع لكل شخصية بشكل فوري.
الميزات التقنية والمهام المنجزة:
استهلاك الـ API المتقدم: ربط التطبيق بـ Rick and Morty REST API لجلب بيانات مئات الشخصيات، مع معالجة البيانات بكفاءة لعرضها.
نظام البحث والفلترة (Advanced Filtering): بناء محرك بحث فوري يسمح بتصفية الشخصيات بناءً على (الحالة: حي/ميت، النوع، النوع الاجتماعي) لضمان سهولة الوصول للمعلومات.
نظام التنقل بين الصفحات (Pagination): تنفيذ نظام ترقيم صفحات ذكي لضمان سرعة تحميل الموقع وتوفير تجربة تصفح سلسة دون إرهاق المتصفح ببيانات ضخمة دفعة واحدة.
تصميم الواجهات (UI/UX): استخدام Material UI (MUI) أو Bootstrap لبناء بطاقات (Cards) جذابة تعرض صور الشخصيات وتفاصيلها بتنسيق متناسق (Grid System).
التوجيه الديناميكي (Dynamic Routing): استخدام React Router لإنشاء صفحات تفصيلية لكل شخصية، بحيث يتم عرض معلومات إضافية (مثل الحلقات التي ظهرت فيها) عند الضغط على البطاقة.
الأدوات والتقنيات المستخدمة:
React.js: لبناء واجهة المستخدم وتجربة Single Page Application (SPA).
Material UI / CSS3: لضمان تصميم عصري ومتجاوب مع جميع الشاشات.
React Hooks: استخدام (useState, useEffect, useParams) لإدارة الحالة وجلب البيانات.
Axios: لإجراء الطلبات البرمجية وجلب البيانات من الـ API.
ما يميز هذا العمل:
تجربة مستخدم سريعة: استجابة فورية لعمليات البحث والفلترة.
التوافق الكامل: الموقع مهيأ ليعمل بشكل مثالي على الهواتف المحمولة والأجهزة اللوحية.
معالجة الحالات الخاصة: إضافة واجهات مخصصة في حال عدم وجود نتائج بحث أو أثناء انتظار تحميل البيانات (Skeleton Loading).