موقع وصفات طعام

وصف العمل – موقع وصفات طعام باستخدام React و CSS مع تكامل API

يهدف هذا المشروع إلى تطوير موقع وصفات طعام تفاعلي باستخدام React.js و CSS مع تكامل API لجلب الوصفات وعرضها بشكل ديناميكي، مما يتيح للمستخدمين استكشاف وصفات جديدة بسهولة.

المميزات الأساسية:

تصميم حديث ومتجاوب باستخدام CSS (Flexbox & Grid) لضمان عرض مثالي على جميع الأجهزة.

تكامل API لجلب الوصفات من مصدر خارجي عرضها ديناميكيًا.

صفحة رئيسية تفاعلية تعرض بطاقات وصفات مع صور وعناوين ومعلومات مختصرة.

نظام بحث وتصنيف متقدم يسمح للمستخدمين بالبحث عن الوصفات حسب المكونات، الفئة، النظام الغذائي، أو وقت التحضير.

صفحة وصفة تفصيلية تعرض المعلومات الأساسية مثل المكونات، طريقة التحضير، القيم الغذائية، والصور.

إمكانية حفظ الوصفات المفضلة محليًا باستخدام Local Storage.

تأثيرات CSS جمالية مثل hover, transition, animations لتحسين تجربة المستخدم.

التكنولوجيا المستخدمة:

React.js لإنشاء الواجهة التفاعلية.

CSS لتنسيق العناصر وتحسين التصميم.

Axios أو Fetch API لجلب البيانات من API خارجي.

React Hooks (useState, useEffect) لإدارة الحالة والتحديثات الديناميكية.

React Router لإنشاء تنقل سلس بين الصفحات.