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

التقنيات الأساسية
- 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.
- بنية مكونات واضحة وقابلة للصيانة.
- تجربة مستخدم تركز على سرعة الوصول للأطباق.
واجهة المستخدم



