Cove-Booking
Production-oriented hotel booking platform
This project is a production-oriented hotel booking platform built around a modern stay discovery and reservation experience. It includes public hotel browsing, advanced search with map and geo filters, hotel detail pages, booking and payment flows, wishlist sharing, guest-host messaging, a host dashboard for listing management, and an admin control panel.
The frontend is built with React (Vite), while the backend is powered by Node.js, Express, and MongoDB, communicating through REST APIs. Authentication is handled using JWT with HttpOnly cookies and automatic access/refresh token rotation.
My primary responsibility was product ideation, frontend architecture, complete UI implementation, REST API integration, and building responsive, role-aware experiences for Guest, Host, and Admin users. Special attention was given to creating a seamless search-to-booking journey, map-based discovery, and scalable frontend architecture.
Technologies
React 18ViteReact RouterAnt DesignTailwind CSSAxiosLeaflet / React Leafletdate-fns / dayjsreact-hot-toastreact-icons / @ant-design/iconsclsx
Features
- Authentication & Account: Registration & Login (Guest / Host), JWT authentication with HttpOnly cookies, Automatic access token refresh, Protected routes, User profile management
- Discovery & Search: Featured stays, Advanced search & filters, Near-me / radius geo search, Interactive map (Leaflet), Pagination-ready catalog, Skeleton loading states
- Hotel Detail & Reviews: Gallery & amenities, Host information, Occupancy calendar, Availability-aware booking panel, Reviews, Interactive map & directions, Bookmark & share
- Booking Lifecycle: Complete booking workflow, Mock payment checkout, Confirmation email, Booking history, Flexible / Moderate / Strict cancellation policies
- Wishlist & Messaging: Bookmarks synced with account, Shareable wishlists, Guest–Host messaging
- Host Dashboard: Create / Edit / Delete listings, Image upload, Draft / Publish management, Cancellation policy configuration
- Admin Panel: Dashboard statistics, User role management, Listing moderation
- Roles & Access: Guest / Host / Admin roles, Route protection, Role-aware navigation, Permission-sensitive actions
My Role in Project
Product Ideation & Front-End Developer (React / Vite)
Responsible for product ideation, frontend architecture, complete UI implementation, REST API integration, reusable hooks and contexts, role-aware UI rendering, responsive product flows, and client-side UX improvements including loading skeletons, booking interactions, and map-based discovery.
The backend was developed as an independent service. My focus was delivering a scalable, production-ready frontend that integrates seamlessly with those backend services.
Challenges & Focus
Designing a seamless search → reserve → payment journeyHandling availability conflicts returned by the APIBuilding role-aware interfaces for GuestHostand AdminCreating a responsive map-based discovery experienceManaging cookie-based authentication with silent refreshBuilding intuitive host listing workflowsMaintaining visual consistency with Ant Design + Tailwind
Technical Decisions
Feature-Oriented Architecture
Organized the application around product domains such as Auth, Explore, Hotel Detail, Bookings, Wishlist, Host, Admin, and Inbox to improve scalability and maintainability.
Auth Context + Axios Interceptors
Centralized authentication, automatic token refresh, and request retry logic using Axios interceptors for reliable cookie-based sessions.
Hybrid UI (Ant Design + Tailwind)
Combined Tailwind CSS for layouts and branding with Ant Design components for forms, tables, inputs, and administrative interfaces.
Leaflet Integration
Integrated interactive maps, markers, fit-bounds, and directions to make location an essential part of the booking experience.
Role-Aware UI
Implemented route guards and permission-based rendering while relying on backend authorization as the source of truth.
Dedicated Booking Component
Extracted pricing, availability, and reservation logic into a reusable booking component to keep hotel pages clean and conversion-focused.
Optimizations & Solutions
- Skeleton loaders for improved perceived performance
- Sticky booking panel with fixed reservation CTA
- Axios refresh queue to prevent duplicate token refresh requests
- Query parameter-based search state
- Lazy loading for maps and secondary hotel data
- Responsive navigation and mobile drawer
- Empty and error states across major flows
- Toast feedback for booking, payment, uploads, and messaging
Trade-offs & Engineering Considerations
- Rather than simplifying the application into isolated CRUD pages, the project intentionally prioritizes realistic product workflows including availability-aware bookings, role-based experiences, map-driven discovery, and multi-surface user journeys.
- Maintainability, scalable frontend architecture, and reliable coordination with backend services were prioritized over shortcut implementations and UI-only prototypes.
Outcome
This project demonstrates my ability to build production-ready frontend applications beyond traditional CRUD interfaces. It showcases experience designing scalable React architectures, implementing complete booking workflows, integrating secure authentication, building role-aware user experiences, and coordinating seamlessly with backend services.
