booking_webapp/README.md

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

npm install
npm run dev

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

Production build

npm run build
npm run preview

Lint

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:

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

Boat rentals

Boat search

Tours

Sign in

For vendors

Regenerating screenshots

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

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).