This is the front-end web application for The Hideout (thehideoutltd.com), built with React.js and hosted on Cloudflare Pages. The website showcases rental properties with beautiful image galleries, property details, booking integrations, and a contact form for inquiries.

Tech Stack

React 19: Modern JavaScript library for building user interfaces
Vite: Fast build tool and development server
Ant Design: UI component library for polished design
Framer Motion: Animation library for smooth transitions
Cloudflare Pages: Static site hosting with global CDN
Cloudflare Turnstile: Bot protection for form submissions
Keycloak: Authentication and authorization
SASS: CSS preprocessor for advanced styling

Features

Property Showcase: Display rental properties with detailed information and features
Image Galleries: Responsive image carousels with blurhash placeholders for smooth loading
Responsive Design: Fully responsive layout that adapts to all screen sizes
Contact Form: Secure contact form with Cloudflare Turnstile protection
Booking Integration: Links to Airbnb and Booking.com for direct bookings
Performance: Optimized with lazy loading, caching, and modern web practices

Prerequisites

Before getting started, make sure you have the following installed:

Node.js (v18 or higher recommended)
npm or yarn
Wrangler CLI (for deployment)
Git

Getting Started

1. Clone the Repository

Clone this repository to your local machine:

git clone https://git.tombutcher.work/tom/thehideout-ui.git
cd thehideout-ui

2. Install Dependencies

Install the necessary dependencies:

npm install

3. Configure Environment

Ensure any necessary environment variables are set up for:

Cloudflare Turnstile site keys
Keycloak configuration
API endpoints

4. Running Locally

To start the development server locally:

npm run dev

The website will be available at http://localhost:5173 (Vite default port).

5. Building for Production

To create a production build:

npm run build

The optimized build will be output to the ./dist directory.

6. Preview Production Build

To preview the production build locally:

npm run preview

Deployment

Deploy to Cloudflare Pages

Deploy using Wrangler CLI:

npm run deploy

This will build the project and deploy it to Cloudflare Pages.

Project Structure

thehideout-ui/
├── src/
│   ├── components/     # Reusable React components
│   ├── contexts/       # React context providers
│   ├── icons/          # Custom icon components
│   ├── utils/          # Utility functions
│   ├── App.jsx         # Main application component
│   └── main.jsx        # Application entry point
├── public/             # Static assets
├── dist/               # Production build output
└── assets/             # Additional assets

readme.md

The Hideout UI