پلتفرم Expocore یک محصول جامع SaaS برای مدیریت هتل‌ها و کسب‌وکارها است که به مدیران هتل امکان می‌دهد بدون نیاز به دانش برنامه‌نویسی، وب‌سایت، محتوا و سیستم رزرواسیون آنلاین خود را از طریق یک داشبورد یکپارچه مدیریت کنند. هسته اصلی این محصول یک Visual Page Builder اختصاصی و پیشرفته است که امکان ساخت و ویرایش ساختار و ظاهر وب‌سایت را به صورت Drag-and-Drop با ساختار درختی عمیق فراهم می‌کند.
چرا این محصول ساخته شد و دقیقاً کدام بخش‌ها بر عهده من بود.
بزرگترین چالش مهندسی در پلتفرم Expocore، ایجاد تعادل میان انعطاف‌پذیری برای کاربران نهایی و حفظ پرفورمنس و یکپارچگی سیستم بود. ما باید ابزاری طراحی می‌کردیم که به اپراتورهای هتل اجازه دهد صفحات وب‌سایت خود را به صورت بصری طراحی کنند، تنظیمات المان‌ها را تغییر دهند و استایل‌های دلخواه اعمال کنند؛ اما همزمان خروجی نهایی باید از نظر ساختار داده کاملاً معتبر (Valid)، از نظر SEO بهینه‌شده و در محیط Storefront دارای بالاترین سرعت Rendering باشد.
در این پروژه به همراه تیم مهندسی، معماری و ساختار کلی سیستم را طراحی کردیم. توسعه و رهبری مستقیم موتور رندرینگ (Rendering Engine) و صفحه‌ساز بصری (Visual Page Builder) مستقیماً بر عهده من بود. همچنین پیاده‌سازی بخش‌های یکپارچه‌سازی فرانت‌اند (Frontend Integration) برای سیستم مدیریت رزرو هتل و جریان‌های کاری تولید محتوای AI را انجام دادم.
۶ مورد از مهم‌ترین دستاوردهای فنی این پروژه.
مسائلی که در مسیر توسعه پیش آمد و تصمیم فنی‌ای که برای هرکدام گرفته شد.
ساختار صفحات به صورت یک درخت عمیق و تو در تو (Deeply Nested JSON) ذخیره می‌شد. مدیریت Drag-and-Drop، پیاده‌سازی قوانین روابط المان‌ها (اینکه هر کامپوننت چه فرزندانی را می‌پذیرد) و اعتبارسنجی تنظیمات بسیار پیچیده بود. با به‌کارگیری dnd-kit برای درگ اند دراپ و Zod برای اعتبارسنجی ساختار داده‌ها و تنظیمات هر بلاک، موتور صفحه‌ساز به صورت هوشمند تشخیص می‌دهد که قرار دادن یک المان خاص درون المان دیگر مجاز است یا خیر.
به دلیل ساختار تودرتوی درخت کامپوننت‌ها، هر تغییر در State (مانند کشیدن یک المان یا تغییر تنظیمات رنگ) می‌توانست باعث Re-render شدن کل درخت شود که منجر به افت شدید فریم‌ریت در مرورگر می‌شد. با استفاده از Zustand برای State Management و بهینه‌سازی دقیق چرخه Re-render در React، موتور رندرینگ به گونه‌ای توسعه داده شد که فقط کامپوننت‌های هدف و گره‌های درگیر در تغییرات Re-render شوند و پرفورمنس ادیتور همیشه در بالاترین حد باقی بماند.
ساختار JSON تولید شده در داشبورد باید در سمت کاربر (Storefront) با بالاترین سرعت نمایش داده می‌شد، در حالی که برخی از داده‌ها ماهیت داینامیک داشتند (مثل وضعیت رزروها). معماری سمت Storefront بر اساس Next.js SSG بنا شد تا صفحات به صورت Static لود شوند. با پیاده‌سازی سیستم On-demand Revalidation، با هر بار ذخیره در Editor کش صفحات منقضی و Revalidate می‌شود و بخش‌های نیازمند داده‌های لحظه‌ای با رویکرد داینامیک (SSR/CSR) مدیریت شدند.
جداسازی مسئولیت‌ها از طریق پکیج‌های مشترک فضای کاری (pnpm workspaces).
شامل Zod Schemaها که اطمینان می‌دهد داشبورد دقیقاً همان ساختار داده‌ای معتبری را تولید می‌کند که موتور Next.js انتظار رندر کردن آن را دارد.
منطق پایه رندرینگ، قوانین روابط المان‌ها (Element Relations) و تایپ‌های مشترک میان محیط ویرایشگر و رندر نهایی وب‌سایت.
پیکربندی‌ها و استانداردهای اشتراکی شامل کانفیگ‌های TypeScript، قوانین لینتر Biome و تنظیمات بیلد.
کتابخانه کامپوننت‌های پایه و دیزاین سیستم اشتراکی پلتفرم با استانداردهای دسترسی‌پذیری Radix UI و Tailwind CSS.
۳ قابلیتی که تجربه کاربری این محصول را شکل می‌دهند.
برای کاربرانی که نیاز به تغییرات ظاهری پیشرفته‌تری داشتند، قابلیت ادیت Custom CSS در داشبورد با استفاده از CodeMirror پیاده‌سازی شد که Syntax Highlighting زنده ارائه می‌دهد و استایل‌های نوشته شده به صورت امن و ایزوله با دامنه (:scope) به المان‌های مربوطه در Storefront تزریق می‌شوند.
علاوه بر صفحه‌ساز، فرانت‌اند سیستم مدیریت رزرواسیون هتل و جریان‌های کاری هوش مصنوعی در داشبورد پیاده‌سازی شد. سیستم AI به کاربران اجازه می‌دهد تولید محتوای پست‌های وب‌سایت را زمان‌بندی (Schedule) کرده و در شبکه‌های اجتماعی توزیع کنند. رابط کاربری برای نمایش ریسپانسیو در نماهای Desktop، Tablet و Mobile پیاده‌سازی شده است.
با توجه به اینکه صفحات به صورت ساختاریافته توسط موتور رندر می‌شوند، SEO تکنیکال پایه در Storefront به صورت توکار پیاده شد. خروجی نهایی Next.js شامل تگ‌های Semantic HTML استاندارد و تولید خودکار Meta Title و Meta Descriptionهای ضروری برای ایندکس شدن بهینه سایت هتل‌ها در گوگل است.
۵ نما از محیط واقعی محصول. برای دیدن اندازه کامل، روی هر تصویر بزنید.
نمای دسکتاپ صفحه‌ساز بصری اختصاصی، ساختار درختی المان‌ها (Layers Tree)، فضای کاری تعاملی Drag-and-Drop جهت ساخت صفحات بدون نیاز به کدنویسی، و دسترسی سریع به پنل استایل و تنظیمات.
پنل‌های پیکربندی بصری و تنظیمات تم برند (لوگوی لایت/دارک، رنگ‌های سازمانی، فاوآیکون) که بر پایه Zod Schema به عنوان منبع حقیقت داده‌ها عمل کرده و استایل هر بلاک را دیکته می‌کنند.
یکپارچه‌سازی ادیتور CodeMirror در داشبورد برای توسعه‌دهندگان و کاربران حرفه‌ای، مجهز به Syntax Highlighting زنده و اعمال استایل‌های سفارشی با دامنه ایزوله (:scope) به المان‌ها در Storefront.
خروجی نهایی رندرشده در استورفرانت Next.js بر اساس ساختار JSON، شامل ماژول رزرواسیون آنلاین اتاق (Check-in/Check-out/Guests)، و بهره‌گیری از SSG برای دستیابی به حداکثر سرعت بارگذاری و سئو.
قابلیت مدیریت محتوا در نمای موبایل و تبلت برای اپراتورهای هتل، هماهنگی کامل سلسله‌مراتب درختی المان‌ها و ویرایشگر هوشمند متناسب با کانتکست صفحه.
بزرگترین دستاورد من در این پروژه، مهندسی و پیاده‌سازی موفقیت‌آمیز یک سیستم Rendering قدرتمند و متناسب با نیازمندی‌های یک ساختار SaaS بود. طراحی مکانیزمی که در آن روابط بین کامپوننت‌ها به شکل ایزوله از طریق Schema کنترل می‌شود، و مدیریت همزمانِ کش Next.js با تریگرهای Revalidation، باعث شد پلتفرم پایداری بالایی در برابر خطاهای کاربری داشته باشد و در عین حال سرعت لود فوق‌العاده‌ای در سمت کاربر نهایی ارائه دهد.
می‌توانیم پیرامون معماری سیستم، جزئیات فنی و فرصت‌های همکاری گفتگو کنیم.
