بازگشت به لیست پروژه‌هاB2C E-Commerce & Interactive 3D/AR
محصولات لوکس دکوراسیون داخلی، بازارهای سوئیس و آلمانتوسعه‌دهنده فرانت‌اند End-to-End

فروشگاه بین‌المللی فرش و دکوراسیون با تجربه سه‌بعدی و واقعیت افزوده (Royal Creations)

Royal Creations یک فروشگاه اینترنتی B2C در حوزه فرش و محصولات دکوراسیون داخلی است که برای بازارهای سوئیس و آلمان توسعه داده شد. هدف پروژه، ساخت تجربه‌ای فراتر از یک فروشگاه سنتی بود؛ تجربه‌ای که در آن مشتری می‌تواند محصول را به صورت تعاملی سه‌بعدی ببیند، آن را با واقعیت افزوده (AR) در فضای واقعی خانه خود پیش‌نمایش کند، فرش دلخواهش را بر اساس شکل، رنگ، روش تولید، نوع الیاف و ابعاد پیکربندی کند و در نهایت خرید آنلاین را با Stripe تکمیل کند یا برای مشاوره حضوری درخواست ثبت کند. توسعه کامل Front-End این پلتفرم از پایه بر عهده من بود.

مشاهده آنلاین وب‌سایت
نمای کلی پروژه Royal Creations

خلاصه پروژه در یک نگاه

نقش من
توسعه‌دهنده فرانت‌اند End-to-End
نوع محصول
B2C E-Commerce & Interactive 3D/AR
تکنولوژی‌های کلیدی
Next.js (App Router)، React 19، TypeScript
مستندات بصری
۲۰ نما شامل ۲ ویدیو

مسئله و نقش من

چرا این محصول ساخته شد و دقیقاً کدام بخش‌ها بر عهده من بود.

چالش اصلی محصول

انتخاب فرش تا حد زیادی به درک بصری و تناسب محصول با فضای واقعی خانه وابسته است و در یک فروشگاه متکی بر تصاویر ثابت، بخش بزرگی از این ارزیابی به تصور ذهنی مشتری واگذار می‌شود؛ این محدودیت وقتی محصول قابل سفارشی‌سازی باشد و کاربر بخواهد ترکیب‌های مختلفی از ویژگی‌ها را بررسی کند، جدی‌تر هم می‌شود. چالش محصول، پر کردن فاصله میان مشاهده محصول در وب‌سایت و تصور آن در محیط واقعی بود؛ آن هم بدون اینکه هزینه عملکردی محتوای تعاملی سه‌بعدی و AR، سرعت بارگذاری و پاسخ‌گویی صفحات فروشگاه را از بین ببرد.

نقش و مسئولیت‌های من

توسعه Front-End فروشگاه از پایه با تمرکز بر تجربه خرید، قابلیت‌های تعاملی و Performance. دامنه کار من شامل صفحات کاتالوگ، دسته‌بندی و جست‌وجو، صفحه جزئیات محصول با نمایش سه‌بعدی و دسترسی به تجربه AR، ماژول اختصاصی پیکربندی فرش و پیش‌نمایش AR محصول پیکربندی‌شده، جریان ثبت درخواست مشاوره حضوری، پیاده‌سازی تجربه چندزبانه (i18n)، یکپارچه‌سازی پرداخت Stripe از طریق Next.js API Routes، صفحات Checkout و پرداخت و مشاهده سفارش‌ها در داشبورد مشتری، و در نهایت به‌کارگیری Lazy Loading و Rendering بهینه‌شده به همراه ارزیابی مستمر صفحات با PageSpeed Insights بود.

ویژگی‌های کلیدی

۹ مورد از مهم‌ترین دستاوردهای فنی این پروژه.

  • توسعه کامل فرانت‌اند فروشگاه B2C از پایه برای بازارهای سوئیس و آلمان
  • نمایش تعاملی سه‌بعدی محصول و تجربه واقعیت افزوده (AR) بر پایه مدل‌های GLB و USDZ
  • ماژول اختصاصی پیکربندی فرش بر اساس Shape، Color، Production Method، Fiber Type و Dimensions
  • امکان مشاهده محصولِ پیکربندی‌شده در تجربه AR و اتصال مستقیم سفارشی‌سازی به Visualization
  • جریان ثبت درخواست مشاوره حضوری (In-Home Consultation) همراه با انتخاب زمان، ارسال فایل و پرداخت آنلاین
  • یکپارچه‌سازی پرداخت بین‌المللی Stripe از طریق Next.js API Routes و صفحه سفارش‌ها در داشبورد مشتری
  • پشتیبانی از تجربه چندزبانه (i18n) متناسب با مخاطبان بازارهای هدف
  • به‌کارگیری Lazy Loading و Rendering بهینه‌شده برای مهار هزینه عملکردی محتوای تعاملی سه‌بعدی
  • ثبت امتیاز ۹۰+ در PageSpeed Insights برای موبایل و دسکتاپ بر اساس گزارش‌های پیوست‌شده پروژه

