MLZ-Advanced
منصة شاملة لمبيعات الأراضي والعقارات: التقاط العملاء المحتملين بشكل عام، ورحلة عميل تعتمد على الخرائط، ولوحة تحكم داخلية كبيرة للمخزون والمبيعات والمدفوعات والموافقات.
Next.js 16
React 19
TypeScript
Prisma + MongoDB
Mapbox GL
SCSS
Recharts
نظرة عامة
منصة MLZ-Advanced هي منصة العمليات التشغيلية الداعمة لشركة مبيعات عقارية. يخدم أحد الجانبين الجمهور والعملاء عبر: صفحات الهبوط، ومتصفح قائم على الخرائط للمشاريع والقطع، ومسار إبداء الاهتمام بالشراء مع التحقق عبر الهاتف. أما الجانب الآخر فهو لوحة تحكم داخلية متقدمة يدير من خلالها فريق العمل عمليات المبيعات بالكامل، بما في ذلك المخزون والعملاء وطلبات الشراء والمدفوعات والموافقات والتقارير والتواصل. وهو تطبيق ضخم يعمل منذ فترة طويلة، ومقدم كتطبيق ويب تقدمي (PWA) يعمل بواجهة ثنائية اللغة بالعربية والإنجليزية.
المشكلة
تتضمن مبيعات الأراضي والقطع الكثير من الحالات (State) التي يصعب تتبعها بدقة. فكل قطعة تحمل تسعيراً وأبعاداً واتجاهاً وملكية ومرافق وحالة تتغير مع تقدمها نحو البيع. وينتقل العملاء من عميل محتمل إلى فرصة إلى مشترٍ، وتصل المدفوعات بهياكل مختلفة وتحتاج إلى موافقة، وتتطلب العديد من الإجراءات اعتماداً، بما في ذلك إعادة البيع والإلغاء وتغيير الصلاحيات. إنجاز كل هذا عبر جداول البيانات والأدوات المنفصلة لا يدعم التوسع. احتاجت الشركة إلى نظام واحد يعالج مسار الجمهور العام والآليات الداخلية، مع سجل التدقيق والموافقات التي تعتمد عليها العمليات العقارية.
دوري ومنهجية العمل
هذا مشروع جماعي كبير نما على مدار فترة طويلة، وقد عملت فيه كمهندس واجهة أمامية. تم تنظيم قاعدة الشيفرة (Codebase) بحيث تشترك الجماهير المختلفة جداً —الجمهور والعملاء والموظفون الداخليون— في عملية نشر واحدة مع البقاء منفصلين تماماً عبر مجموعات المسارات (Route groups) والصلاحيات. تركز الكثير من عملي في الواجهة الأمامية على الواجهات كثيفة التفاعل: الخرائط ومحررات التعديل المجمع والرسوم البيانية وعروض التفاصيل الكثيفة حيث يؤدي الموظفون مهامهم الفعلية، والتي بُنيت كمكونات عميل فوق بيانات مصيرة على الخادم وخاضعة للتحكم في الوصول.
الحزمة التقنية
الميزات الرئيسية
معرض الصور
التحديات والحلول
تخدم المنصة ثلاثة جماهير من تطبيق واحد، وهو أمر يسهل الوقوع في الخطأ فيه. يعتمد الهيكل على مجموعات مسارات Next.js لإبقاء الموقع العام ورحلة العميل ولوحة التحكم الداخلية معزولة من حيث الوظيفة والصلاحية مع مشاركة عملية نشر واحدة. يقوم تخطيط لوحة التحكم نفسه بتحميل المستخدم الحالي، ويستمد الوحدات الخاصة بقسمه، ويصفي التنقل وفقاً لذلك.
كان الأداء تحت حجم البيانات الفعلي هو الضغط المستمر الآخر. مخزون الأراضي يعني قوائم كبيرة وخرائط ثقيلة وصفحات تفاصيل غنية بالبيانات، لذلك يحتفظ التطبيق بجلب البيانات والتحقق من الصلاحيات على الخادم، ويخصص مكونات العميل للأجزاء التفاعلية حقاً: الخرائط ومحررات الجداول المجمعة والرسوم البيانية والنوافذ المنبثقة (Modals). تحافظ القوائم الافتراضية (Virtualized lists) على استجابة الجداول الطويلة، وتمر بيانات الخرائط عبر تحويل GeoJSON لكي تُصيّر القطع ككائنات مكانية حقيقية بدلاً من صور ثابتة.
النتيجة
منصة MLZ-Advanced هي نظام شامل يأخذ الأعمال العقارية من زائر عام وصولاً إلى عملية بيع مكتملة ومعتمدة ومدفوعة، مع تفاصيل المخزون وعمق نظام CRM ومسارات الموافقات التي تتطلبها تلك العملية. إن طول عمرها وحجمها —قاعدة شيفرة متعددة السنوات وعالية النشاط— يشيران إلى منصة أدارت بالفعل نشاطاً تجارياً حقيقياً وليست مجرد نموذج أولي.
هل تواجه تحدياً تقنياً مشابهاً في منتجك؟
شاركني الوضع الحالي للمنتج، والنتيجة المطلوبة، والمعوقات القائمة. وسأعتمد على ذلك في تحديد محطة تسليم أولى منطقية وعملية.
وظّف مطور Full-Stack