جزئیات شغل

توسعه و کدنویسی صفحه "املاک مجازی" (Virtual Real Estate Page) با قابلیت فیلتر، نمایش جزئیات، و اتصال به سامانه متاورس رنگ ( frontend trainee )

تجربه: 3

سن: 18 الی 40

محدوده حقوق و دستمزد: قابل مذاکره

جای خالی: 1

طبیعت شغلی : پیمانی

تاریخ ارسال : 2025.10.25

آخرین تاریخ : 2025.12.16

ساختار کلی صفحه

1. نمایش لیست املاک
  • نمایش لیست تمام املاک متاورس رنگ به‌صورت کارت (Card View).

  • هر کارت شامل اطلاعات زیر باشد:

    • شناسه VOD

    • آدرس ملک

    • تراکم

    • وضعیت قیمت‌گذاری (توسط کاربر / سیستم)

    • نوع کاربری (تجاری، مسکونی، تفریحی و …)

    • وضعیت مالکیت (خصوصی، عمومی، آزاد)

    • وضعیت خرید (قابل خرید از سیستم / از سایر شهروندان / غیرقابل خرید)

    • سه گزینه کنترلی زیر کارت

2. فیلترها و تفکیک‌ها

در بالای لیست املاک، نوار فیلترها قرار گیرد تا کاربران بتوانند املاک را بر اساس معیارهای مختلف جستجو و محدود کنند.

فیلترهای مورد نیاز:

  • فیلتر بر اساس قیمت (Range Slider)

  • فیلتر بر اساس نوع کاربری

  • فیلتر بر اساس قیمت‌گذاری توسط کاربران (ارزی)

  • فیلتر بر اساس قیمت‌گذاری توسط سیستم (ابزاری)

  • فیلتر بر اساس وضعیت خرید (از سیستم / از شهروندان)

  • فیلتر بر اساس مناطق یا آبادی‌ها

  • گزینه نمایش همه املاک (حالت پیش‌فرض در اولین بارگذاری)

3. صفحه جزئیات ملک (Detail Page)

با کلیک روی هر کارت، کاربر وارد صفحه جزئیات آن ملک می‌شود.
آدرس صفحه به‌صورت زیر باشد:

/virtual-real-estate/[property-id]

در این صفحه باید اطلاعات زیر نمایش داده شود:

  • تصویر ملک

  • موقعیت مکانی روی نقشه (Map Integration)

  • تمامی اطلاعات نمایش داده‌شده در مودال ملک (VOD، تراکم، کاربری، وضعیت مالکیت، قیمت و ...)

دکمه "خرید" یا "پیشنهاد خرید" که با کلیک روی آن، باکس لاگین باز شود و پس از ورود، کاربر به محیط اصلی متاورس رنگ هدایت شود.
4. سئو و دسترسی عمومی

  • صفحه جزئیات ملک باید قابل ایندکس در گوگل باشد.

  • استفاده از Schema.org (Property / RealEstate Schema) برای داده‌های ساختار یافته (Structured Data).

  • متاتگ‌ها و عنوان صفحه بر اساس نام و موقعیت ملک تنظیم شود.

  • داده‌ها در سمت سرور (SSR – Next.js) بارگذاری شوند تا قابلیت SEO کامل حفظ شود.

5. اتصال به سامانه اصلی متاورس رنگ

  • در حالت خرید، پس از لاگین موفق، کاربر به متاورس رنگ (ماژول خرید ملک) ارجاع داده می‌شود.

  • ارتباط از طریق پارامترهای امن (Token, Session ID) برای انتقال شناسه ملک و وضعیت خرید انجام گیرد.

  • داده‌های صفحه (لیست املاک و جزئیات هر ملک) از طریق API داخلی دریافت شوند.

جزئیات فنی پیشنهادی

  • فریم‌ورک: Next.js 

  • طراحی: مطابق فیگما و استفاده از سیستم دیزاین فعلی سامانه.

  • نقشه: Mapbox / Leaflet.js

  • فیلترها: Dynamic Filters با قابلیت ترکیب هم‌زمان چند فیلتر.

  • داده‌ها: API / GraphQL

  • ترجمه: اتصال به سیستم i18n (فارسی / انگلیسی)

  • مدیریت حالت: Redux Toolkit / Zustand

  • رندر سمت سرور (SSR) برای سئو کامل صفحه جزئیات.

معیار پذیرش (Acceptance Criteria)

✅ لیست املاک با تمام فیلدهای مورد نیاز و ظاهر مطابق طراحی نمایش داده شود.
✅ فیلترها به‌صورت Realtime و بدون رفرش عمل کنند.
✅ کلیک روی هر کارت، کاربر را به مسیر /virtual-real-estate/[id] منتقل کند.
✅ صفحه جزئیات ملک شامل نقشه، تصویر، اطلاعات کامل و دکمه خرید باشد.
✅ فیلتر حریم خصوصی برای اطلاعات مالکیت خصوصی فعال باشد.
✅ دکمه خرید کاربر را ابتدا به صفحه ورود و سپس به محیط اصلی متاورس رنگ منتقل کند.
✅ صفحات به‌صورت SEO-Friendly و با Schema معتبر باشند.
✅ عملکرد ریسپانسیو و بهینه برای موبایل و دسکتاپ.

تحویل‌دادنی‌ها (Deliverables)

  • کدنویسی کامل صفحه "املاک مجازی"

  • API فراخوانی لیست و جزئیات املاک

  • فیلترهای پویا و اسلایدر قیمت

  • صفحه جزئیات ملک (SEO + SSR)

  • باکس ورود و ارجاع به متاورس رنگ

اولویت

خیلی بالا — این صفحه یکی از بخش‌های اصلی سامانه و vitrine عمومی املاک متاورس رنگ است و نقش کلیدی در دسترسی کاربران و خرید دارایی‌ها دارد.

مشخصات کار تعریف شده

عنوان شغلی: توسعه و کدنویسی صفحه "املاک مجازی" (Virtual Real Estate Page) با قابلیت فیلتر، نمایش جزئیات، و اتصال به سامانه متاورس رنگ

تعیین: frontend trainee

تجربه: 3

سن: 18 الی 40

محدوده حقوق و دستمزد: قابل مذاکره

جای خالی: 1

طبیعت شغلی : پیمانی

تاریخ ارسال : 2025.10.25

آخرین تاریخ : 2025.12.16

اکنون درخواست دهید