چالش‌های مهندسی و راه‌حل‌ها

مسائلی که در مسیر توسعه پیش آمد و تصمیم فنی‌ای که برای هرکدام گرفته شد.

مدیریت هزینه عملکردی محتوای سه‌بعدی و واقعیت افزوده

قابلیت‌های 3D و AR علاوه بر انتقال حجم قابل توجهی از منابع، هزینه پردازشی هم ایجاد می‌کنند: دریافت و آماده‌سازی فایل‌های مدل، Rendering محتوای تعاملی، مصرف منابع دستگاه حین تعامل و رقابت عملیات سنگین با کارهای ضروری رابط کاربری روی Main Thread که می‌تواند به افت Frame Rate و کند شدن بارگذاری اولیه منجر شود. راهبرد پروژه، ترکیب Lazy Loading برای به‌تعویق‌انداختن دریافت منابع تا لحظه نیاز واقعی کاربر و Rendering بهینه‌شده برای جلوگیری از مسدود شدن Main Thread بود؛ به این ترتیب بار اولیه صفحه سبک می‌ماند و منابع سنگین فقط در مسیر تعامل واقعی کاربر وارد می‌شوند.

ارائه مدل‌های سه‌بعدی و اجرای تجربه AR با فرمت‌های GLB و USDZ

تجربه سه‌بعدی و AR بر پایه مدل‌های GLB و USDZ ارائه شد؛ دو قالب دارایی سه‌بعدی که مسیرهای نمایش وب و واقعیت افزوده را پوشش می‌دهند. تفکیک دقیق میان «قالب دارایی» و «موتور رندر» در این پروژه اهمیت داشت: انتخاب فرمت‌ها باید با مسیرهای پشتیبانی‌شده نمایش روی دستگاه‌های مختلف هم‌خوان می‌ماند تا کاربر در هر دستگاه بتواند به مناسب‌ترین شکل محصول را ببیند.

اتصال تجربه سفارشی‌سازی به Visualization

Configurator صرفاً یک فرم انتخاب ویژگی نیست؛ ارزش آن در پیوند میان گزینه‌های انتخاب‌شده و تجربه بصری محصول است. از منظر فرانت‌اند، این تجربه نیازمند هماهنگی دقیق میان کنترل‌های رابط کاربری و نمایش محصول بود و وقتی پیش‌نمایش AR هم به مسیر اضافه می‌شود، پیوستگی میان پیکربندی و پیش‌نمایش اهمیت بیشتری پیدا می‌کند؛ کاربر باید اثر هر انتخاب را بلافاصله در ظاهر محصول ببیند تا تصمیم‌گیری برایش ملموس شود.

یکپارچه‌سازی جریان‌های متفاوت در یک فروشگاه واحد

در این محصول چند نوع تعامل کاملاً متفاوت کنار هم قرار می‌گیرند: کشف و بررسی محصول، مشاهده سه‌بعدی و AR، سفارشی‌سازی، ثبت درخواست مشاوره حضوری، Checkout و پرداخت، مشاهده سفارش‌ها و تجربه چندزبانه. چالش فقط ساخت صفحات مجزا نبود، بلکه حفظ انسجام تجربه برای کاربری بود که ممکن است از کشف محصول به سفارشی‌سازی، از آنجا به پرداخت و سپس به داشبورد سفارش‌ها برسد.

امکانات کلیدی محصول

۶ قابلیتی که تجربه کاربری این محصول را شکل می‌دهند.

Discovery

کاتالوگ، دسته‌بندی و جست‌وجوی محصولات

نقطه ورود تجربه خرید؛ مشتری از طریق صفحات دسته‌بندی و جست‌وجو محصولات را مرور می‌کند و برای بررسی جزئیات به صفحه محصول می‌رود. حتی قابلیت‌های پیشرفته‌ای مثل 3D و AR زمانی ارزش پیدا می‌کنند که کاربر ابتدا بتواند محصول متناسب با نیازش را پیدا کند.

3D & AR

صفحه محصول با نمایش سه‌بعدی و واقعیت افزوده

