Project Overview
Ghar Bar Boutique Stay & Cafe is a luxury retreat in Khanyara, Dharamshala, set against the hills of Himachal Pradesh. The project is a fast, animated, fully responsive website built to give the property a digital home that feels as calm and considered as the stay itself. Through a clean Next.js interface, guests explore room categories, browse a live image gallery, read the property story, discover the in-house cafe and dining, and move straight into a booking engine to reserve their dates. The site is live at gharbarcafe.com and was built end to end with a focus on speed, smooth motion, and search visibility for high-intent travel queries around Dharamshala.
The Brief
The property had strong real-world hospitality but a thin digital footprint, with most of its bookings flowing through third-party aggregators that charge heavy commissions and dilute the brand. The goal was to build a website that could stand on its own as the primary brand surface, present the rooms and cafe with editorial polish, and push guests toward direct booking rather than aggregator dependence. It also had to load quickly on mid-range phones, because a large share of Indian travel research happens on mobile over patchy connections, and it had to rank for local hospitality searches so the property could be discovered organically instead of only through paid listings.
My Role and Responsibilities
I handled the project end to end as the sole developer, owning the architecture, the frontend, the content layer, and the SEO. My responsibilities covered the following:
- Designed and built the full Next.js and TypeScript codebase, including the home, about, rooms, cafe, gallery, blog, and contact pages.
- Set up Supabase as the dynamic content layer for gallery images, room data, and seasonal pricing, so the property team can update content without touching code.
- Implemented the motion system with Framer Motion for entrance and scroll animations, paired with Lenis for smooth, controlled scrolling across the site.
- Wired the booking flow to the property's external booking engine and integrated the aggregator and review links (MakeMyTrip, Goibibo, Agoda, TripAdvisor and others) for trust and reach.
- Built the on-page SEO foundation, including semantic markup, metadata, optimised images, and a structure tuned to local travel intent for Dharamshala.
Solution: One Calm, Fast Brand Surface
Rather than a static brochure site, I built Ghar Bar Cafe as a content-driven Next.js application where the rooms, gallery, and cafe modules pull from a managed Supabase backend. A guest can land on the home page, feel the property's tone through measured animation, scroll through real room categories with transparent seasonal pricing, view the gallery, and move into the booking engine in a single uninterrupted session. The experience is intentionally unhurried and editorial, which matches the positioning of a premium boutique stay rather than a budget transactional listing.
Core Features
Dynamic Rooms and Transparent Pricing
The rooms section presents Premium and Standard categories with clear per-night rates across seasons and meal plans, pulled from Supabase so the team can adjust pricing without a redeploy. Transparent pricing on the brand site itself reduces friction and builds trust before the guest ever reaches the booking engine.
Live Gallery
The gallery is powered by Supabase Storage, with optimised image delivery through Next.js so high-resolution property photography loads fast without hurting performance scores. New images can be added by the team and appear on the site automatically.
Direct Booking Flow
The site routes guests to the property's booking engine for direct reservations, positioned as the best-rate channel. This is the commercial heart of the project, designed to shift volume away from high-commission aggregators while still keeping aggregator and review links visible for travellers who prefer them.
Cafe and Dining
A dedicated section showcases the in-house cafe and dining experience, giving the food and beverage side of the property its own identity and an additional reason for both guests and locals to engage with the brand.
Technical Architecture
The site runs on a modern serverless stack. The Next.js application handles rendering and routing from a single TypeScript codebase, deployed on Vercel with continuous deployment from GitHub. Supabase provides the managed Postgres database and storage for dynamic content such as gallery images and room data. Framer Motion and Lenis handle the animation and scroll layer, while Font Awesome supplies lightweight, consistent iconography. The architecture keeps operational overhead low and cold starts fast, which matters for a property that needs the site to feel instant on a traveller's phone.
SEO and Performance
SEO was treated as a first-class concern because the entire point of the build was to win organic, direct traffic instead of paying aggregator commissions. Every page is server-rendered for crawler readability, with metadata tuned to high-intent queries such as boutique stay in Dharamshala, hotels in Khanyara, and cafe and stay near Dharamshala. Images are optimised through the Next.js pipeline to protect load times, and the markup is kept semantic and clean so search engines can parse the room, gallery, and dining content reliably. The result is a quick-loading, search-friendly site that strengthens the property's direct booking channel and presents the brand with the elegance it deserves.
Engineering Challenges and How We Solved Them
- Keeping a media-heavy site fast. Hospitality sites live on imagery, which usually means slow pages. Routing all gallery and room images through Next.js image optimisation and Supabase Storage CDN delivery kept the visuals rich without sacrificing load speed on mobile.
- Editable content without a heavy CMS. Instead of a bulky content system, Supabase acts as a lean backend so the property team can update gallery images and room pricing directly, while the frontend stays a clean, fast Next.js app.
- Premium motion on mid-range devices. Framer Motion and Lenis give the site its calm, premium feel, with animation kept measured so it never gets in the way of a guest who simply wants to check rates and book.
- Reducing aggregator dependence. The information architecture deliberately leads guests toward the direct booking engine as the primary call to action, while still surfacing aggregator and review links to capture travellers wherever they prefer to transact.
Results and Impact
- Shipped a production website at gharbarcafe.com covering home, about, rooms, cafe and dining, gallery, blog, and contact in a single fast Next.js app.
- Established a strong standalone brand presence that reduces reliance on third-party travel aggregators and their commissions.
- Built a Supabase-driven content layer so the property team can update gallery images and seasonal room pricing without developer involvement.
- Delivered an SEO foundation tuned to local Dharamshala travel intent, positioning the property to be discovered organically rather than only through paid listings.
- Created a fast, animated, mobile-friendly experience that holds up on mid-range phones and patchy connections.
Key Learnings
Building Ghar Bar Cafe reinforced how much hospitality websites depend on the balance between beauty and speed. A boutique stay needs to feel premium, but a slow site quietly loses the exact mobile-first guest it is trying to win. Leaning on Supabase for a lightweight content layer, Next.js for performance, and a restrained motion system, let the brand feel elegant while still loading fast and ranking for the local searches that actually bring in direct bookings. The most valuable outcome was not the animation; it was building a site that gives the property control over its own guests instead of renting that relationship from an aggregator.
Live Project
Visit Ghar Bar Boutique Stay & Cafe at gharbarcafe.com to see the site in action, or explore my other work on my portfolio .
