Tropical Gardens Hotel

Project Overview

Tropical Gardens Hotel is a hospitality establishment in Kyenjojo, Western Uganda. DeryCode built a complete website that showcases the hotel's rooms, amenities, and location while enabling direct bookings through WhatsApp integration.

The site features a cinematic hero slider with Ken Burns zoom effects, animated gold progress bars, and dynamic room galleries powered by Supabase — allowing hotel staff to update room images and details without touching code.

Key Features

• Cinematic hero carousel with Ken Burns zoom effect and animated progress bars
• Dynamic room galleries stored as image arrays in Supabase PostgreSQL
• WhatsApp booking integration for direct room reservations
• Google Maps integration for hotel location
• Google AdSense integration for revenue generation
• WebP image optimization for sub-second load times
• Responsive design — mobile-first with desktop enhancements
• Lazy loading for gallery images and below-fold content
• Immutable long-lived cache headers for static assets
• Admin panel for managing rooms and content

Technology Stack

The Challenge

The hotel needed a website that would impress potential guests while being easy for staff to update. Key challenges included:

• Creating a visually stunning hero section that loads in under 1 second
• Building a room management system that non-technical staff can use
• Integrating WhatsApp for direct bookings without a full booking engine
• Optimizing heavy hotel photography for mobile networks in rural Uganda
• Maintaining a dual-backend architecture (Vercel serverless + Express on Render)

The Solution

We used a React/Vite frontend deployed on Vercel with serverless functions, backed by Supabase PostgreSQL for room data. The hero section uses a 4-slide carousel with CSS Ken Burns effects and preloaded LCP images. All images are served in WebP format with responsive srcsets.

The dual-backend architecture uses Vercel serverless functions for read operations and an Express.js server on Render for admin/write operations, with Supabase as the shared data layer using service_role keys to bypass RLS for administrative updates.

Results

• Sub-second page load times on 3G networks
• Direct WhatsApp bookings replacing phone-only reservations
• Hotel staff can update rooms and images without developer help
• Google AdSense generating passive revenue from site traffic
• Improved search visibility with SEO-optimized room pages