LZ/01

CASE STUDY / PRODUCT ENGINEERING

CabinFy

Active iteration

From a course prototype to a bilingual cabin-booking platform

A React, React Query and Tailwind CSS rebuild of a guest booking experience and admin workspace, backed by Node.js, Express, Prisma and PostgreSQL for cabins, bookings, reviews and operational settings.

View code Current boundaries

01 / PRODUCT SCOPE

Why build a two-sided accommodation product?

CabinFy serves two audiences: guests who want to discover and book cabins, and administrators who need to manage listings, reservations and check-in workflows. The challenge was not simply rendering a list of cabins, but organising two user experiences around one business data model, including routes, server state, forms, tables and responsive interaction.

  • Organise guest and admin experiences around one cabin and booking data model
  • Separate server state from local interaction state with React Query
  • Keep the frontend maintainable through validation, reusable primitives and lazy loading
  • Provide a consistent experience across languages, themes and screen sizes

02 / BOOKING FLOW

How a booking moves from discovery to operations

  1. 01

    Discover

    Guests browse the cabin catalogue and use filtering, sorting and pagination to find available stays.

  2. 02

    Decide

    The cabin detail page brings together images, description, price, location and reviews while guests choose dates and capacity.

  3. 03

    Calculate

    The booking form presents an estimate based on dates, nights, guests and breakfast options before submission.

  4. 04

    Book

    After signing in, the frontend uses the JWT cookie to call the protected booking endpoint and submit the form.

  5. 05

    Operate

    Administrators use the dashboard, bookings, cabins and check-in screens to handle reservations, listings and stay status.

03 / ENGINEERING DECISIONS

Frontend and full-stack decisions visible in the code

  1. 01

    Use React Query for server state

    ImplementationCabins, bookings, reviews and settings are fetched through dedicated query hooks, while create, update and delete operations use mutation hooks with shared loading, error and update states.

    ValueServer data stays separate from local UI state instead of coupling request results, form input and modal state in one global container.

  2. 02

    Organise the frontend by business boundaries

    ImplementationThe features directory separates authentication, bookings, cabins, check-in/out, dashboard, guests and settings, combining page components, forms and data hooks within each domain.

    ValueBusiness entry points are easier to find, while lists, forms, dialogs and request logic can be reused within a coherent domain boundary.

  3. 03

    Separate guest and admin route boundaries

    ImplementationReact Router keeps /admin/* apart from the guest-facing pages. The admin workspace has its own layout and ProtectedRoute, while the guest flow centres on discovery, cabin details and booking.

    ValueThe two audiences get different information hierarchies and operation boundaries while sharing the same API and domain data.

  4. 04

    Use lazy routes and skeletons for transitions

    ImplementationDashboard, bookings, cabins, home and cabin pages load through React.lazy and Suspense, with dedicated skeletons for cabin lists and details.

    ValueRoute-level code splitting reduces the initial JavaScript payload, while stable placeholders reduce blank states and layout movement during requests.

  5. 05

    Keep validation and UI primitives consistent

    ImplementationReact Hook Form manages form state, Zod handles runtime validation, and shared Table, Dialog, Select, Form and Sheet primitives support both guest and admin interactions.

    ValueDifferent flows—cabins, bookings, authentication and settings—share predictable validation and feedback patterns instead of bespoke form logic.

  6. 06

    Treat language, theme and responsiveness as product capabilities

    Implementationreact-i18next detects the browser language and loads English and Chinese JSON locales, while Tailwind responsive styles, DarkModeProvider and mobile layouts cover different devices and preferences.

    ValueInternationalisation and accessible visual choices are part of the interface foundation rather than a final-page patch.

04 / CURRENT BOUNDARIES

Backend boundaries that still need to converge

The frontend and business flows have a clear shape, while authorization, booking consistency and production safeguards remain the next engineering focus.

  1. High priority

    Backend authorization is not consistent yet

    ProtectedRoute guards the admin UI, but some cabin mutations, booking operations and settings updates still lack a single server-side authentication and ADMIN role boundary. The backend should be the final authority.

  2. High priority

    Booking consistency cannot rely on client forms alone

    The create-booking path validates input, but date overlap checks, concurrent booking protection, server-side price calculation and transaction boundaries still need strengthening to avoid duplicate reservations or tampered totals.

  3. Medium priority

    Session and JWT authentication are used together

    Administrators and guests use Passport sessions and JWT cookies respectively. This can work, but cookie security, refresh and revocation, CORS, rate limiting and a unified error contract need further convergence.

  4. Medium priority

    Testing and observability are still thin

    The current system mainly relies on Morgan and application logs. A fuller health, metrics and tracing layer, together with tests for booking conflicts, authorization and failure recovery, is still needed.

  5. Medium priority

    Money and deployment configuration need stricter production constraints

    Money fields use Float and deployment files contain environment-specific paths and security options. Decimal values, environment-driven configuration and explicit production cookie and CORS settings should come next.

05 / NEXT ITERATION

What to improve next

  1. 01

    Add consistent authentication and ADMIN role middleware to cabin, booking and settings writes

  2. 02

    Recalculate totals on the server and use transactions plus date-overlap checks for booking consistency

  3. 03

    Converge Session and JWT security policy with Secure Cookie, SameSite, CORS and login rate limiting

  4. 04

    Add API integration, frontend interaction and end-to-end booking tests

  5. 05

    Add health checks, structured logs and baseline metrics before evaluating cache or asynchronous work