Need any comment/suggestion/advice/enhancement

Marotjs6 months ago

websitefreeintegrationbookingraya raya raya raya raya

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
Email
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

Thumbs up if everything okay 👍

Suggestions and Enhancements for Your Proposed Stack

Overall Feasibility

Your proposed stack is generally solid for a seasonal project, especially given the client's constraints regarding costs. However, there are some potential pitfalls and optimizations that I'd recommend considering.

Frontend

Next.js 14 (App Router): Great choice for server-side rendering and static site generation. It will enhance performance and SEO, beneficial even for a short-term event.

Tailwind CSS: Suitable for rapid prototyping and responsiveness, aligning nicely with the project demands.

Backend

Next.js Server Actions + Route Handlers: Efficient for handling your needs without a separate backend, but keep an eye on performance with potentially high traffic during peak times.

Secure Signed Tokens: Vital for protecting sensitive actions. Ensure you implement robust security practices.

Core Integrations

Google Calendar API: Using this for availability checks is standard, but consider caching capabilities to avoid exceeding the quota during busy times.

Google Sheets API: Great for simple reporting, especially with low traffic. If the client scales, consider moving to a more robust database solution for analytics.

Supabase Postgres: Ideal for rapid development. Monitor database performance as growth may necessitate optimization.

Supabase Storage: Locking files and ensuring immutability is excellent, but you'll want to think about data retention policies since this is a seasonal application.

Email System

Resend: Solid choice for handling transactional emails. Ensure you monitor the rate limits associated with the free tier.

React Email: Good for templated emails, but keep template management simple to avoid overwhelming the client.

Infrastructure

Vercel Hosting: Perfect for a Next.js application, especially for its free tier which suits your needs.

Vercel Free Domain: This is ideal for keeping costs down, but consider potential limitations (custom domains might be more professional).

Potential Downsides and Improvements

Rate Limiting: Be wary of any API usage limits, especially with Google APIs. Implement error handling for cases like quota-exceeded errors.

Performance: Since it’s a seasonal event, the app’s performance should be lightly monitored. Consider load testing lightly as the event approaches.

Booking Systems: Double-check availability logic to ensure concurrency issues don't arise, especially with multiple users attempting to book the same slot.

User Experience (UX): Simplify forms as much as possible; too many fields may deter users from completing their bookings. A clear progression (perhaps using a progress bar) can enhance user interaction.

Final Thoughts

As this is a test run for the market, your stack aligns well with minimal budget requirements. However, remain vigilant on performance, security, and user experience as the event approaches. If the event is successful, this setup can always evolve into a more robust solution.

If you have specific questions on certain technologies or integrations, feel free to ask!

Thanks for the detailed breakdown. Valid points on the concurrency issues and Google API rate limits. To mitigate these, I plan to: 1. Implement database-level constraints in Supabase to prevent double booking. 2. Add simple caching or implement a queue system like Redis regarding the Google API rate limiting. 3. Keep the UX minimal with a progress indicator as suggested. Will proceed with this adjusted plan. Thanks!

Need any comment/suggestion/advice/enhancement

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)

1) Landing → Package & Add-ons

2) Select Date

3) Select Time

4) Customer Details

5) Payment Choice

6) Upload Receipt

7) Submit Booking (Atomic Server Action)

8) Client Payment Verification (Email-Driven)

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

Cancel

Reschedule

LATEST FINAL STACK (v2)

Frontend

Backend

Core Integrations

Email System (locked)

Infra(Free Version)

Thumbs up if everything okay 👍

1 answer

Suggestions and Enhancements for Your Proposed Stack

Overall Feasibility

Frontend

Backend

Core Integrations

Email System

Infrastructure

Potential Downsides and Improvements

Final Thoughts