بازگشت به لیست پروژه‌هاB2B Marketplace & Supply Chain
تأمین عمده و زنجیره دیجیتال هتلداریمعمار و توسعه‌دهنده ارشد فرانت‌اند (Front-End Architect & Lead)

پلتفرم B2B تأمین و خرید عمده تجهیزات و محصولات هتلی (Sohotel)

پلتفرم sohotel.ir یک سامانه جامع B2B برای ارتباط مستقیم میان خریداران هتلی و تأمین‌کنندگان تجهیزات و محصولات تخصصی هتل‌ها است. این سامانه با هدف فراهم‌کردن بستری یکپارچه برای مدیریت فرایندهای خرید عمده، بررسی کاتالوگ محصولات، ارسال و پیگیری پیشنهادهای قیمت (Quotes) و تعامل تجاری میان هتل‌ها و تولیدکنندگان توسعه یافته است.

نمای کلی پروژه Sohotel

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

نقش من
معمار و توسعه‌دهنده ارشد فرانت‌اند (Front-End Architect & Lead)
نوع محصول
B2B Marketplace & Supply Chain
تکنولوژی‌های کلیدی
Next.js (App Router)، React 19، TypeScript، GraphQL & REST APIs، Zustand & State Design، Tailwind CSS
مستندات بصری
۱۵ نما

مسئله و نقش من

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

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

فرایندهای سنتی خرید و تأمین تجهیزات هتلی همواره با چالش‌هایی چون مذاکرات پراکنده، صدور دستی پیش‌فاکتورها، عدم شفافیت در قیمت‌گذاری عمده و دشواری رهگیری پیشنهادها مواجه بود. چالش اصلی، مهندسی پلتفرمی بود که ضمن تفکیک کامل نیازمندی‌های خریداران و فروشندگان با سطوح دسترسی چندگانه (RBAC)، جریان پیچیده مذاکره و گردش پیشنهاد قیمت (Quote Workflow) را به شکلی ساختاریافته، بلادرنگ و با بالاترین کارایی رابط کاربری پیاده‌سازی کند.

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

معماری و توسعه کامل لایه Front-End بر پایه Next.js App Router و React، طراحی و پیاده‌سازی داشبوردهای مجزای خریدار و تأمین‌کننده، پیاده‌سازی ماشین وضعیت گردش پیشنهادهای قیمت، ارتباط داده‌ای با GraphQL و TanStack Query، یکپارچه‌سازی سیستم چندزبانه (i18next) و پیاده‌سازی تکنیک‌های بهینه‌سازی عملکرد نظیر Partial Pre-Rendering (PPR) و React Compiler.

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

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

  • معماری رابط‌های کاربری کاملاً مجزا برای خریداران هتلی و تأمین‌کنندگان کالا با تجارب کاربری تخصصی
  • طراحی و پیاده‌سازی ماشین وضعیت گردش چندمرحله‌ای استعلام و پیشنهاد قیمت (Quotes Workflow)
  • یکپارچه‌سازی لایه ارتباط داده‌ای با GraphQL، تولید خودکار تایپ‌ها با GraphQL Code Generator و کش هوشمند با TanStack Query
  • سیستم مدیریت اعضای تیم و کنترل دسترسی بر پایه نقش (Role-Based Access Control یا RBAC)
  • به‌کارگیری قابلیت‌های پیشرفته Next.js نظیر Partial Pre-Rendering (PPR)، Cache Components و React Compiler
  • پیام‌رسانی داخلی پیرامون سفارش، تبادل فایل و مدارک، تولید پیش‌فاکتور (Proforma Invoice) و ذخیره فهرست‌های خرید عمده
  • طراحی کاملاً واکنش‌گرا (Responsive) برای نماهای دسکتاپ، تبلت و موبایل با پشتیبانی از سیستم چندزبانه i18next

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

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

مدیریت وضعیت‌های پیچیده و چرخه‌ی حیات گردش پیشنهاد قیمت (Quote Workflow)

