VCM
تطبيق ويب قائم على الأدوار يضع كل ما يحتاجه المجمع السكني في واجهة واحدة: الملاك، والمقيمون، والمالية، والحجوزات، والطلبات، والتقارير.
React 19
React Router 7
Vite
TypeScript
SCSS
Jotai
SWR
Firebase Cloud Messaging
نظرة عامة
تُعد VCM الواجهة الأمامية لمنصة إدارة العقارات والمجمعات السكنية التي تخدم فئتين مختلفتين تماماً من المستخدمين من خلال قاعدة الشيفرة البرمجية ذاتها. يستخدمها المديرون لتشغيل العمليات: العقارات، والمقيمون، والمالية، والحوادث، والتقارير، والتواصل. بينما يستخدمها الملاك والمقيمون لإدارة شؤونهم الخاصة، بما في ذلك المدفوعات، وطلبات الخدمة، وحجز المرافق، والمستندات، ومعلومات المجمع. يجمع هذا المنتج كماً من مسارات العمل اليدوية المتفرقة في مكان واحد متناسق.
المشكلة
تتطلب إدارة المجمعات السكنية التوفيق بين العديد من المهام الحيوية المتزامنة: سجلات المقيمين والملاك، وطلبات الصيانة والخدمة، وحجوزات المرافق، والشكاوى، وسجلات الدفع، وكشوف الحسابات، وتقارير الفحص والحوادث، والتعميمات الإدارية. وعندما تتوزع هذه العمليات عبر جداول البيانات ورسائل البريد الإلكتروني وأدوات غير مترابطة، تضيع التفاصيل المهمة. تمثل التحدي في بناء واجهة موحدة تخدم فريق العمليات التشغيلية والمقيمين معاً — وهما تجربتان مختلفتان جوهرياً — مع الحفاظ على سرعة المنتج، وتناسقه، وسهولة صيانته وتطويره مع استمرار إضافة المزيد من مسارات العمل.
دوري ومنهجية العمل
توليت قيادة بناء الواجهة الأمامية: معمارية التطبيق، وطبقة البيانات المشتركة، وأنماط واجهة المستخدم القابلة لإعادة الاستخدام، والهيكل القائم على الأدوار الذي يربط بين مختلف الأجزاء. وبصفتي المساهم الأكبر في قاعدة الشيفرة البرمجية، قمت بوضع المعايير والأسس التقنية التي اتبعها سائر الفريق. وكان تركيزي الأساسي منصباً على تجنب المشكلة الشائعة في مثل هذه التطبيقات، والمتمثلة في إعادة كتابة منطق الجداول والمرشحات والنماذج لكل كيان جديد. وبدلاً من ذلك، قمت ببناء مجموعة محدودة من اللبنات الأساسية المتينة مع إطار عمل يعتمد على الصلاحيات، ليصبح تضمين أي مسار عمل جديد مجرد عملية تركيب وتجميع لعناصر جاهزة بدلاً من بنائها من الصفر.
الحزمة التقنية
الميزات الرئيسية
معرض الصور
التحديات والحلول
كان التحدي الرئيسي يتمثل في اتساع نطاق واجهة الاستخدام: عشرات الأنواع من الكيانات والبيانات، يحتاج كل منها إلى العرض والتصفية والإنشاء والتعديل والتصدير، عبر دورين مختلفين للمستخدمين. وكانت إعادة بناء ذلك لكل ميزة ستؤدي حتماً إلى تطبيق غير قابل للصيانة. وقد تغلبت على ذلك من خلال لبنات بناء أساسية قابلة لإعادة الاستخدام ونموذج تنقل قابل للضبط ومدفوع بالصلاحيات، بحيث تتكيف الواجهة مع ما يمنحه الخادم الخلفي دون الحاجة إلى تضمين القوائم برمجياً أو تكرار المنطق البرمجي.
كان المطلب المتكرر الآخر هو إدارة حالة التطبيق بصورة تصمد أمام الاستخدام العملي الواقعي. اعتمدت على معلمات الاستعلام في رابط URL لتوجيه تقسيم الصفحات وتصفية القوائم، مما جعل طرق العرض قابلة للمشاركة، وضمن عمل أزرار الرجوع والتقدم في المتصفح بانسيابية، مع الحفاظ على حالة الجداول عند تحديث الصفحة. كما قمت بمركزة المصادقة ضمن الحالة المشتركة وطبقة الطلبات لتبقى مكونات الميزات خفيفة، وأضفت حدوداً لمعالجة الأخطاء وحالات التحميل وإعادة توجيه سلسة عند انتهاء الجلسة حتى لا تتعطل لوحة التحكم المعقدة بصمت.
النتيجة
تُعد VCM واجهة أمامية موحدة تخدم بكفاءة كلا طرفي إدارة المجمعات. تدير فرق العمليات دورة حياة العقار الكاملة من مساحة عمل إدارية واحدة، بينما يستفيد المقيمون من الخدمات الذاتية لإتمام المدفوعات والطلبات والحجوزات والوصول إلى المستندات. وبفضل بنائها على لبنات برمجية مشتركة وهيكل يستند إلى الصلاحيات، تواصل قاعدة الشيفرة البرمجية التوسع مع إضافة مسارات عمل جديدة دون أن تفقد خفتها وأداءها.
هل تواجه تحدياً تقنياً مشابهاً في منتجك؟
شاركني الوضع الحالي للمنتج، والنتيجة المطلوبة، والمعوقات القائمة. وسأعتمد على ذلك في تحديد محطة تسليم أولى منطقية وعملية.
خدمات تطوير البرمجيات كخدمة