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
401responses
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 piecessrc/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).