Suggestion/Enhancement for Booking website for Studio Raya
6 months ago
Client taknak keluarkan duit banyak dekat website tapi nak custom landing page with booking. He dont want any commitment in domain and hosting/server because its just a seasonal event(For Raya 2026 only)
Check this out : My suggestion FLOW + STACK to client. Need any suggestion/enhancement/advice from you guys. (❌ No admin dashboard)
***Question: Is the stack or integration are okay? Ada any bad side tak if using this stack/integration yg free. Plus client cakap audience biasa2 je. Tak ramai tak sikit. From my experience free version should be okay right? ***
P/s: Tanya sebab first time dapat job yang nak all free hahah client just nak bayar development cost saja. Client punya studio setup dekat rumah je. So he just want to test market first.
1) Landing → Package & Add-ons
Customer:
- Open landing page
- 1 package (base)
- Select add-ons:
- Physical photo
- Frame
- etc
- Click Book Now
System:
- Calculates displayed total (client-side)
- Server will re-calc final amount on submit (security)
2) Select Date
Customer selects date.
System:
- Calls availability API (server)
- Server fetches Google Calendar events for that date range
- Generates available slots (15-min windows with gaps like 10:00–10:15, 10:30–10:45, etc.)
3) Select Time
Customer picks a slot.
System:
- Shows only available slots (exclude busy events + pending bookings)
- On submit later, re-check availability to prevent race condition/double-booking
4) Customer Details
Customer fills:
- Name
- Phone
- Notes (optional)
- etc
5) Payment Choice
Customer chooses:
- Deposit / Full payment
System:
- Shows QR/transfer details + exact amount to pay
6) Upload Receipt
Customer uploads proof (PDF/image).
System:
- Upload to Supabase Storage
- Locks file (immutable)
- Saves receipt URL to DB
7) Submit Booking (Atomic Server Action)
Server does (in order):
- Re-calc price server-side
- Re-check slot availability
- Create Google Calendar event as PENDING
- Save booking in DB:
status = PENDING_PAYMENT
- Write/Update Google Sheet row (1 booking = 1 row)
- Send emails via Resend:
- Customer: “Booking received (pending verification)”
- Client (to Personal Gmail): “Verify payment” + receipt link + action buttons
8) Client Payment Verification (Email-Driven)
Client receives email with:
- Booking details
- Receipt link
- Buttons:
Confirm Payment - Reject / Scam
On Confirm:
- DB →
CONFIRMED - Calendar event updated (remove PENDING)
- Google Sheet row updated
- Customer emailed “Confirmed”
On Reject:
- DB →
CANCELLED - Calendar event cancelled/deleted
- Google Sheet row updated
- Customer emailed “Rejected / slot released”
9) Cancel / Reschedule (Customer self-service, Client approves)
Customer email includes Manage Booking secure link.
Cancel
- Customer requests cancel
- Client approves via email button
- DB/Calendar/Sheet updated + notify customer
Reschedule
- Customer selects new date/time (availability checked)
- Client approves via email button
- Calendar event time updated
- Google Sheet row updated + notify customer
LATEST FINAL STACK (v2)
Frontend
- Next.js 14 (App Router)
- Tailwind CSS
Backend
- Next.js Server Actions + Route Handlers
- Secure signed tokens (confirm/reject/manage actions)
Core Integrations
- Google Calendar API (availability + events)
- Google Sheets API (records/reporting; auto-update same row)
- Supabase Postgres (booking records, status, mapping)
- Supabase Storage (receipt upload: PDF/image)
Email System (locked)
- Resend (send transactional emails)
- React Email (
@react-email/components) for coded templates - Recipient inbox: Gmail personal Client
Infra(Free Version)
- Vercel hosting
- Vercel free domain
