منصة عقارية
Hompper
منصة عقارية ثنائية اللغة تساعد المشترين والمستأجرين في سوريا على اكتشاف العقارات والوكلاء والتصفح عبر الخريطة والتواصل المباشر ضمن تجربة متجاوبة واحدة.
الدور
مطور Frontend
التقنيات
01 / نظرة عامة
يساعد Hompper المستخدمين على اكتشاف العقارات ضمن المدن السورية من خلال واجهة واضحة تركز على الوصول السريع للمعلومة والإجراء. تدعم التجربة اللغتين العربية والإنكليزية وتصفح العقارات والوكلاء والخريطة والتواصل عبر الهاتف وواتساب.
02 / التحدي
تحتوي الإعلانات العقارية على معلومات كثيرة ومتنوعة مثل الموقع والسعر والمساحة والغرف وحالة التفاوض ووسائل التواصل. وكان من الضروري الحفاظ على وضوح الواجهة في اتجاهي RTL وLTR وعلى شاشات الموبايل والديسكتوب.
03 / الحل
نظمت الواجهة بالاعتماد على بطاقات عقارات قابلة لإعادة الاستخدام وأنماط Layout تراعي اتجاه اللغة، مع إبراز المعلومات الأساسية ووضع إجراءات الاتصال وواتساب والتفاصيل بالقرب من كل إعلان. النتيجة تجربة تصفح متجاوبة وقابلة للتوسع لمختلف أنواع العقارات والمدن.
04 / الأساليب ومكان تطبيقها
ليس فقط ماذا استُخدم، بل أين ولماذا.
الأسلوب
بنية مكونات قابلة لإعادة الاستخدام
أين طُبّق؟
بطاقات العقارات وبيانات السعر والموقع والغرف والمساحة وحالة التفاوض وإجراءات التواصل المتكررة.
الأسلوب
Layout متجاوب يراعي اتجاه اللغة
أين طُبّق؟
التنقل وشبكات العقارات ومحاذاة المحتوى والإجراءات وواجهات العربي والإنكليزي على الموبايل والديسكتوب.
الأسلوب
ترتيب معلومات موجه للإجراء
أين طُبّق؟
كل إعلان يبقي السعر والحقائق الأساسية وأزرار الاتصال وواتساب والتفاصيل واضحة وسهلة المسح البصري.
الأسلوب
أنماط واجهة مبنية على البيانات
أين طُبّق؟
نفس نظام البطاقات يدعم البيع والإيجار والمنازل والمعامل والمدن المختلفة ووجود واتساب أو عدمه وحالة قابلية التفاوض.
05 / الميزات الرئيسية
القدرات الأساسية التي بُني عليها Hompper.
واجهات عربية وإنكليزية مع دعم RTL وLTR
بطاقات عقارات مميزة ومتجاوبة
إجراءات اتصال مباشر عبر الهاتف وواتساب
مسارات لاكتشاف العقارات والوكلاء والتصفح عبر الخريطة
أنماط UI قابلة لإعادة الاستخدام للسعر والموقع والغرف والمساحة والحالة
06 / مقالات مرتبطة
شرح أعمق للقرارات الهندسية المستخدمة في هذا النوع من المنتجات.
8 دقائق قراءة
كيف أبني بنية Frontend قابلة للتوسع
منهج عملي لتنظيم مشاريع الواجهات عبر ملكية الميزات وحدود البيانات المكتوبة بالأنواع وحالات التحميل والخطأ وبنية تسهّل التطوير والإطلاق.
قراءة المقال7 دقائق قراءة
بناء API Layer احترافي باستخدام TypeScript
طريقة فصل تفاصيل الاتصال عن الشاشات وتوحيد الأخطاء والأنواع والبحث والـPagination لتسهيل صيانة تطبيقات React وReact Native.
قراءة المقال7 دقائق قراءة
هندسة الواجهات للأنظمة التشغيلية
دروس من بناء واجهات لأنظمة المشافي وإدارة القضايا ولوحات التحكم والمنتجات ذات المسارات الكثيفة، حيث الوضوح ومعالجة الفشل أهم من الاستعراض البصري.
قراءة المقال