digital-menu-template

قالب القائمة الرقمية (Digital Menu Template)

- قالب React + Vite مخصص للمطاعم والمقاهي.

- المحتوى والهوية البصرية منفصلان عن واجهة المستخدم، مما يسمح بإعادة استخدام القالب عبر تعديل ملف بيانات واحد فقط.

البدء

- npm install

- npm run dev

أوامر التحقق

- npm run build

- npm run lint

- npm run test:qa

- npm audit --audit-level=moderate

(أمر test:qa يشغّل خادم Vite ويختبر تجربة المستخدم: تبديل اللغة، الاتجاه، الأسعار، النوافذ، QR، الوضع الليلي، الروابط الاجتماعية، وعدم وجود مشاكل في التخطيط عبر الشاشات.)

تخصيص لعميل جديد

- تعديل الملف: src/data/restaurantData.js

يحتوي على:

- defaultLanguage: اللغة الافتراضية (حالياً ar).

- restaurantInfo: الاسم، الشعار، الهاتف، العنوان، الروابط، ساعات العمل، رابط الخريطة.

- theme: الألوان والخطوط (Tajawal, Cairo, Noto Kufi Arabic).

- locales.ar / locales.en: النصوص، التصنيفات، العناصر، الأسعار، الملصقات.

الأسعار

- المشروبات: سعر صغير وكبير.

- الطعام والحلويات والشيشة: سعر واحد.

- العملة: ₪ (شيكل).

الصور

- النسخة التجريبية تستخدم روابط Unsplash مع تحميل كسول.

- يمكن استبدال الصور بروابط خارجية أو صور محلية داخل public/.

رمز QR

- زر QR في الترويسة يولّد رمزاً للعنوان الحالي.

- يمكن تحديد رابط دائم للقائمة عبر restaurantInfo.menuUrl.

هيكل المشروع

src/

App.jsx

index.css

data/

restaurantData.js

المزايا

- React + Vite

- دعم العربية والإنجليزية

- تبديل تلقائي RTL/LTR

- تصميم متجاوب

- الوضع الليلي

- توليد QR

- تخصيص سهل للثيم

- محتوى يعتمد على البيانات

- تحميل كسول للصور

- اختبارات Playwright QA