تخطي إلى المحتوى
محمود.
العودة للمشاريع

صفحة هبوط

ناموز

موقع مطعم متعدد اللغات مع Sanity CMS ونظام طلبات عبر WhatsApp، يتيح لصاحب المطعم إدارة المحتوى بالكامل دون الحاجة إلى مطور.

ناموز

التصنيف

الدور
مطور واجهات أمامية
المدة
مشروع Freelance
حجم الفريق
فردي
السنة
2025
التقنيات
Next.jsTypeScriptTailwind CSSSanity CMS

01

نظرة عامة

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

بنيت المشروع بالكامل باستخدام Next.js مع دعم اللغتين العربية والإنجليزية، ودمجت Sanity CMS لإدارة الصفحات والقائمة والصور والنصوص بشكل مستقل، بالإضافة إلى نظام طلبات يرسل التفاصيل مباشرة عبر WhatsApp.

02

التحدي

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

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

03

دوري

تولّيت بناء المشروع من البداية حتى الإطلاق، وشمل ذلك:

  • تحويل تصميم Figma إلى واجهات Pixel Perfect ومتجاوبة مع جميع الأجهزة.
  • بناء المشروع بالكامل باستخدام Next.js وTypeScript وTailwind CSS.
  • دمج Sanity CMS وإنشاء بنية محتوى تتيح للعميل إدارة الموقع بسهولة.
  • تطوير الموقع بالكامل باللغتين العربية والإنجليزية.
  • بناء نظام طلبات يرسل تفاصيل الطلب مباشرة إلى WhatsApp.
  • تطوير صفحة تقترح وجبات مناسبة للمستخدم بناءً على مدخلاته.
  • نشر المشروع على الدومين النهائي وتسليمه جاهزًا للاستخدام.

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

04

العملية

  1. 01

    فهم المشروع

    عملت مع العميل على تحديد الصفحات الأساسية، وطريقة عرض القائمة، وآلية إرسال الطلبات، بالإضافة إلى تحديد المحتوى الذي يجب أن يكون قابلًا للتعديل من خلال الـ CMS.

  2. 02

    التخطيط

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

  3. 03

    التطوير

    بنيت الموقع بالكامل باستخدام Next.js وTypeScript وTailwind CSS، مع دعم العربية والإنجليزية، وربط جميع الأقسام بـ Sanity CMS، بالإضافة إلى تطوير نظام الطلبات وصفحة اقتراح الوجبات.

  4. 04

    الاختبار

    قبل الإطلاق، تحققت من:

    • سيناريوهات تصفح القائمة وعرض المحتوى.
    • إدارة المحتوى من خلال Sanity CMS.
    • تدفق الطلبات وإرسال التفاصيل عبر WhatsApp.
    • تجربة اقتراح الوجبات حسب المدخلات.
    • التوافق مع مختلف أحجام الشاشات والأجهزة.
    • سلامة تجربة الاستخدام باللغتين العربية والإنجليزية.
  5. 05

    الإطلاق

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

05

الميزات

إدارة محتوى مستقلة

مكّنت صاحب المطعم من إدارة الصفحات، والقائمة، والصور، والنصوص من خلال Sanity CMS دون الحاجة إلى مطور أو تعديل في الكود.

دعم اللغتين

قدّمت تجربة كاملة باللغتين العربية والإنجليزية داخل تطبيق واحد، مع الحفاظ على سهولة إدارة المحتوى لكل لغة.

طلبات عبر WhatsApp

يمكن للمستخدم اختيار المنتجات وإرسال الطلب مباشرة إلى WhatsApp، حيث تُجهَّز رسالة تحتوي على تفاصيل الطلب وبيانات العميل ليكمل المطعم التواصل معه دون الحاجة إلى نظام دفع معقد.

اقتراح وجبات

أضفت صفحة تساعد المستخدم على اختيار وجبة مناسبة بناءً على مدخلات مثل الميزانية وعدد الأشخاص، لتسهيل اتخاذ القرار وتحسين تجربة التصفح.

تنفيذ Pixel Perfect

حوّلت التصميم إلى واجهات مطابقة مع الاهتمام بالتجاوب والأداء وتجربة الاستخدام على مختلف الأجهزة.

06

أبرز النقاط التقنية

خلال عملي على المشروع، ركزت على بناء موقع سريع ومتعدد اللغات، مع نظام محتوى يخدم احتياجات العميل اليومية وليس مجرد دمج CMS داخل التطبيق.

أبرز ما عملت عليه:

  • Next.js.
  • TypeScript.
  • Tailwind CSS.
  • Sanity CMS.
  • Multilingual Architecture.
  • Pixel Perfect Implementation.
  • Responsive Design.
  • WhatsApp Ordering Flow.
  • Content Modeling for Non-Technical Editors.

07

النتائج

خلال العمل على المشروع، ساهمت في:

  • تسليم المشروع بالكامل خلال أقل من شهر.
  • تمكين العميل من إدارة المحتوى دون الحاجة إلى أي تدخل من المطور.
  • إطلاق موقع متعدد اللغات بتجربة استخدام متجاوبة على مختلف الأجهزة.
  • توفير طريقة بسيطة وسريعة لاستقبال الطلبات عبر WhatsApp.
  • نشر المشروع على الدومين النهائي وتسليمه جاهزًا للاستخدام.

08

ما تعلمته

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

كما علّمني العمل ضمن جدول زمني ضيق أهمية اتخاذ قرارات تقنية سريعة ومدروسة في آن واحد، وبناء مسارات استخدام بسيطة — من الطلب عبر WhatsApp إلى اقتراح الوجبات — تخدم الهدف التجاري دون تعقيد غير ضروري.