usePopcorn — تطبيق بحث عن الأفلام وقائمة مشاهدة مبني بـ React وOMDb

تفاصيل العمل

قمت بتطوير واجهة تطبيق usePopcorn لتقديم تجربة سريعة ومباشرة للبحث عن الأفلام. يتيح التطبيق للمستخدم كتابة اسم الفيلم والحصول على نتائج فورية من OMDb API، ثم استعراض التفاصيل عند الاختيار. يمكن للمستخدم إضافة الفيلم إلى قائمة المشاهدة وتقييمه بنظام نجوم، وتظل البيانات محفوظة بين الجلسات عبر LocalStorage. تم الاهتمام بتجربة الاستخدام عبر عرض حالات التحميل والأخطاء، وتقليل الطلبات غير الضرورية من خلال شرط حد أدنى لطول الاستعلام (٣ أحرف) وإلغاء الطلبات السابقة باستخدام AbortController.

## أهم الميزات (Features)

- بحث فوري عن الأفلام عبر OMDb API مع عرض حالات التحميل والأخطاء

- تفاصيل الفيلم عند التحديد (ملصق، عام الإصدار، تقييم IMDb، المدة عند التعمّق)

- قائمة مشاهدة شخصية مع إضافة/حذف وتقييم بالنجوم لكل فيلم

- حفظ دائم للبيانات باستخدام LocalStorage

- حساب متوسطات سريعة للتقييمات والإحصاءات

- واجهة متجاوبة Mobile‑first

- تجربة سلسة بإلغاء الطلبات المتزامنة (AbortController)

## التقنيات المستخدمة (Tech Stack)

- React 19 + Create React App (react-scripts 5)

- Custom Hooks: `useMovies`, `useLocalStorageState`, `useKey`

- OMDb API (جلب بيانات الأفلام)

- LocalStorage API (حفظ الحالة)

- CSS Flexbox/Grid

- Testing Library (مضمّن ضمن التبعيات)

بطاقة العمل

اسم المستقل
عدد الإعجابات
0
عدد المشاهدات
1
تاريخ الإضافة
تاريخ الإنجاز