# WaterTrekk Webapp

Customer-facing booking storefront and vendor dashboard for **WaterTrekk** — tours, boat rentals, and equipment — built with React and Vite. The app talks to a Django-style REST API (`/api/v1`) via Axios, with JWT access/refresh tokens stored in `localStorage`.

## Tech stack

- **React 19** and **TypeScript**
- **Vite 6** for dev server and production builds
- **React Router 7** for routing and layouts
- **Axios** for HTTP, including automatic refresh on `401` responses

## Features

- **Storefront** (public): home, boat rentals and search, tour listings, equipment detail and booking flows (booking routes require sign-in).
- **Authentication**: sign in, register, forgot password; tokens persisted for authenticated API calls.
- **Vendor area** (`/dashboard/*`): dashboard, bookings, listings, analytics, and settings — gated for vendor accounts.

## Prerequisites

- **Node.js** (LTS recommended) and npm
- A running **backend** that serves `/api/v1` (see configuration below)

## Getting started

```bash
npm install
npm run dev
```

Open the URL Vite prints (typically `http://localhost:5173`).

### Production build

```bash
npm run build
npm run preview
```

### Lint

```bash
npm run lint
```

## Configuration

| Variable | Description |
| -------- | ----------- |
| `VITE_API_BASE_URL` | Optional. Base URL for the API **without** trailing slash. When unset, requests use relative `/api/v1` (see dev proxy). |

Example:

```bash
VITE_API_BASE_URL=https://api.example.com npm run build
```

### Local development proxy

With `VITE_API_BASE_URL` unset, `npm run dev` proxies `/api` to `http://127.0.0.1:8003` (see `vite.config.ts`). Start your API on that host/port, or change the proxy target to match your setup.

## Scripts

| Script | Purpose |
| ------ | ------- |
| `npm run dev` | Start Vite dev server with HMR |
| `npm run build` | Typecheck and emit production assets to `dist/` |
| `npm run preview` | Serve the production build locally |
| `npm run lint` | Run ESLint |

## Repository layout (high level)

- `src/pages/` — route-level screens (storefront, auth, vendor admin)
- `src/components/` — shared layout and UI pieces
- `src/auth/` — auth context, route guards (`RequireSignIn`, `RequireVendor`)
- `src/api/` — Axios client, token handling, service calls, types

## Screenshots

Captured from a local production preview at 1400×900 viewport (external images may depend on network).

### Home

![Home page](docs/screenshots/home.png)

### Boat rentals

![Boat rentals](docs/screenshots/boat-rentals.png)

### Boat search

![Boat search](docs/screenshots/boat-search.png)

### Tours

![Tours](docs/screenshots/tours.png)

### Sign in

![Sign in](docs/screenshots/sign-in.png)

### For vendors

![Vendors marketing page](docs/screenshots/vendors.png)

### Regenerating screenshots

With a preview server running on port **4173** (for example `npm run preview` after `npm run build`):

```bash
npx playwright@1.49.1 screenshot http://127.0.0.1:4173/ docs/screenshots/home.png --viewport-size=1400,900 --wait-for-timeout=4000
```

Repeat for other paths, or adjust viewport and output paths as needed. On first use, Playwright may download Chromium (`npx playwright install chromium`).