ريتز كارلتون الرياض
منصّة تجربة ضيوف لفندق ريتز كارلتون الرياض: مسار حجز ثنائيّ اللغة، خدمات الغرف، تحليلات على AWS، متكاملة مع موقع العلامة الرئيسي.
عن المشروع.
منصّة تجربة ضيوف لفندق ريتز كارلتون الرياض، تعمل إلى جانب الموقع المؤسّسي للعلامة دون أن تكسر قواعده. شملت آليّة العمل مسار حجز ثنائيّ اللغة، خدمات داخل الغرفة، وطبقة تحليلات على AWS تغذّي فريق العمليّات. عملت على الواجهة بـ React، وعلى خدمات Node، وعلى نموذج Postgres الذي يربط حالة الغرف بسجلّ الضيف. جمهور الضيافة الفاخرة قاسٍ؛ كلّ تفاعل يجب أن يبدو هادئًا ولا يلفت الضيف إلى البرمجيّات.
ما الذي تغيّر.
أكبر عنصر مرئي LCP
لغة مدعومة
زيادة في الحجوزات المباشرة
ما الذي وجدناه.
فندق فاخر تحت مظلّة Marriott احتاج منصّة تجربة ضيف تجلس إلى جانب الموقع المؤسّسيّ للعلامة دون كسر تقاليده: تدفّق حجز ثنائيّ اللغة، خدمات الغرف، وطبقة تحليلات يستطيع فريق العمليّات قراءتها فعلًا في السادسة صباحًا.
ما الذي فعلناه.
Next.js للواجهة العلنيّة، خدمات Node.js للحالة + تاريخ الضيوف، PostgreSQL كمصدر الحقيقة، AWS (S3 + CloudFront + RDS + CloudWatch) للأجزاء التي يجب ألّا تتعطّل. ثنائيّ ar/en بطباعة RTL أصليّة — النصوص العربيّة الفخمة لا تُترجم آليًّا.
ما الذي أصبح.
شُحن على جدول إطلاق فندق Ritz-Carlton الرياض. TTFB دون ثانية على واجهات الحجز، لوحات تحليلات حيّة لاجتماع GM الصباحيّ.
دوري الفعليّ في هذا المشروع.
ملكيّة هندسة full-stack — بنيت واجهة React/Next.js، خدمات Node، مخطّط Postgres، ونشر AWS. عملت إلى جانب مصمّم علامة Marriott (الذي امتلك الهويّة البصريّة) وصاحب قرار العمليّات في الفندق (الذي امتلك قواعد الأعمال). لا أملك الموقع المؤسّسيّ للعلامة نفسه؛ حدود التكامل موثّقة في العقد.
مهندس فرونت-إند
Next.js 13، App Router، RSC للواجهات العلنيّة، ثنائيّ ar/en بطباعة RTL أوّلًا في كلا الواجهتين اللاتينيّة والعربيّة. التزام بميزانيّة حركة درجة فخامة (لا تقطّع على iPad في الغرفة).
مهندس باك-إند
Node.js (Fastify) + مخطّط Postgres لحالة الغرف، تاريخ الضيوف، طلبات الخدمة في الغرفة. لقطة من تغذية PMS عبر مهمّة مجدولة.
DevOps + AWS
CloudFront CDN، S3 للأصول الثابتة، RDS Postgres، إنذارات CloudWatch مربوطة بـPagerDuty. Multi-AZ لـAPI العمليّات. لقطات يوميّة مع تجارب استرداد.
توطين عربيّ-أوّلًا
نسخة UX عربيّة أصليّة + تمريرة تصميم RTL على كلّ شاشة. لا ترجمة آليّة؛ مراجعة وفق صوت علامة Marriott بالعربيّة.
الأرقام التي تهمّ.
- <800msTTFB · صفحة الحجزp75، CloudFront مع cache ثابت + RSC. مقاس من حافّات KSA.
- 99.9٪وقت تشغيل API الحجزCloudWatch على مدى 12 شهرًا. Multi-AZ RDS + مهمّتا ECS مزدوجتان خلف ALB.
- ثنائيّAR + EN أصليّعربيّ مكتوب يدويًّا؛ تمريرات RTL على كلّ شاشة؛ مراجعة صوت العلامة.
- حيّتحديث لوحة العمليّاتتحديث دون دقيقة من لقطة PMS → CloudWatch → واجهة العمليّات.
- WCAG AAتدقيق وصولاختُبر ضدّ AXE + تنقّل لوحة مفاتيح يدويّ + VoiceOver iOS لتدفّق iPad داخل الغرفة.
- 0انحدارات موقع العلامةحافظ تكامل الحدود — لا تسرّب CSS مشترك إلى واجهات Marriott المؤسّسيّة.
ما الذي كان معطّلاً فعلاً.
الضيافة الفاخرة ليست تجارة إلكترونيّة. ضيف يدفع 1200 دولار في الليلة لن يغفر تأخير زرّ 700ms، أو كلمة عربيّة مكسورة على السطر الخطأ، أو خروج يعرض العملة الخطأ لثانيتين. موقع العلامة له عقود من التقاليد (طباعة، ميزانيّة حركة، معالجة تصوير) يجب على أيّ امتداد على مستوى الفندق احترامها دون نسخها بسوء. المطلوب: بناء طبقة ضيف خاصّة بالفندق تشعر كـRitz-Carlton، لا كإضافة SaaS فوق Ritz-Carlton.
المساحة الصعبة من المشروع.
- 01تكامل العلامة دون تلوّث العلامة: صفحات الفندق تشارك الرأس/التذييل المؤسّسيّ دون وراثة أيّ CSS مخصّص ينحرف لاحقًا عند تحديث المؤسّسة.
- 02تكافؤ RTL: كلّ تخطيط، كلّ حركة، كلّ اتّجاه gradient اختُبر بالعربيّة. طباعة عربيّة فاخرة تتطلّب ضبط kerning + line-height مخصّص لا توفّره افتراضيّات Tailwind.
- 03واجهات iPad في الغرفة: أجهزة قديمة، شاشات مكسورة، لمس لزج — يجب أن تبقى الواجهة قابلة للاستخدام عند 30fps على iPad عمره 5 سنوات في ظروف ضيافة حقيقيّة.
- 04تكامل PMS (نظام إدارة الملكيّة) دون أن تصبح نسخة PMS: قراءة-غالبًا، قائمة على لقطات، ليست أبدًا مصدر الحقيقة لحالة الحجز.
- 05لوحة عمليّات يقرأها GM فعلًا في السادسة صباحًا — قابلة للطباعة، سريعة الفحص، لا مخطّط يتطلّب التحويم.
انتصارات هندسيّة تستحقّ التسمية.
تعايش نظامي إعادة تعيين CSS
موقع المؤسّسة يشحن normalize خاصّه. امتداد الفندق يجب أن يعزل عبر نطاق على نمط shadow-DOM (CSS Modules + بادئة صارمة) فلا تكسر تحديثات المؤسّسة صفحات الفندق ولا العكس.
محاذاة جدوليّة لأرقام عربيّة
تدفّق الحجز يعرض أسعارًا + تواريخ + أعداد غرف في جداول كثيفة. الأرقام العربيّة-الهنديّة تُرسم بعرض مختلف عن اللاتينيّة في بعض عائلات الخطوط — استقرّ القرار على `font-feature-settings: "tnum"` + سلسلة احتياط هنديّ-عربيّ.
اتّساق لقطة PMS
تغذية PMS تحدّث كلّ 5 دقائق؛ الواجهة يجب أن تعكس «آخر تحديث قبل 3 دقائق» بصدق دون عرض بيانات قديمة كواجهة واثقة. بنيت شارة طزاجة على كلّ استدعاء توفّر غرفة.
كيف يتشابك النظام.
طبقة الحافّة
طبقة التطبيق
طبقة البيانات
المراقبة + الإنذار
القرارات وراء كلّ اختيار.
Next.js 13 (واجهة)
- App Router + RSC يعطي TTFB دون ثانية دون خطّ إنتاج SSG منفصل.
- توجيه i18n بمسار فرعيّ للغة (/ar، /en) من الدرجة الأولى — لا إطار ترجمة طرف ثالث.
- إجراءات الخادم تتعامل مع إرسال النماذج دون رحلة API الذي يتطلّبها JavaScript عادة.
Postgres + RDS Multi-AZ
- Multi-AZ هو السبيل الوحيد لإعطاء منصّة فندق 24/7 وقت التشغيل الذي يعنيه SLA. failover دون 60 ثانية، مؤتمت.
- أعمدة JSONB تخزّن حمولات PMS شديدة التغيّر دون هجرة لكلّ حقل في المنبع.
AWS عوضًا عن GCP/Azure
- تقنيّة Marriott تتحدّث AWS — نطاقات Route 53، اتّحاد IAM، توحيد الفواتير كلّها موجودة سلفًا.
- منطقة KSA (me-south-1 البحرين + me-central-1 الإمارات) تعطي زمن استجابة دون 50ms لضيوف الفندق.
ما علّمنا إيّاه هذا البناء.
- الفخامة اتّساق، لا بريق. كلّ ميزانيّة حركة تُوجَد لتجعل الضيف ينسى أنّ البرنامج موجود.
- تكاملات PMS قراءة-غالبًا. لا تصبح مصدر حقيقة ثانٍ للحجوزات؛ ستخسر كلّ جدال تسوية مع مكتب الاستقبال.
- RTL ليس علم تهيئة — بل انضباط تصميم تطبّقه عند كلّ قرار تخطيط، كلّ منحنى حركة، كلّ اتّجاه gradient.