منصة "Yummy" لوصفات الطعام واستكشاف الوجبات
تفاصيل العمل
تطبيق "Yummy" هو منصة ويب متطورة وتفاعلية تم بناؤها لتكون المرجع الأول لمحبي الطبخ لاستكشاف الوصفات من مختلف أنحاء العالم. يجمع التطبيق بين التصميم العصري والأداء السريع، حيث يعتمد على معالجة البيانات وجلبها لحظياً من خلال واجهات برمجية (APIs). -تجربة المستخدم (User Experience): --تصميم واجهة مستخدم (UI) نظيفة وسهلة التنقل، تعتمد على نظام Single Page Application (SPA) لضمان سرعة التنقل بين الأقسام دون الحاجة لإعادة تحميل الصفحة بالكامل. --توفير نظام Loading Screen احترافي يظهر أثناء جلب البيانات لتحسين تجربة المستخدم. -أنظمة البحث والتصفية المتقدمة: --البحث الذكي: إمكانية البحث عن أي وجبة بالاسم أو بالحرف الأول مع تحديث النتائج فورياً. --التصنيف الجغرافي (Area): استعراض الوجبات بناءً على بلد المنشأ (مطبخ مصري، إيطالي، تركي، إلخ). --التصنيف بالمكونات (Ingredients): محرك بحث يسمح للمستخدم باختيار وصفات بناءً على المكونات المتوفرة لديه. --الفئات (Categories): تقسيم الوجبات إلى فئات منظمة (لحوم، مأكولات بحرية، حلويات). --عرض التفاصيل والبيانات: صفحة تفصيلية لكل وجبة تحتوي على: المقادير الدقيقة، خطوات التحضير، الوسوم (Tags)، وروابط مباشرة لمشاهدة الفيديو (YouTube) أو المصدر الأصلي للوصفة. -التحقق من البيانات (Form Validation): --بناء نظام تواصل متكامل يتضمن اختبارات أمان لحظية (Regular Expressions) لضمان إدخال البيانات بشكل صحيح (الاسم، البريد، الهاتف، العمر، وكلمة المرور). -الجوانب التقنية (Technical Stack): --Front-End: تم استخدام HTML5 و CSS3 مع إطار العمل Bootstrap 5 لضمان استجابة كاملة (Responsive) مع جميع أحجام الشاشات (موبايل، تابلت، ديسكتوب). --Logic & Functionality: تم الاعتماد على JavaScript (ES6+) و jQuery لإدارة الحركات التفاعلية والتحكم في الـ DOM. --API Integration: تم ربط الموقع بـ TheMealDB API باستخدام تقنيات الـ Fetch و Asynchronous Programming لجلب آلاف الوصفات وتحديثها لحظياً. -الهدف من المشروع: تقديم أداة تقنية قوية تجمع بين سهولة الوصول للمعلومة والاحترافية في العرض، مما يجعله نموذجاً مثالياً لتطبيقات الويب التي تعتمد على معالجة البيانات الخارجية وتفاعلية الواجهات.
بطاقة العمل
طلب عمل مماثل