MAP DXB
منصة عقارية للإنتاج (سوق الإمارات)
التحدي
بناء منصة عقارية لسوق الإمارات يتطلب التعامل مع مجموعات بيانات عقارية كبيرة مع صور ثقيلة ودعم متعدد اللغات (EN/AR) وتصفية سريعة مع الحفاظ على الأداء عبر الأجهزة.
التقنيات المستخدمة
النهج الهندسي
تخطيط هندسة الواجهة الأمامية
هندست بنية الواجهة الأمامية الكاملة مع التركيز على صفحات القوائم الثقيلة بالصور وإمكانيات التصفية الديناميكية.
إدارة الحالة المدفوعة بواجهة برمجية
دمجت مع واجهة برمجية للخلفية باستخدام إدارة الحالة المنظمة لضمان تحديثات UI المتوقعة مع تغير بيانات العقارات.
البنية التحتية متعددة اللغات
نفّذت توجيه i18n المناسب للإنجليزية والعربية مع دعم RTL واعتبارات بنية URL.
تحسين الأداء
طبّقت تحسين الصور والتحميل الكسول وتقسيم الكود للحفاظ على التصفح السريع رغم الأصول الإعلامية الكبيرة.
القرارات التقنية الرئيسية
الخيارات التي شكّلت الهندسة وحددت قابلية الصيانة على المدى البعيد.
Next.js لـ SEO
استخدام Next.js مع SSR لقوائم العقارات
منصات العقارات تحتاج رؤية محركات البحث للحركة العضوية، مما يتطلب العرض من جانب الخادم
استراتيجية تحسين الصور
تنفيذ next/image مع srcsets المتجاوبة
صور العقارات هي نقطة البيع الرئيسية لكنها أيضاً أكبر عقبة للأداء
التوجيه متعدد اللغات القائم على URL
استخدام التوطين القائم على المسار (/en, /ar) بدلاً من النطاق الفرعي
نشر أبسط وفهرسة SEO أفضل لكلا الإصدارين اللغويين
التصفية من جانب العميل
تنفيذ منطق التصفية على الواجهة الأمامية مع حالة URL
تجربة مستخدم أسرع وحالات تصفية قابلة للمشاركة عبر معاملات URL
التحديات والحلول
أوقات تحميل الصفحة الأولية كانت 5+ ثوانٍ بسبب معارض صور العقارات الكبيرة
نفّذت التحميل التدريجي للصور مع عناصر نائبة ضبابية والتحميل الكسول للصور أسفل الطية
تخطيط RTL العربي كان يكسر تخطيطات المكونات ويتسبب في أخطاء بصرية
استخدمت خصائص CSS المنطقية (start/end بدلاً من left/right) واختبرت جميع المكونات في كلا الاتجاهين
تحديثات بيانات العقارات لم تكن تنعكس في الوقت الحقيقي للمستخدمين
نفّذت تحديثات UI متفائلة مع معالجة الأخطاء الصحيحة واستراتيجيات إبطال ذاكرة التخزين المؤقت
النتائج والأثر
أُطلق MAP DXB كمنصة عقارية ثنائية اللغة عالية الأداء تخدم سوق الإمارات مع تصفح عقارات سريع وبحث وظيفي.
الدروس المستفادة
مشاريع العملاء تتطلب تحقيق التوازن بين الهندسة المثالية والقيود الواقعية. أحياناً 'جيد بما يكفي' المشحون أفضل من 'المثالي' المتأخر.