README_ar.md

مشروع تطبيق الوصفات

🌐

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

تم تطوير التطبيق باستخدام React، ويستخدم أدوات حديثة مثل Hooks وContext API لإدارة الحالة العامة للتطبيق بكفاءة. تم تحسين تصميم التطبيق للأجهزة المحمولة.

يتركز التطبيق على الأجهزة المحمولة، وتم تحسين التصميم ليكون مناسبًا للشاشة بعرض 375 بكسل. لضمان العرض الصحيح للواجهة أثناء الاختبار، يُوصى باستخدام أدوات المطور في المتصفح (DevTools) لمحاكاة التطبيق بدقة على دقة أقل، مثل الهواتف الذكية. في متصفح Chrome، يمكنك تفعيل وضع المعاينة على الأجهزة المحمولة بالضغط على Ctrl + Shift + M في DevTools وضبط عرض الشاشة إلى 375 بكسل.

⚙️ الميزات

• البحث عن وصفات الأطباق والمشروبات؛
• تصنيف الوصفات حسب الفئات؛
• عرض تفاصيل الوصفات بما في ذلك المكونات وتعليمات التحضير؛
• حفظ وحفظ الوصفات؛
• تتبع عملية إعداد الوصفات؛
• عرض الوصفات المكتملة.

يستخدم التطبيق واجهتين برمجيتين مختلفتين كقاعدة بيانات:

1. واجهة برمجة تطبيقات TheMealDB لوصفات الأطباق؛
2. واجهة برمجة تطبيقات TheCocktailDB لوصفات المشروبات.

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

• React لإنشاء المكونات والواجهة؛
• React Router للتنقل بين الصفحات؛
• Context API لإدارة الحالة العامة؛
• Hooks لإدارة دورة الحياة والحالة المحلية؛
• Bootstrap للتصميم والأسلوب والاستجابة؛
• Docker لضمان قابلية النقل والاتساق في بيئة التطوير.

🚀 كيفية تشغيل المشروع

المتطلبات المسبقة

• تثبيت Node.js (الإصدار 14 أو أحدث) على جهاز الكمبيوتر الخاص بك؛
• تثبيت Docker وDocker Compose (إذا كنت ترغب في تشغيل المشروع باستخدام Docker).

استنساخ المستودع

git clone https://github.com/اسم_المستخدم_الخاص_بك/recipes-app.git
cd recipes-app

تشغيل المشروع محليًا (بدون Docker)

1. تثبيت تبعيات المشروع:

   npm install

2. بدء تشغيل الخادم:

   npm start

3. افتح التطبيق في المتصفح:

   http://localhost:3000
   

تشغيل المشروع باستخدام Docker

1. بناء صورة Docker:

   docker build -t recipes-app .

2. بدء تشغيل حاوية Docker:

   docker run -p 3000:3000 recipes-app

3. افتح التطبيق في المتصفح:

   http://localhost:3000
   

هيكل المشروع

هيكل المشروع كما يلي:

src/
  ├── components/          # مكونات قابلة لإعادة الاستخدام
  ├── pages/               # الصفحات الرئيسية للتطبيق (تسجيل الدخول، الوصفات، المفضلات، الملف الشخصي، إلخ)
  ├── services/            # منطق طلبات واجهة برمجة التطبيقات
  ├── context/             # إعدادات Context API
  ├── App.js               # المكون الرئيسي الذي يحتوي على التوجيه
  └── index.js             # نقطة دخول التطبيق

📈 منهجية وتطوير المهارات

أثناء تطوير هذا المشروع، تم تحسين المهارات التالية:

• المنهجيات الرشيقة: استخدام Scrum وTrello للتعاون بين الفريق وإدارة المهام؛
• توجيه React: تنفيذ توجيه ديناميكي للتنقل بين الصفحات المختلفة للتطبيق؛
• منطق البرمجة: تطوير ميزات البحث والتصفية والتعامل مع البيانات؛
• إدارة الحالة: استخدام Hooks وContext API لإدارة الحالة المحلية والعالمية؛
• إنشاء المكونات: تطوير مكونات قابلة لإعادة الاستخدام والاستجابة لتناسب أجزاء مختلفة من التطبيق.

🧪 الاختبارات

يمكن تنفيذ اختبارات التطبيق باستخدام الأمر التالي:

npm test

🌟 مشاريع أخرى

• 🐣 Pokedex
• 🏪 متجر على الإنترنت
• 👛 مدير النفقات
• 🎮 Trivia