123 lines
3.4 KiB
Markdown
123 lines
3.4 KiB
Markdown
|
|
# The Hideout UI
|
|
|
|
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
|
|
- **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.
|
|
|
|
## 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
|
|
```
|
|
|
|
## 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/) |