A Premium Homestay Website with Next.js, Tailwind & Supabase

Recently, I got hands-on with developing a website for a homestay in Uttarakhand. The client had clear needs - an elegant website exclusively for premium customers looking for an escape to the mountains. He sent me the details and photos, and we agreed upon a seven-page website to be built with TailwindCSS and NextJS. The focus was on a refined and minimal design, responsive on any device.

Structure

1. Technology Stack

2. Project Structure

3. Contact/Booking Form Pipeline

4. Adding Animations

5. Mobile Optimization

6. Possible Integrations

7. Conclusion

Technology Stack

• Next.js 15 (App Router): The foundation. Used for fast SSR-based routing.

• TypeScript: Free of common runtime errors + Scalable codebase.

• Tailwind CSS: For rapid, custom and lean styling. Utility-first approach. Its Just-in-Time compiler helps keep the final bundle lightweight.

• Supabase: Backend service. Set up a PostgreSQL database which gets populated as new booking inquiries are submitted from the booking page(‘Request Access’ Page).

• EmailJS: For automatic email triggers on form submissions (on contact or booking page).

• Vercel: Hosting and deployment. A simple ‘vercel —prod’ command trigger automatic deployment + Vercel Analytics(enabled) help gather real-time insights into traffic and performance.

Project Structure

Following Next.js conventions, I created a logical structure:

• App Directory (app/): All pages live here. Each route (like /about, /pricing, /amenities) is a folder with its own page.tsx. The root layout.tsx wraps every page with global styles, fonts, and the analytics script.

• Components Folder: Contains reusable UI pieces. E.g., Navigation.tsx handles the site’s menu bar, Footer.tsx contains location, social links and buttons directing to booking and about page (an alt footer was used for booking and contact page without these buttons) and Hero.tsx powering the homepage carousel.

• API Routes: Under app/api/, I created serverless Route Handlers. The /api/booking route validates form data(out-date>in-date, email format etc.) and saves it to Supabase, then triggers an email via EmailJS. By handling this on the server, all sensitive operations (like using database credentials) stay secure.

• Configuration Files: Files like next.config.ts and tailwind.config.js define build behaviour, while tsconfig.json and .eslintrc enforce type safety and code quality.

• Public Assets (public/): Stores static files like images, favicon logo etc.

Contact/Booking Form Pipeline

This was one of the most crucial pieces. Started by building out the form as a controlled React component, with instant client-side validation that checks each field for correct format. Users get clean error feedback if they miss something, thus only valid submissions move forward.

Once the data passes all checks, it's saved directly into a Supabase PostgreSQL table. This instantly alerts the admin about a new inquiry via EmailJS. 2 separate email templates were designed, one for ‘Contact Us’ form and the other ‘Request Invitation’ form.

Adding Animations

The animation system is built with Framer Motion and enhanced by Tailwind CSS transitions. The homepage features a custom preloader that uses AnimatePresence and variants to fade in the logo and tagline with scale and translate effects. A useEffect timer controls the loading state and scroll is disabled during the animation.

For content sections, I created a FadeUpOnScroll wrapper using react-intersection-observer and motion.div to animate items into view with opacity and Y-axis transitions. Staggered lists were animated using staggerChildren in parent containers to sequentially reveal elements. Micro-interactions like button lifts (hover:-translate-y-1) and animated nav link underlines were done via Tailwind.

Mobile Optimization

Using TailwindCSS’s mobile-first utility classes, I built a fully responsive layout with flexible grids, dynamic typography and adaptive paddings, ensuring that content flowed naturally on smaller screens. Key UI components like buttons, headings, and the booking form were tuned to mobile with adjusted sizes and spacing.

Replacing the navbar at the top, I implemented a dedicated mobile menu that opened as a full-screen overlay. Performance was boosted using Next.js features like next/image for automatic image resizing and lazy loading, along with font and code splitting optimizations to keep page loads snappy — even on slow mobile networks. A PWA-style setup with relevant meta tags also enabled a better “add to home screen” experience on iOS.

Possible Integrations

The website was capable of supporting an advanced feature booking flow which would’ve made the platform more autonomous. These included direct booking and payment via Stripe — allowing users to select their stay duration, pay securely online and receive immediate confirmation (through another EmailJS template(directed to the guest)). A dynamic calendar system could have been implemented to block off dates for pre-booked durations, thus eliminating the possibility of double bookings.

However, the client wanted to keep the process invite-only and manually curated. They wanted complete control over who stayed at the property to preserve the exclusivity and spirit of the brand. So these features were intentionally left out in favour of a more selective experience.

Conclusion

The website for ‘En La Kesh Ala Kin - Cedar Crest’ now handles new clients seamlessly and reflects the luxury of the brand. Features like secure booking form, interactive photo gallery and minimal colour usage ensure a polished feel to it. If you’re building something similar or want advice, feel free to reach out :)

Visit the Website