Connect WaitlistForm to Supabase (API + form)

[aguilar1x]

Description

Context

The waitlist is already backed by Supabase (Docker + public.waitlist table) from a previous issue. The form (src/components/WaitlistForm.tsx) must submit to our API so that the data is stored only in the database (public.waitlist).

Prerequisites: Supabase local setup and public.waitlist table exist (migrations + seed applied). The Supabase client is available (src/lib/supabase.ts with fallbacks).

---

Form to connect

• File: src/components/WaitlistForm.tsx
• Fields: email (required), company (optional), message (optional, use case text)
• Goal: Submit to POST /api/waitlist; data must be persisted only in public.waitlist.
• UX to keep: Validation (email format), loading state, success/error messages, form reset on success
• Honeypot: Hidden field for bot protection; if filled, do not submit

---

Goals

1. Add API route POST /api/waitlist

   • Location: src/app/api/waitlist/route.ts (or equivalent in your App Router structure).
   • Behavior:
     • Accept POST with JSON body: { email: string, company_name?: string, use_case?: string }.
     • Validate email (required, valid format). Return 400 with a clear message if invalid or missing.
     • Use the server-side Supabase client (createServerClient() or client built with SUPABASE_SERVICE_ROLE_KEY) to insert one row into public.waitlist with email, company_name, use_case (all optional except email).
     • On success, return 201 and optionally { ok: true } or similar.
     • If Supabase returns a unique constraint violation on email, return 409 Conflict with a message like "This email is already on the waitlist" so the frontend can show a friendly message.
     • If Supabase client is using placeholders (no real credentials), the insert will fail; handle that gracefully (return 503 or 500 with a generic message like "Waitlist is temporarily unavailable").
   • Security: Validate and sanitize input; do not expose internal errors. Optional: rate limiting or CAPTCHA in a follow-up.

2. Update WaitlistForm.tsx so data goes only to the database

   • Endpoint: POST /api/waitlist (fetch('/api/waitlist', { ... })).
   • Body: { email, company_name: company, use_case: message } (map form fields company → company_name, message → use_case). Do not send the honeypot to the API; use it only on the client (if set, do not submit).
   • UX: Required email, optional company and message, validation, loading state ("Submitting..."), success message ("Thank you! We will contact you soon."), form reset on success.
   • Error handling:
     • 409 (email already on waitlist): show "This email is already on the waitlist."
     • 400: show validation message or "Please check your email and try again."
     • 5xx / network error: show "Something went wrong. Please try again later."

---

Acceptance criteria

• POST /api/waitlist exists, validates email, inserts into public.waitlist via Supabase server client, returns 201 on success.
• API returns 409 when email is already in the table (unique constraint) with a clear body/message.
• API handles missing/invalid Supabase config (placeholder) without leaking internals (503 or generic 500).
• WaitlistForm submits to POST /api/waitlist with body { email, company_name, use_case }; honeypot and client-side validation unchanged.
• Success and error states (including "already on waitlist") are shown in the UI; form resets on success.
• Waitlist data exists only in the database (public.waitlist); no other submission target.

---

References

• Table schema: public.waitlist with id, email (unique), company_name, use_case, created_at.
• Supabase server client: use the same pattern as in the Supabase setup issue (createServerClient() in src/lib/supabase.ts).
• Existing form: src/components/WaitlistForm.tsx (fields email, company, message; honeypot botField).

---

[chiscookeke11]

Hello Aguila1x, I am Chinedu, a frontend dev with good experience with supabase. I would love to resolve this issue.

[jimenezz22]

Hi team! Happy to help you with this issue, I'm og contributor in the OSS and proven experience as a software engineer

[Chucks1093]

I have solid experience with building apps using Supabase and firebase. If this issue is urgent I am fully available to resolve it in 30 minutes.

[Agbeleshe]

Hello, please can I tackle this issue. I have over 5 years of experience building full-stack form workflows using Next.js API routes and secure database integrations with Supabase, including validation, server-side data handling, and production-ready UX states. Based on the requirements, the complexity is low to moderate since the database schema and Supabase setup already exist and the task mainly involves implementing a typed POST API route, handling validation and error states (including unique constraint responses), mapping the existing form fields to the backend contract, and ensuring proper loading, success, and failure UI flows while preserving the honeypot logic. I will implement a secure server-side insert with sanitized inputs, structured error handling for 400/409/5xx cases, and update the WaitlistForm submission logic to ensure data is stored only in public.waitlist with clean UX feedback and form reset behavior. Estimated completion time is within 1 day.

[gelluisaac]

I’m interested in tackling this! I have a strong background in smart contract development and full-stack systems, so I'm well-equipped to handle the requirements here. Could you please assign this to me?

[Uyoxy]

Hi

I’d love to take this on.

I have experience with Next.js App Router + Supabase, including secure server-side inserts and clean API error handling.

For this task, I will:

✅ Implement POST /api/waitlist with proper email validation and safe error handling

✅ Insert into public.waitlist using the server-side Supabase client

✅ Return correct status codes (201, 400, 409, 503/500)

✅ Update WaitlistForm.tsx to submit only to the API (mapping fields correctly, excluding honeypot)

✅ Preserve validation, loading state, success/error messages, and reset on success

I’ll ensure no internal errors are leaked and that all data is persisted only in the database as required.

[ryzen-xp]

Hi maintainers 👋
I’m a blockchain developer with strong expertise in Stellar, Rust,TS and Stellar SDK integrations. I’ve worked on multiple Stellar-based smart contract and backend systems.

I understand the scope of this issue and can deliver a reliable, production-quality solution with proper tests and documentation.
Plz assign me !!

ETA: 24 hours

[respp]

Hello @aguilar1x! Can I take this issue?

I'm a developer with a solid background in Web3, working across both front-end and back-end. Currently, I'm a maintainer at Slice, where I lead the development of smart contracts and decentralized infrastructure. You can check out my profile to see my contributions to the most important projects within the Stellar ecosystem.

Additionally, I have experience working in other ecosystems such as StarkNet, Optimism, and Worldcoin, with a focus on building scalable, secure, and efficient blockchain applications.

[1sraeliteX]

I’d like to work on implementing the waitlist submission flow backed by Supabase.

I’ll add the POST /api/waitlist route to validate input, securely insert records into public.waitlist using the server-side Supabase client, and handle edge cases such as duplicate emails and unavailable configuration. I’ll also update WaitlistForm.tsx to submit exclusively to the API with proper validation, honeypot protection, loading states, and clear success/error feedback.

The goal is a secure, database-only persistence flow with clean UX and resilient error handling.

[Emmzyemms]

I’d like to work on this frontend issue. I have experience with Web3 UI integration, wallet connections, and responsive React-based interfaces.
I can start immediately. Thanks!

[felipevega2x]

Hi, I'm a frontend developer and Rust enthusiast. I'm really interested in working on this issue and continuing to learn.