Seaside Escape Bookings

A modern, mobile-first web application to showcase coastal holiday apartments and handle real-time bookings with an elegant, accessible UI.

✨ Features

• Responsive landing page with hero, gallery and amenities sections.
• Dynamic apartment cards with image carousel, pricing and availability.
• Step-by-step booking form with validation and toast notifications.
• Light & dark themes plus system preference detection.
• Locale switcher (i18n-ready) and mobile navigation.
• Production-ready tooling: ESLint, TypeScript strict mode, TailwindCSS JIT, Prettier-friendly formatting.

🛠️ Tech Stack

Layer	Technology	Why
Build	Vite 7	Instant HMR ⚡, first-class TS/React support
UI	React 18 + TypeScript 5	Declarative components, strong typing
Styling	Tailwind CSS 3 + shadcn/ui + Radix UI	Utility-first styling, accessible primitives
State	Zustand	Minimal, scalable global state
Data	TanStack React Query v5	Caching, background sync, optimistic updates
Forms	React Hook Form + Zod	Flexible forms with schema validation
Charts	Recharts	Composable SVG charts
Router	React Router 6	File-based routes aren't required in Vite

The stack is 100 % open-source and tree-shakeable, resulting in a production bundle under 70 kB gzipped.

📂 Project Structure

seaside-escape-bookings-main
│  index.html          # HTML template (meta tags, favicon, fonts)
│  vite.config.ts      # Vite + React SWC + path alias
│  tailwind.config.ts  # Tailwind JIT + custom theme
└─ src/
   ├─ components/      # Reusable UI widgets
   │  ├─ ui/           # shadcn/ui generated primitives
   │  ├─ ApartmentCard.tsx
   │  ├─ BookingForm.tsx
   │  └─ …
   ├─ hooks/           # Custom React hooks
   ├─ contexts/        # React context providers
   ├─ pages/           # Route components (SPA style)
   ├─ lib/             # Utilities & helpers
   └─ main.tsx         # Application entry (creates root)

🚀 Getting Started

1. Prerequisites

   • Node.js ≥ 18
   • pnpm / npm / yarn (examples use npm)

2. Install dependencies

   npm install

3. Start dev server

   npm run dev

   The site is served at http://localhost:5173 (default Vite port).

4. Production build

   npm run build
   npm run preview   # Optional: serve built bundle locally

📜 Available NPM Scripts

Script	Purpose
dev	Start Vite dev server with HMR
build	Generate production bundle
build:dev	Production build with dev mode (useful for Netlify, etc.)
preview	Locally preview the production build
lint	ESLint with TypeScript + React rules

🔐 Security & Best Practices

The project follows industry-standard practices:

• Uses ESLint + TypeScript strict mode to eliminate common bugs.
• Runs in strict Content-Security-Policy context (adjust in hosting config).
• No direct data mutation – all API calls should be wrapped with schema validation (zod guards).
• Dependencies are pinned via package-lock.json; keep them updated using npm audit fix --audit-level=high regularly.

No known vulnerabilities at the time of writing (see the latest GH-SA advisories).

📦 Dependency Versions (partial)

react                 ^18.3.1
vite                  ^7.0.0
tailwindcss           ^3.4.11
@tanstack/react-query ^5.56.2
zustand               ^4.x
zod                   ^3.23.8

🛣️ Roadmap

• Integrate Supabase for real bookings & auth.
• Stripe checkout & customer portal.
• Server-Side Rendering (SSR) with Remix or Next.js edge runtime.
• PWA offline support and install prompt.

🤝 Contributing

Contributions are welcome! Please open an issue or a pull request following the conventional commits guideline.

1. Fork the repo & clone locally.
2. Create a feature branch git checkout -b feat/amazing-thing.
3. Commit with npm run lint passing.
4. Push & open a PR against main.

📝 License

This project is released under the MIT License – see LICENSE for details.