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? ***

1) Landing → Package & Add-ons

1. Open landing page
2. 1 package (base)
3. Select add-ons:

• Physical photo
• Frame
• etc

4. Click Book Now

• Calculates displayed total (client-side)
• Server will re-calc final amount on submit (security)

2) Select Date

• 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

• Shows only available slots (exclude busy events + pending bookings)
• On submit later, re-check availability to prevent race condition/double-booking

4) Customer Details

• Name
• Phone
• Email
• Notes (optional)
• etc

5) Payment Choice

• Deposit / Full payment

• Shows QR/transfer details + exact amount to pay

6) Upload Receipt

• Upload to Supabase Storage
• Locks file (immutable)
• Saves receipt URL to DB

7) Submit Booking (Atomic Server Action)

1. Re-calc price server-side
2. Re-check slot availability
3. Create Google Calendar event as PENDING
4. Save booking in DB:

• status = PENDING_PAYMENT

5. Write/Update Google Sheet row (1 booking = 1 row)
6. 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)

• Booking details
• Receipt link
• Buttons:
  Confirm Payment
• Reject / Scam

• DB → CONFIRMED
• Calendar event updated (remove PENDING)
• Google Sheet row updated
• Customer emailed “Confirmed”

• DB → CANCELLED
• Calendar event cancelled/deleted
• Google Sheet row updated
• Customer emailed “Rejected / slot released”

9) Cancel / Reschedule (Customer self-service, Client approves)

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

Thumbs up if everything okay 👍