barbershop-booking-template

المشروع عبارة عن قالب قائمة طعام رقمية (Digital Menu) قابل للتخصيص للمطاعم والكافيهات، مبني باستخدام React وVite.

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

لتشغيل المشروع يتم تثبيت المكتبات باستخدام npm install ثم تشغيله باستخدام npm run dev.

يحتوي المشروع على أوامر للتحقق من جودة الموقع، مثل npm run build لبناء المشروع، وnpm run lint لفحص الكود، وnpm run test:qa لتشغيل اختبارات الواجهة باستخدام Playwright، بالإضافة إلى npm audit لفحص الثغرات الأمنية في المكتبات.

أهم ميزة في المشروع هي سهولة تخصيصه لمطعم جديد. في أغلب الحالات يكفي تعديل ملف واحد فقط:

src/data/restaurantData.js

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

المشروع يدعم اللغتين العربية والإنجليزية، مع التبديل التلقائي بين RTL عند استخدام العربية وLTR عند استخدام الإنجليزية. ويمكن تحديد اللغة الافتراضية من خلال defaultLanguage.

يمكن أيضًا تغيير الهوية البصرية للمطعم بسهولة من خلال theme، مثل الألوان والخطوط. القالب يستخدم خطوط Google Fonts مثل Tajawal وCairo وNoto Kufi Arabic.

القائمة تحتوي على أنواع مختلفة من المنتجات. المشروبات الساخنة والباردة تدعم سعرين، Small وLarge، بينما الأطعمة والحلويات والشيشة تحتوي على سعر واحد. الأسعار تستخدم رمز الشيكل الإسرائيلي (₪).

بالنسبة للصور، النسخة التجريبية تستخدم صورًا من Unsplash مع Lazy Loading لتحسين الأداء، ويمكن استبدال أي صورة برابط خارجي أو بصورة محلية موجودة داخل مجلد public.

يوجد أيضًا زر QR Code في أعلى الصفحة يقوم تلقائيًا بإنشاء رمز QR لرابط صفحة القائمة الحالية. وإذا كان للمطعم رابط دائم للقائمة، يمكن وضعه داخل restaurantInfo.menuUrl.

المشروع متجاوب مع مختلف أحجام الشاشات، لذلك يمكن استخدامه على الهواتف والأجهزة اللوحية وأجهزة الكمبيوتر.

كما يحتوي على Dark Mode، ويمكن تغيير مظهر الموقع بين الوضع الفاتح والداكن.

هيكل المشروع بسيط، حيث توجد ملفات React الأساسية داخل src، وملف البيانات الرئيسي restaurantData.js الذي يحتوي على بيانات المطعم والقائمة.

من أهم ميزات المشروع:

* React + Vite

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

* دعم RTL وLTR

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

* الوضع الداكن

* إنشاء QR Code تلقائيًا

* سهولة تغيير الألوان والخطوط

* فصل البيانات عن واجهة المستخدم

* Lazy Loading للصور

* اختبارات باستخدام Playwright

* فحص جودة الكود والمكتبات

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