به‌جای محدود کردن مشتری به تصاویر ثابت، صفحه محصول امکان بررسی تعاملی مدل سه‌بعدی فرش را فراهم می‌کند و با قابلیت AR، پیش‌نمایش محصول در فضای فیزیکی کاربر در دسترس قرار می‌گیرد. مدل‌ها با فرمت‌های GLB و USDZ ارائه می‌شوند.

Customization

پیکربندی اختصاصی فرش (Custom Rug Configurator)

اگر مشتری محصول مناسبی میان گزینه‌های آماده پیدا نکند، می‌تواند فرش موردنظرش را بر اساس Shape، Color، Production Method، Fiber Type و Dimensions پیکربندی کند، نتیجه را به صورت تعاملی ببیند و همان پیکربندی را در تجربه AR بررسی کند.

Hybrid Service

رزرو مشاوره حضوری (In-Home Consultation Booking)

مشتری می‌تواند از طریق فرم اختصاصی برای بازدید و مشاوره حضوری درخواست ثبت کند، زمان مناسب را انتخاب کند، پرداخت آنلاین انجام دهد و اطلاعات یا فایل‌های لازم را پیش از بازدید در اختیار تیم بگذارد؛ جریانی که فروشگاه دیجیتال را به یک سرویس واقعی خارج از وب متصل می‌کند.

Localization

بومی‌سازی تجربه خرید برای بازارهای هدف (i18n)

با توجه به اینکه بازار هدف پروژه سوئیس و آلمان است، پشتیبانی از تجربه چندزبانه یکی از بخش‌های کلیدی فروشگاه محسوب می‌شود و امکان ارائه تجربه‌ای متناسب با مخاطبان زبان‌های مختلف را فراهم می‌کند.

Payments

Checkout، پرداخت Stripe و داشبورد سفارش‌های مشتری

مسیر خرید با صفحات Checkout و پرداخت ادامه پیدا می‌کند و یکپارچه‌سازی Stripe از طریق Next.js API Routes انجام شده است. تجربه مشتری با تکمیل خرید تمام نمی‌شود؛ صفحه سفارش‌ها در داشبورد، دسترسی به اطلاعات سفارش‌های ثبت‌شده را پس از خرید فراهم می‌کند.

دستاوردها و نتایج

نتیجه پروژه، یک فروشگاه اینترنتی B2C با تجربه‌ای فراتر از کاتالوگ و Checkout سنتی بود: صفحه محصول دیگر فقط محل نمایش اطلاعات نیست و قابلیت‌های 3D و AR به مشتری امکان بررسی تعاملی محصول را می‌دهند، Configurator دامنه انتخاب را از محصولات آماده فراتر می‌برد و مشاوره حضوری، فروشگاه دیجیتال را به یک سرویس واقعی متصل می‌کند. مهم‌ترین آموخته مهندسی من در این پروژه این بود که افزودن قابلیت‌های تعاملی سنگین باید همواره همراه با مدیریت هزینه Rendering، بارگذاری منابع و پاسخ‌گویی رابط کاربری انجام شود؛ Lazy Loading و Rendering بهینه‌شده راهبردهای اصلی مهار این پیچیدگی بودند و PageSpeed Insights بخشی از فرایند مستمر ارزیابی عملکرد باقی ماند. بر اساس گزارش‌های پیوست‌شده پروژه، امتیازهای ۹۰+ در موبایل و دسکتاپ ثبت شده‌اند و تصاویر گزارش‌ها در ادامه همین صفحه قابل بررسی هستند.

تکنولوژی‌ها و ابزارها

  • Next.js (App Router)
  • React 19
  • TypeScript

چارچوب و لایه فرانت‌اند

  • Next.js
  • React
  • TypeScript
  • Next.js API Routes

تجربه سه‌بعدی و واقعیت افزوده

  • GLB (3D Model Format)
  • USDZ (AR Model Format)
  • Interactive 3D Product Viewer
  • AR In-Room Preview

پرداخت و بومی‌سازی

  • Stripe (International Payment)
  • Payment Integration via API Routes
  • i18n (Multi-language Experience)

عملکرد و بهینه‌سازی

  • Lazy Loading
  • Optimized Rendering
  • Main Thread Protection
  • PageSpeed Insights Auditing

علاقه‌مند به گفتگو درباره این پروژه یا همکاری هستید؟

می‌توانیم پیرامون معماری سیستم، جزئیات فنی و فرصت‌های همکاری گفتگو کنیم.

ارتباط مستقیم با مندانلود رزومه (PDF)