Hotel The Manha
Hotel The Manha's website lets guests search rooms, see real availability, book directly and manage their reservation online. We designed and built the Next.js guest site and the Node.js API behind it.
- Category
- Hotel booking website
- Platform
- Web — guest site & hotel API
- Links
- Available on request
01
Client context
Hotel The Manha is a hotel in the commercial centre of Old Dhaka that was taking every booking by phone or walk-in. It needed a website that presents the hotel professionally and lets guests book directly.
02
Website objectives
- Present the hotel and its rooms credibly
- Let guests check real availability and book online
- Let guests find and manage an existing booking themselves
- Work well on phones, where many guests start
- Be easy for search engines to read
03
Design system
Instead of adapting a generic hotel template, we defined a small design system and derived every screen from it: white and deep charcoal with a single gold accent, Playfair Display headlines over Inter body text, square corners, and depth from tonal layers and fine dividers rather than shadows.
The same system carries from the full-width hero image down to the PDF invoices and confirmation emails, so a guest sees one brand from first visit to inbox.
04
Finding a room
The rooms listing has a sticky filter sidebar for dates, guests, room type, price range and amenities. Every filter is stored in the URL and the query runs on the server, so a guest can share the exact selection they are looking at.
Each room page has a gallery, room details and a booking widget that already knows that room's availability.
05
A guided booking flow
Date pickers are where booking interfaces usually fall apart. We built one component that walks the guest through check-in, check-out and guest count in a single popover anchored to the active field. It powers the home page search, the room booking widget, the reservation form and the listing filters, and on phones it switches to a single month with larger touch targets.
The reservation itself is a four-step form, including the national-ID upload the hotel uses for guest verification.
06
Availability and privacy
Availability combines confirmed bookings, dates blocked by staff, seasonal price overrides and room status. Each night is priced individually, and availability is checked again on the server at the moment of submission, so two guests cannot book the same room for the same dates.
Looking up a booking requires both the email address and the booking reference, matched on the server; an email address alone reveals nothing.
07
Invoices and confirmation emails
The backend owns a single branded PDF invoice generator. The same invoice is attached to the confirmation email, available as a download, and linked from the booking success and booking management pages — so changing it once updates every surface.
08
Technical implementation
The guest site is built with Next.js and rendered on the server, so pages arrive as complete HTML — good for first loads on mobile networks and for search engines. Layouts were checked down to a 375-pixel-wide screen.
Behind it, an Express API is organised into controllers, services and repositories over typed MongoDB models, with request validation at every route. Staff and admin endpoints use JWT authentication with role-based permissions, and guest ID uploads go to DigitalOcean Spaces with file-type and size limits. Errors carry clear messages through to the guest instead of bare status codes.
Screens





