Horizon Peaks
Project Overview & Demo Details
A modern hotel booking website that allows guests to explore cabins, check availability, and manage reservations online.
Case Study & Technical Details
Horizon Peaks - Guest-Facing Website
The Horizon Peaks Guest-Facing Website is the public booking platform for a boutique hotel featuring eight luxurious wooden cabins. Built with Next.js, it enables guests to browse available accommodations, verify availability in real time, create reservations, and manage their bookings through a modern and responsive interface.
The application shares its database with the internal Horizon Peaks Dashboard, ensuring that cabin availability, reservations, and guest information remain synchronized across both systems.
Project Overview
The primary objective of this application is to provide guests with a seamless online booking experience while minimizing manual work for hotel staff. The platform focuses on performance, accessibility, and ease of use by utilizing modern React and Next.js features such as Server Components, Server Actions, and optimized rendering strategies.
Core Features
Google Authentication
Guests authenticate securely using their Google accounts through NextAuth.js.
Highlights
- Secure Google OAuth authentication
- Server-side session management
- Automatic guest profile creation on first login
- Persistent authenticated sessions
Cabin Browser
Guests can explore every available cabin before making a reservation.
Highlights
- Responsive cabin listings
- Capacity-based filtering
- Pricing and discount information
- Detailed cabin pages
- High-quality image galleries
Reservation Management
The reservation system provides a smooth booking experience while preventing scheduling conflicts.
Highlights
- Interactive booking calendar
- Real-time unavailable date validation
- Automatic overlap prevention
- Reservation creation
- Reservation editing
- Reservation cancellation
- Optional breakfast package selection
- Booking history inside the guest account
Guest Profiles
Guests can maintain their personal information for faster future bookings and hotel check-ins.
Stored Information
- Full Name
- Email Address
- Nationality
- Country Flag
- National ID
Technology Stack
| Category | Technology |
|---|---|
| Framework | Next.js 14+ |
| Rendering | Server Components, SSR, ISR |
| Styling | Tailwind CSS |
| Authentication | NextAuth.js |
| Database | Supabase |
| State Management | React Context API |
| Date Utilities | date-fns |
| Icons | Lucide Icons |
Shared Database
This project communicates with the same self-hosted Supabase instance used by the internal hotel management dashboard.
Main Tables
public.cabins
Stores:
- Cabin information
- Capacity
- Pricing
- Discounts
- Images
- Descriptions
public.bookings
Stores:
- Guest reservations
- Booking dates
- Reservation status
- Breakfast selections
public.guests
Stores:
- Guest profiles
- Personal information
- Google account association
User Journey
A typical guest experience follows these steps:
- Sign in with Google.
- Browse available cabins.
- Filter cabins based on capacity.
- View detailed cabin information.
- Select available dates.
- Complete the reservation.
- Manage bookings through the account dashboard.
- Edit or cancel reservations when needed.
Performance & Architecture
The project leverages several modern Next.js features to deliver a fast user experience.
Performance Features
- Server Components
- Server-side Rendering (SSR)
- Incremental Static Regeneration (ISR)
- Optimized image loading
- Efficient data fetching
- Shared backend infrastructure
- Responsive design across desktop and mobile devices
Integration
The guest website integrates directly with the internal Horizon Peaks Dashboard through a shared database.
This architecture allows hotel staff to manage cabins and reservations from the dashboard while guests interact exclusively with the public website, ensuring both applications always display consistent data.
Project Goals
- Deliver a simple and intuitive booking experience
- Prevent double bookings through real-time validation
- Maintain synchronized reservation data
- Provide secure authentication
- Offer responsive layouts across all devices
- Reduce manual reservation management for hotel staff
Code Author: Ahmed Said
Gallery & Interface Layouts
Home page
Cabin page
Cabin page
Booking a cabin
About page
Profile page