# The Hideout UI
[![Build Status](https://ci.tombutcher.work/job/tombutcher.work/job/tombutcher-ui/job/main/badge/icon)](https://ci.tombutcher.work/job/tombutcher.work/job/tombutcher-ui/job/main/)

This is the front-end web application for **The Hideout** ([thehideoutltd.com](https://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
- **Authentication**: Keycloak integration for secure user management
- **Particle Effects**: Interactive background animations using tsParticles
- **Performance**: Optimized with lazy loading, caching, and modern web practices

## Prerequisites

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

- [Node.js](https://nodejs.org/) (v18 or higher recommended)
- [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/)
- [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/) (for deployment)
- [Git](https://git-scm.com/)

## Getting Started

### 1. Clone the Repository

Clone this repository to your local machine:

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

### 2. Install Dependencies

Install the necessary dependencies:

```bash
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:

```bash
npm run dev
```

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

### 5. Building for Production

To create a production build:

```bash
npm run build
```

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

### 6. Preview Production Build

To preview the production build locally:

```bash
npm run preview
```

## Deployment

### Deploy to Cloudflare Pages

Deploy using Wrangler CLI:

```bash
npm run deploy
```

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

### Automated Deployment

This project uses Jenkins for CI/CD. The pipeline automatically:
1. Checks out the code
2. Installs dependencies
3. Builds the project
4. Deploys 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
```

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Resources

- [React](https://react.dev/)
- [Vite](https://vite.dev/)
- [Ant Design](https://ant.design/)
- [Cloudflare Pages](https://developers.cloudflare.com/pages/)
- [Cloudflare Turnstile](https://developers.cloudflare.com/turnstile/)