114 lines
3.2 KiB
Markdown
114 lines
3.2 KiB
Markdown
# 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
|
||
|
||
|
||
|
||
### 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`):
|
||
|
||
```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`).
|