Cove-Booking
پلتفرم رزرو هتل با رویکرد Production
این پروژه یک پلتفرم رزرو هتل با رویکرد Production است که بر اساس یک تجربه مدرن برای جستجو، انتخاب و رزرو اقامتگاه طراحی شده است. این سیستم شامل صفحه اصلی عمومی، جستجوی پیشرفته همراه با فیلترها و نقشه، صفحه جزئیات هتل، فرایند رزرو و پرداخت، لیست علاقهمندیها، پیامرسانی بین مهمان و میزبان، داشبورد میزبان برای مدیریت اقامتگاهها و پنل مدیریت است.
فرانتاند با React (Vite) توسعه داده شده و بکاند با Node.js، Express و MongoDB از طریق REST API با آن در ارتباط است. احراز هویت با استفاده از JWT، کوکیهای HttpOnly و مکانیزم خودکار Refresh Token انجام میشود.
مسئولیت اصلی من ایدهپردازی محصول، طراحی معماری فرانتاند، پیادهسازی کامل رابط کاربری، اتصال به REST API و توسعه تجربههای کاربری واکنشگرا و مبتنی بر نقش برای کاربران Guest، Host و Admin بوده است. تمرکز ویژهای نیز بر ایجاد یک مسیر روان از جستجو تا رزرو، کشف اقامتگاه بر پایه نقشه و طراحی یک معماری مقیاسپذیر برای فرانتاند داشتهام.
تکنولوژیها
React 18ViteReact RouterAnt DesignTailwind CSSAxiosLeaflet / React Leafletdate-fns / dayjsreact-hot-toastreact-icons / @ant-design/iconsclsx
ویژگیها
- احراز هویت و حساب کاربری: ثبتنام و ورود (مهمان / میزبان)، احراز هویت با JWT و کوکیهای HttpOnly، تمدید خودکار Access Token، محافظت از مسیرهای خصوصی، مدیریت پروفایل کاربری
- جستجو و کشف اقامتگاه: نمایش اقامتگاههای منتخب، جستجوی پیشرفته همراه با فیلترها، جستجوی نزدیک من (Near Me) و شعاع جغرافیایی، نمایش اقامتگاهها روی نقشه (Leaflet)، فهرست قابل صفحهبندی، Skeleton Loading
- صفحه جزئیات هتل و نظرات: گالری تصاویر و امکانات، اطلاعات میزبان، تقویم اشغال بودن اقامتگاه، پنل رزرو بر اساس ظرفیت و موجود بودن، سیستم نظرات کاربران، نقشه و مسیریابی، ذخیره در علاقهمندیها و اشتراکگذاری
- چرخه کامل رزرو: فرایند کامل رزرو اقامتگاه، پرداخت آزمایشی (Mock Payment)، ارسال ایمیل تأیید رزرو، تاریخچه رزروها، قوانین لغو رزرو (Flexible / Moderate / Strict)
- علاقهمندیها و پیامرسانی: همگامسازی علاقهمندیها با حساب کاربری، اشتراکگذاری لیست علاقهمندیها، پیامرسانی بین مهمان و میزبان
- داشبورد میزبان: ایجاد، ویرایش و حذف اقامتگاه، آپلود تصاویر، مدیریت وضعیت انتشار (Draft / Publish)، تنظیم قوانین لغو رزرو
- پنل مدیریت: داشبورد آماری، مدیریت نقش کاربران، مدیریت و تأیید یا عدم تأیید اقامتگاهها
- نقشها و سطح دسترسی: نقشهای Guest، Host و Admin، محافظت از مسیرها، رابط کاربری مبتنی بر نقش، کنترل دسترسی برای عملیات حساس
نقش من در پروژه
ایدهپردازی محصول و توسعهدهنده فرانتاند (React / Vite)
مسئول ایدهپردازی محصول، طراحی معماری فرانتاند، پیادهسازی کامل رابط کاربری، اتصال به REST API، توسعه Hookها و Contextهای قابل استفاده مجدد، نمایش رابط کاربری مبتنی بر نقش، طراحی جریانهای اصلی محصول و بهبود تجربه کاربری از طریق Skeleton Loading، تعاملات رزرو و تجربه جستجو بر پایه نقشه بودهام.
بکاند بهعنوان یک سرویس مستقل توسعه داده شده است و تمرکز اصلی من ارائه یک فرانتاند مقیاسپذیر، Production-Ready و کاملاً هماهنگ با سرویسهای بکاند بوده است.
چالشها و تمرکز پروژه
طراحی یک مسیر روان از جستجو تا رزرو و پرداختمدیریت تداخلهای مربوط به ظرفیت و موجود بودن اقامتگاه از طریق APIپیادهسازی رابطهای کاربری مبتنی بر نقش برای Guest، Host و Adminطراحی تجربه جستجو و نمایش اقامتگاه روی نقشه بهصورت واکنشگرامدیریت نشستهای کاربری مبتنی بر کوکی همراه با Silent Refreshطراحی فرمهای کامل مدیریت اقامتگاه برای میزبانحفظ یکپارچگی طراحی با استفاده همزمان از Ant Design و Tailwind CSS
تصمیمات فنی
معماری مبتنی بر Feature
ساختار پروژه بر اساس ماژولهای اصلی محصول مانند Auth، Explore، Hotel Detail، Bookings، Wishlist، Host، Admin و Inbox طراحی شد تا توسعه و نگهداری پروژه در مقیاس بزرگ سادهتر باشد.
Auth Context و Axios Interceptors
مدیریت متمرکز احراز هویت، تمدید خودکار توکن و ارسال مجدد درخواستها با استفاده از Axios Interceptors برای ایجاد نشستهای پایدار مبتنی بر کوکی.
رابط کاربری ترکیبی (Ant Design + Tailwind)
استفاده از Tailwind CSS برای ساختار صفحه و هویت بصری پروژه و Ant Design برای فرمها، جدولها، ورودیها و بخشهای مدیریتی.
استفاده از Leaflet
پیادهسازی نقشه، Markerها، Fit Bounds و مسیریابی تا موقعیت جغرافیایی به بخشی از تجربه تصمیمگیری کاربر تبدیل شود.
رابط کاربری مبتنی بر نقش
پیادهسازی Route Guardها و نمایش شرطی بخشهای مختلف رابط کاربری بر اساس نقش کاربر، در حالی که اعتبارسنجی نهایی مجوزها توسط بکاند انجام میشود.
کامپوننت اختصاصی رزرو
جدا کردن منطق قیمتگذاری، بررسی ظرفیت و عملیات رزرو در قالب یک کامپوننت مستقل برای افزایش خوانایی و قابلیت نگهداری صفحه جزئیات هتل.
بهینهسازیها و راهکارها
- استفاده از Skeleton Loader برای افزایش سرعت ادراکشده
- پنل رزرو چسبان (Sticky Booking Panel) با دکمه رزرو ثابت
- جلوگیری از ارسال همزمان درخواستهای Refresh Token با Axios Refresh Queue
- مدیریت وضعیت جستجو از طریق Query Parameter
- بارگذاری تنبل (Lazy Loading) برای نقشه و دادههای ثانویه هتل
- ناوبری واکنشگرا و منوی موبایل
- طراحی وضعیتهای Empty و Error برای بخشهای مختلف
- نمایش اعلانهای Toast برای رزرو، پرداخت، آپلود و پیامرسانی
ملاحظات فنی و تصمیمات مهندسی
- بهجای محدود کردن پروژه به صفحات ساده CRUD، تمرکز اصلی بر پیادهسازی جریانهای واقعی یک محصول رزرو هتل شامل مدیریت ظرفیت، تجربههای مبتنی بر نقش، جستجوی مبتنی بر نقشه و تعامل بین چندین نوع کاربر بوده است.
- در طراحی پروژه، قابلیت نگهداری، معماری مقیاسپذیر فرانتاند و هماهنگی پایدار با سرویسهای بکاند نسبت به پیادهسازیهای ساده یا صرفاً نمایشی در اولویت قرار گرفته است.
نتیجه
این پروژه توانایی من در طراحی و توسعه اپلیکیشنهای فرانتاند Production-Ready فراتر از پروژههای متداول CRUD را نشان میدهد. همچنین تجربه من در طراحی معماریهای مقیاسپذیر React، پیادهسازی کامل فرایندهای رزرو، یکپارچهسازی احراز هویت امن، توسعه رابطهای کاربری مبتنی بر نقش و هماهنگی مؤثر با سرویسهای بکاند را به نمایش میگذارد.
