معرض صور حديث

معرض صور حديث مع بحث وتحميل مباشر React.js

بنيت هذا المشروع لإنشاء تجربة بسيطة وسريعة لاستكشاف الصور عالية الجودة، مع جلب المحتوى بشكل ديناميكي من واجهات برمجية خارجية بدل الاعتماد على محتوى ثابت.

يستطيع المستخدم تصفح الصور، البحث عن صورة محددة، قراءة تفاصيلها، ثم تحميلها بسهولة من خلال واجهة متجاوبة تعمل على مختلف الأجهزة.

أبرز ما تم تنفيذه

جلب البيانات بشكل ديناميكي: ربط التطبيق بـ REST API للحصول على الصور والمعلومات المرتبطة بها، ومن أبرز المصادر المستخدمة Unsplashed API.

- البحث والتصفية: تمكين المستخدم من البحث والوصول إلى الصور المطلوبة بسرعة.

- تفاصيل الصور: عرض عنوان ووصف لكل صورة لإثراء تجربة التصفح.

- تحميل الصور: توفير طريقة مباشرة وسهلة لتحميل الصور.

- Skeleton Loading: إظهار هيكل المحتوى أثناء جلب البيانات، مما يجعل تجربة الانتظار أكثر سلاسة بدل عرض صفحة فارغة.

- تصميم متجاوب: ضمان تجربة استخدام مناسبة على الهاتف والكمبيوتر ومختلف أحجام الشاشات.

- مكونات قابلة لإعادة الاستخدام: تنظيم الواجهة باستخدام مكونات React لتسهيل تطوير المشروع وتوسيعه مستقبلًا.

التحديات والحلول

التحدي: البيانات القادمة من الـAPI لا تكون متاحة فورًا.

الحل: استخدام Skeleton Loading لإعطاء المستخدم مؤشرًا واضحًا بأن المحتوى قيد التحميل وتحسين تجربة الانتظار.

التحدي: وجود عدد كبير من الصور قد يجعل الوصول إلى صورة معينة مزعجًا.

الحل: إضافة البحث والتصفية لتسهيل الوصول إلى المحتوى المطلوب.

التقنيات المستخدمة

React.js · JavaScript · Material UI · Styled Components · REST APIs · HTML5 · CSS3 · Git · GitHub

ما يبرز خبرتي في المشروع

هذا المشروع يعكس قدرتي على بناء واجهات React ديناميكية، التعامل مع البيانات القادمة من APIs، تنظيم المكونات، معالجة حالات التحميل، وبناء تجربة استخدام واضحة ومتجاوبة.

كما أن المشروع متاح على GitHub للاطلاع على طريقة تنظيم الكود وتنفيذ الخصائص.