§ masterplan.md
Minimalist Neighborhood Café
A classy one-page site for a coffee shop: large serif typography, soft cream tones, menu cards and a reservation form.
01
App overview and objectives
A café site that behaves like a well-set table: a beautiful menu, the story of the place, opening hours you can read in one glance, and a reservation in three taps. Success is more walk-ins and fewer phone calls asking whether you are open.
02
The problem worth solving
Most café sites are slow, image-heavy and never updated, so customers use maps reviews instead. A fast, honest, always-current site keeps the relationship with the customer instead of renting it from a platform.
03
Target audience
- Primary — Locals and visitors deciding where to sit down in the next thirty minutes.
- Secondary — Event planners and small groups looking to book the space.
04
Roles and permissions
- Visitor — read-only public pages, can sign up.
- Member — owns their own records, cannot see other users' data.
05
Core features
- Menu with seasonal sections, prices and dietary marks, editable without a developer
- Live open/closed status derived from opening hours and holiday overrides
- Reservation form with party size, time slots and confirmation email
- Story page with the roaster, the beans and the people
- Visit page with map, parking, accessibility and public-transport notes
- Instagram-free photo strip loaded from a lightweight gallery
Deliberately later
- Loyalty card
- Online bean shop
- Event bookings for the back room
06
Technical stack
Static-first React with a light CMS for menu and hours, plus one server function for reservations.
Why: The site is read a thousand times for every write; static rendering makes it instant on mobile networks, and the tiny dynamic part stays isolated.
Alternatives: A page builder (fast to launch, slow and generic) or a full booking platform (powerful, unnecessary for a twenty-seat café).
07
Conceptual data model
MenuSection — name, order, active season
MenuItem — section, name, description, price, dietary tags, availability
OpeningHours — weekday, open, close, exceptions
Reservation — name, contact, party size, slot, notes, status
08
Integrations
- Email delivery for confirmations
- Map embed
- Optional payment for deposits on large bookings
09
UI design principles
- Generous whitespace, a two-font system, and a palette of three colours at most.
- Photography and typography do the work; borders, shadows and gradients stay almost invisible.
- Every screen has one clear primary action, placed in the same spot each time.
10
Security considerations
- Reservation data is personal: retain only until the booking date plus a short window.
- Spam protection on the reservation form without a hostile captcha.
- Admin editing behind proper authentication, not a shared password.
11
Development phases
Phase 1 — Prove the core
- — Menu with seasonal sections, prices and dietary marks, editable without a developer
- — Live open/closed status derived from opening hours and holiday overrides
- — Reservation form with party size, time slots and confirmation email
- — Static content and design system in place
- — Basic analytics
Phase 2 — Make it real
- — Story page with the roaster, the beans and the people
- — Visit page with map, parking, accessibility and public-transport notes
- — Instagram-free photo strip loaded from a lightweight gallery
- — Accounts, sign-in and password reset
- — Empty, loading and error states everywhere
Phase 3 — Polish and launch
- — Performance, accessibility and SEO pass
- — Legal pages, contact route and 404 handling
- — Wire up: Email delivery for confirmations
- — Wire up: Map embed
Phase 4 — Grow
- — Loyalty card
- — Online bean shop
- — Event bookings for the back room
12
Challenges and solutions
Risk — Staff never update the menu
Solution — An editing UI simple enough to use on a phone during a quiet shift.
Risk — No-shows on reservations
Solution — Confirmation plus a same-day reminder message and a one-tap cancel link.
Risk — Heavy food photography
Solution — Modern image formats, fixed aspect ratios and lazy loading; a strict image budget per page.
13
Future expansion
- Multi-location support
- Subscription coffee delivery
- Table-side ordering
14
Page list (13 pages)
- 01 PUBLIC Home — Mood, live open status and the single strongest photo.
- 02 PUBLIC Menu — Everything served, always current.
- 03 PUBLIC Story — People, sourcing and the reason the place exists.
- 04 PUBLIC Visit — Hours, map, accessibility and transport.
- 05 PUBLIC Reserve — Short booking flow with confirmation.
- 06 AUTH Sign up — Create an account with email or a social provider.
- 07 AUTH Log in — Return to the account, with error and lockout states.
- 08 AUTH Reset password — Request a reset link and set a new password.
- 09 APP (signed in) Account settings — Profile, email, password, language and delete account.
- 10 PUBLIC Contact — Contact form plus real address, phone and email.
- 11 LEGAL & SYSTEM Privacy policy — What data is collected, why, and how to remove it.
- 12 LEGAL & SYSTEM Terms of service — Rules of use, liability and account termination.
- 13 LEGAL & SYSTEM 404 not found — Friendly dead end with search and links back.
15
Page map
PUBLIC AUTH APP (signed in) LEGAL & SYSTEM ────────── ───────────────── ─────────────────── ─────────────────── ├─ Home ├─ Sign up └─ Account settings ├─ Privacy policy ├─ Menu ├─ Log in ├─ Terms of service ├─ Story └─ Reset password └─ 404 not found ├─ Visit ├─ Reserve └─ Contact key flows: Menu ──▶ Reserve Visit ──▶ Reserve Story ──▶ Menu