فرایند مذاکره شامل وضعیت‌های متعددی نظیر ارسال پیشنهاد، مذاکره، پذیرش و رد پیشنهاد قیمت میان خریدار و تأمین‌کننده بود. با پیاده‌سازی استیت‌ماشین کلاینت و ترکیب Zustand با کش سلسله‌مراتبی TanStack Query و اعتبارسنجی فرم‌ها با Zod، تمامی وضعیت‌ها بدون تداخل و با صحت کامل داده‌ها مدیریت شدند.

بهینه‌سازی لود و سرعت پاسخ‌دهی در صفحات پرداده (Performance Optimization)

با بهره‌گیری از Partial Pre-Rendering (PPR) جهت ترکیب شل استاتیک با استریمینگ داده‌های لحظه‌ای، استفاده از Cache Components و کامپایل بهینه‌شده با React Compiler، بهبود تقریبی ۲۰ درصدی در سرعت پاسخ‌دهی و زمان بارگذاری صفحات گزارش شد.

جداسازی معماری دسترسی و پنل‌ها با Role-Based Access Control (RBAC)

تأمین‌کنندگان نیازمند تعریف نقش‌های سازمانی با مجوزهای تفکیک‌شده برای مشاهده سفارش‌ها، ویرایش محصولات یا پاسخ به پیشنهادها بودند. لایه محافظت از مسیرها (Route Guards) و رندرینگ شرطی اجزای UI بر پایه پرمیشن‌ها، امنیت و سادگی استفاده را تضمین کرد.

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

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

Buyer Experience

پنل جامع خریدار، کاتالوگ محصولات و کشف تأمین‌کنندگان

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

B2B Negotiation

سیستم استعلام و گردش پیشنهادهای قیمت (Quote Workflow)

فرایند ثبت استعلام خرید عمده، ارسال پیشنهادهای قیمت متقابل، چت و پیام‌رسانی داخلی پیرامون سفارش، تبادل مدارک و تولید پیش‌فاکتور رسمی (Proforma Invoice) در وضعیت‌های مختلف.

Seller Operations

پنل تأمین‌کننده، مدیریت سفارش‌ها و اعضای تیم (RBAC)

داشبورد عملیاتی فروشندگان برای مدیریت موجودی و کاتالوگ کالاها، پردازش و پیگیری وضعیت سفارش‌ها، مدیریت اعضای تیم فروش و پیکربندی دقیق نقش‌ها و مجوزهای سازمانی.

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

پلتفرم sohotel.ir بستری پایدار و توسعه‌پذیر برای مبادلات عمده زنجیره تأمین هتل‌ها فراهم کرده است. پیاده‌سازی موفق پنل‌های تفکیک‌شده خریدار و تأمین‌کننده، اتوماسیون جریان مذاکره قیمت (Quotes) و بهبود عملکرد با استفاده از مدرن‌ترین قابلیت‌های اکوسیستم React و Next.js، ساختار این سامانه را برای پاسخ‌گویی به نیازهای مقیاس‌پذیر تجارت B2B مهیا ساخته است.

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

  • Next.js (App Router)
  • React 19
  • TypeScript
  • GraphQL & REST APIs
  • Zustand & State Design
  • Tailwind CSS

فریم‌ورک و هسته اصلی فرانت‌اند

  • Next.js 16 (App Router)
  • React 19
  • TypeScript
  • Partial Pre-Rendering (PPR)
  • Cache Components
  • React Compiler

ارتباط با داده‌ها و API

  • GraphQL
  • TanStack React Query
  • GraphQL Code Generator
  • GraphQL Polling / Subscriptions

مدیریت وضعیت و فرم‌ها

  • Zustand
  • React Hook Form
  • Zod Schema Validation
  • i18next (Internationalization)

طراحی و کامپوننت‌های رابط کاربری

  • Tailwind CSS
  • Radix UI Primitives
  • Responsive Layouts (Desktop/Tablet/Mobile)

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

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