Live search

عنوان المشروع: محرك بحث فوري للمستخدمين (Live User Search) بأداء عالي

وصف المشروع:

​تطبيق واجهة أمامية (Front-end) متطور يتيح البحث عن المستخدمين بشكل فوري وجلب البيانات من واجهة برمجة تطبيقات (Public API).

المشروع ليس مجرد محرك بحث بسيط، بل تم بناؤه مع التركيز الكامل على تحسين تجربة المستخدم (UX) وكفاءة استهلاك موارد الشبكة من خلال تطبيق تقنيات متقدمة في لغة JavaScript.

​المميزات التقنية وحلول الأداء:

​لقد قمت بحل مشكلتين من أكبر تحديات البحث الفوري في الويب:

​تقنية الـ Debouncing: لضمان عدم إرسال طلبات API مع كل ضغطة زر، قمت ببرمجة تأخير زمني (400ms).

هذا يقلل الضغط على الخادم (Server) ويمنع استهلاك بيانات المستخدم بلا داعٍ.

​إدارة الطلبات المتداخلة (Request Cancellation):

باستخدام الـ AbortController API، يضمن التطبيق إلغاء أي طلب قديم في حال بدأ المستخدم عملية بحث جديدة.

هذا يمنع ظهور نتائج "قديمة" بسبب تأخر استجابة الشبكة (Race Conditions).

​تجربة مستخدم تفاعلية:

نظام تنبيهات لحالة البحث (Searching, Idle, Error) مع عرض عدد النتائج المكتشفة لحظياً.

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

​JavaScript (ES6+): الاعتماد الكلي على الـ Vanilla JS مع استخدام async/await و fetch.

​CSS3: تصميم واجهة متجاوبة (Responsive Design) تعتمد على الـ Grid Layout والـ CSS Variables لسهولة التعديل.

​External API: التكامل مع JSONPlaceholder لجلب بيانات المستخدمين.

​ماذا يقدم هذا المشروع كنموذج لعملي؟

​هذا المشروع يعكس قدرتي على بناء أدوات برمجية ليست فقط "تعمل"، بل "تعمل بكفاءة".

أركز دائماً على:

​كتابة Clean Code قابل للصيانة.

​تقليل استهلاك موارد الجهاز والشبكة.

​تقديم واجهات بسيطة، سريعة، وسهلة الاستخدام.