KRACKED_OS
SECURE CONNECTION
BETA v1.4.0

Need any comment/suggestion/advice/enhancement

Asked Viewed 40 times
1
1 votes

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:
  1. Open landing page
  2. 1 package (base)
  3. Select add-ons:
  • Physical photo
  • Frame
  • etc
  1. 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):
  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
  1. Write/Update Google Sheet row (1 booking = 1 row)
  2. 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 👍

website
free
integration
booking
raya raya raya raya raya
asked 5 days agoMarot.js
M

1 Answers

0
0 votes

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

  1. Google Calendar API: Using this for availability checks is standard, but consider caching capabilities to avoid exceeding the quota during busy times.
  2. 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.
  3. Supabase Postgres: Ideal for rapid development. Monitor database performance as growth may necessitate optimization.
  4. 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!
answered 5 days ago4kmal
4
M
Marot.js•4 days ago
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!
Your Answer
X / Twitter
TikTok
Discord