دراسة الحالةVercel - under development

موقع FoodEx

FoodEx موقع حديث لإدارة وعرض أطباق المطاعم مبني باستخدام React وFirebase، يقدم تجربة طعام سلسة مع Dashboard إداري، Authentication آمن، وإدارة أطباق لحظية.

موقع FoodEx

التقنيات الأساسية

  • React
  • Firebase
  • Material-UI

الأداء

  • CSR لتحميل سريع وتجربة تفاعلية.
  • تقسيم الكود حسب المكونات.
  • تحميل صور وأصول بشكل محسّن.
  • إدارة حالة تقلل إعادة التصيير غير الضرورية.

الأمان

  • Firebase Security Rules لحماية قاعدة البيانات.
  • Environment Variables لحماية API keys.
  • Authentication يحمي صفحات الإدارة.

الميزات الرئيسية

عرض أطباق احترافي بتخطيط بطاقات.

بطاقات أطباق تفاعلية مع favorites وتأثيرات hover.

دعم أنواع وجبات متعددة مثل Breakfast وLunch وDinner.

Dashboard لإدارة الأطباق.

Authentication آمن للمستخدمين.

إدارة لحظية للبيانات باستخدام Firebase.

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

واجهة responsive مناسبة لكل الشاشات.

بنية المشروع

src/
├── components/
│   ├── About.js              # About us page component
│   ├── appBarComponent.js    # Top navigation bar with search
│   ├── Branches.js           # Restaurant branches page
│   ├── contact.js            # Contact page
│   ├── content.js            # Main content with dish grid
│   ├── Dishes.js             # Dish card component
│   ├── filterBtns.js         # Meal type filter buttons
│   ├── foodWebsite.js        # Main home page component
│   ├── Home.js               # Home page wrapper
│   ├── login.js              # Login page with Firebase Auth
│   ├── register.js           # Registration page
│   ├── MealDesc.js           # Dish details page
│   ├── Reviews.js            # Reviews page
│   ├── searchContent.js      # Search results page
│   ├── secondBar.js          # Secondary navigation bar
│   ├── supFooter.js          # Footer component
│   ├── MainDataContext.js    # Context API for state management
│   ├── mealsData.json        # Default dishes data
│   └── rating.json           # Ratings data
├── Dashbord/
│   └── adminDashbord.js      # Admin dashboard for dish management
├── firebase/
│   ├── firebaseConfig.js     # Firebase configuration
│   └── dataBaseContext.js    # Database context provider
├── imgs/                     # Component images
├── App.js                    # Main app component with routes
├── App.css                   # Main app styles
├── index.js                  # Entry point with React Router
└── index.css                 # Global styles
public/
├── imgs/                     # Public images and screenshots
├── index.html                # HTML template
└── manifest.json             # PWA manifest

استراتيجيات التطوير

  • Client Components لكل الأقسام التفاعلية مثل البحث والمفضلة وAuthentication.
  • Context API لإدارة الحالة العامة للأطباق والمستخدم والبحث.
  • تكامل Firebase لإدارة البيانات وAuthentication.
  • بنية مكونات واضحة وقابلة للصيانة.
  • تجربة مستخدم تركز على سرعة الوصول للأطباق.

واجهة المستخدم

موقع FoodEx لقطة شاشة 1
موقع FoodEx لقطة شاشة 2
موقع FoodEx لقطة شاشة 3
موقع FoodEx لقطة شاشة 4

مهتم بهذا المشروع؟

أنا متاح لفرص جديدة وتعاونات احترافية. دعنا نبني شيئا مميزا معا.

تواصل معي
Mostafa Abdellraheem | Full-Stack Engineer & AI Automation Specialist