العنوان المقترح: موقع منيو لمطعم بالعربية (RTL) سريع، مع الطلب عبر واتساب ولغتين
الوصف:
موقع قائمة طعام احترافي لمطعم في غزة، صُمّم كعرض تجديد لموقع المطعم القديم. يتصفح الزائر المنيو كاملاً، ويفتح أي طبق ليرى تفاصيله، ثم يرسل طلبه إلى المطعم برسالة واتساب جاهزة بلمسة واحدة. المشروع كله مبني بالعربية أولاً (من اليمين لليسار)، مع زر للإنجليزية يقلب التصميم إلى LTR.
ما يتضمنه المشروع:
منيو كامل: 78 صنفاً في 10 أقسام (شاورما، أكلات شرقية، مشاوي، سندويشات، بيتزا، سلطات، حلويات، مشروبات)، وكل صنف بصورته وسعره بالشيكل ووصفه.
بحث وفلاتر: بحث فوري يتجاوز اختلاف كتابة الحروف العربية (أ/ا/إ، ة/ه، ى/ي)، مع فلاتر «حار» و«نباتي» و«الأكثر طلباً» وترتيب بالسعر.
نافذة تفاصيل الطبق: نافذة على الكمبيوتر، وورقة تُسحب للأسفل للإغلاق على الجوال. فيها اختيار الحجم والخيارات (بدون بصل، حار...) والكمية والإجمالي المباشر، والتنقل بين الأطباق.
سلة الطلب: تُحفظ في المتصفح، وتركّب رسالة واتساب واحدة بكل الأصناف والكميات والإجمالي.
روابط للأطباق: يمكن مشاركة رابط مباشر لأي طبق.
تصميم متجاوب: مصمم أولاً للجوال، ويعمل من 360 إلى 1920 بكسل، بحركات خفيفة تحترم من يعطّل الحركة في جهازه.
ظهور في جوجل: عنوان ووصف عربي، ومعاينة عند المشاركة، وبيانات منظمة (Restaurant وMenu) تُولَّد من بيانات القائمة.
الجودة (من القياس الفعلي):
Lighthouse: إمكانية الوصول 100، أفضل الممارسات 100، SEO 100. والأداء 94–95 على الكمبيوتر، و76–92 على الجوال (يتغيّر من قياس لآخر).
ترويسات أمان صارمة (CSP وغيرها)، وlocalStorage يُتحقق منه، وnpm audit بلا ثغرات.
اختبار حمل من خوادم GitHub: 1000 اتصال متزامن، حوالي 235 ألف طلب، 0 أخطاء.
التقنيات: React 19 · TypeScript · Tailwind CSS · Framer Motion · Vite، ومنشور على Cloudflare.
للعميل: كل الأسعار والأصناف والروابط في ملفات بيانات بسيطة، وإضافة طبق تحتاج سطراً واحداً دون لمس الكود.
الروابط:
الموقع: https://thailandi-menu.ab...
الكود: https://github.com/abedal...
الوسوم: React، TypeScript، موقع مطعم، قائمة طعام، RTL، واجهة عربية، واتساب، Tailwind، تصميم متجاوب
English
Title: Fast Arabic (RTL) restaurant menu website with WhatsApp ordering and EN/AR toggle
Description: A complete menu website concept for a restaurant in Gaza. Visitors browse 78 dishes across 10 sections, open any dish for sizes, options and a live total, and send their order to the restaurant as one ready-made WhatsApp message. Arabic-first, with an English toggle that mirrors the layout to LTR.
Arabic-aware search (ignores أ/ا/إ, ة/ه variants), filters and price sorting
Dish details dialog (desktop) and drag-to-close bottom sheet (mobile)
Cart saved in the browser that builds one WhatsApp order message
Shareable dish links, prerendered HTML, SEO with Restaurant and Menu structured data
Lighthouse: Accessibility 100, Best Practices 100, SEO 100. Desktop Performance 94–95; mobile 76–92
Security headers (strict CSP), validated local storage, npm audit clean
Load-tested from GitHub’s servers: 1000 concurrent connections, ~235,000 requests, 0 errors
Stack: React 19, TypeScript, Tailwind, Framer Motion, Vite, Cloudflare
Live: https://thailandi-menu.ab... · Code: https://github.com/abedal...