Frontend playbook — how to build screens
Job: build guest and owner UI. Each step is how to build that screen: one winner URL, headers, body, what to store, next screen.
This is the Vue 3 app at frontend-bookdirect-user-app. Live product still talks to Convex; build new screens from these playbooks. Archived Next.js is _legacy/.
API keys: the key in the browser for listing properties is public. Implement proper route guards for security. Core Backend path settings and Middleware Backend should enforce access. See Security and IDOR.
Properties
Hotels, shortlets, and apartments are all Core Backend property rows. Set property_category to hotel | shortlet | apartment.
| Type | How the guest books | How to build |
|---|---|---|
| Hotel | Room type + rate plan | Rooms + rate_plan |
| Shortlet | Usually the whole place | Rates on the property |
| Apartment | By unit or whole flat | Hotel or shortlet pattern — not a third API |
Screens
| How to build | Winner | Playbook |
|---|---|---|
| Sign up / login | Core Backend | Sign up and login |
| Owner lists a property | Core Backend (+ Middleware Backend file-manager) | Owner — set up a property |
| Guest search / detail | Public key + Core Backend list; Middleware Backend availability | Guest — search and book |
| Checkout | Core Backend booking + Middleware Backend pay | Checkout and pay |
| Manage / cancel | Core Backend list + JWT; Middleware Backend if money moves | Manage booking |