recipes

وصف المشروع:

تطبيق ويب بسيط ومتكامل يعرض مجموعة من وصفات الأكلات مع إمكانية البحث عنها بسهولة من خلال الكلمات المفتاحية أو نوع الوجبة (فطور – غداء – عشاء) أو نوع الطعام (حلويات – نباتي – مشويات...). يهدف الموقع إلى توفير تجربة مستخدم سهلة وسريعة لاكتشاف وصفات متنوعة.

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

React – لبناء واجهة المستخدم كمكونات قابلة لإعادة الاستخدام.

HTML & CSS – لبناء وتنسيق عناصر الصفحة.

JavaScript (Vanilla + React logic) – لإضافة التفاعل (بحث، فلترة...).

Tailwind CSS – لتصميم واجهة عصرية وسريعة الاستجابة.

? مميزات الموقع:

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

بحث عام بالكلمة للعثور على وصفات حسب الاسم أو المكونات.

فلترة حسب وقت الوجبة (فطور، غداء، عشاء) بزرار واحد.

فلترة حسب نوع الطعام مثل (نباتي، حلويات، شرقي...).

عرض تفاصيل الوصفة عند الضغط عليها: المكونات + خطوات التحضير.

تصميم متجاوب بالكامل يعمل على جميع الأجهزة.

كود React منظم بمكونات (Components) مثل: RecipeCard, SearchBar, FilterMenu, RecipeDetails.

الهدف من المشروع:

ممارسة بناء تطبيق عملي باستخدام React.

تدريب على تقسيم الواجهة إلى مكونات مرنة وقابلة لإعادة الاستخدام.

استخدام Tailwind CSS لتطبيق تصميم احترافي وسريع.

تحسين تجربة المستخدم من خلال خاصية البحث والفلترة الديناميكية.