feat(landing):add sdk waitlist

Author: will-lp1

apps/saru/app/api/waitlist/route.ts

@@ -0,0 +1,52 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { addToWaitlist, getWaitlistCount, checkEmailInWaitlist } from '@/lib/db/queries';
+
+const joinWaitlistSchema = z.object({
+  email: z.string().email(),
+});
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { email } = joinWaitlistSchema.parse(body);
+
+    // Check if email already exists
+    const alreadyExists = await checkEmailInWaitlist({ email });
+    if (alreadyExists) {
+      return NextResponse.json(
+        { error: 'Email already on waitlist' },
+        { status: 400 }
+      );
+    }
+
+    await addToWaitlist({ email });
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Invalid email address' },
+        { status: 400 }
+      );
+    }
+    console.error('[Waitlist API] Error:', error);
+    return NextResponse.json(
+      { error: 'Failed to join waitlist' },
+      { status: 500 }
+    );
+  }
+}
+
+export async function GET() {
+  try {
+    const count = await getWaitlistCount();
+    return NextResponse.json({ count });
+  } catch (error) {
+    console.error('[Waitlist API] Error getting count:', error);
+    return NextResponse.json(
+      { error: 'Failed to get waitlist count', count: 0 },
+      { status: 500 }
+    );
+  }
+}
+

apps/saru/app/sdk/page.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronRight } from "lucide-react";
+import { toast } from "sonner";
+import useSWR from "swr";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { AnimatePresence, motion } from "framer-motion";
+
+const formSchema = z.object({
+  email: z.string().email(),
+});
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+type FormSchema = z.infer<typeof formSchema>;
+
+function useWaitlistCount() {
+  const { data, mutate } = useSWR<{ count: number }>(
+    "/api/waitlist",
+    fetcher,
+    {
+      revalidateOnFocus: false,
+    },
+  );
+
+  return { count: data?.count ?? 0, mutate } as const;
+}
+
+export default function SDKPage() {
+  const [email, setEmail] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const waitlist = useWaitlistCount();
+
+  async function joinWaitlist(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    const validation = formSchema.safeParse({ email });
+    if (!validation.success) {
+      toast.error("Please enter a valid email address");
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch("/api/waitlist", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ email }),
+      });
+
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.error || "Something went wrong");
+
+      setSuccess(true);
+      setEmail("");
+      waitlist.mutate({ count: waitlist.count + 1 }, false);
+    } catch (error) {
+      const msg =
+        error instanceof Error ? error.message : "Something went wrong. Please try again.";
+      toast.error(msg);
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center px-6 py-16 md:px-8 lg:px-12">
+      <div className="flex w-full max-w-3xl flex-col items-center gap-6 text-center">
+        <header className="space-y-2">
+          <p className="text-lg text-muted-foreground">
+            Join the waitlist to get early access to the SDK for <i>AI-Native writing interfaces</i>.
+          </p>
+        </header>
+
+        <AnimatePresence mode="wait" initial={false}>
+          {success ? (
+            <motion.div
+              key="success"
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -12 }}
+              transition={{ duration: 0.25, ease: "easeOut" }}
+              className="flex h-11 w-full items-center justify-center"
+            >
+              <p className="text-sm font-medium text-muted-foreground">
+                You're in! We'll keep you posted.
+              </p>
+            </motion.div>
+          ) : (
+            <motion.form
+              key="form"
+              onSubmit={joinWaitlist}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -12 }}
+              transition={{ duration: 0.25, ease: "easeOut" }}
+              className="flex w-full max-w-lg flex-col gap-3 sm:flex-row"
+            >
+              <Input
+                type="email"
+                placeholder="example@email.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="h-11 w-full rounded-md px-4 text-base font-medium placeholder:font-medium placeholder:text-muted-foreground md:text-base"
+                disabled={isSubmitting}
+                required
+              />
+              <Button
+                variant="outline"
+                type="submit"
+                className="h-11 w-full pl-4 pr-3 text-base sm:w-fit"
+                disabled={isSubmitting}
+              >
+                Join Waitlist <ChevronRight className="ml-1 h-5 w-5" />
+              </Button>
+            </motion.form>
+          )}
+        </AnimatePresence>
+
+        <div className="relative flex flex-row items-center justify-center gap-2">
+          <span className="size-2 rounded-full bg-green-600 dark:bg-green-400" />
+          <span className="absolute left-0 size-2 rounded-full bg-green-600 blur-xs dark:bg-green-400" />
+          <span className="text-sm text-green-600 dark:text-green-400 sm:text-base">
+            {waitlist.count.toLocaleString()} people already joined
+          </span>
+        </div>
+      </div>
+    </main>
+  );
+}

apps/saru/lib/db/queries.ts

@@ -1224,3 +1224,41 @@ export async function deleteMessageById({
     throw error;
   }
 }
+
+export async function addToWaitlist({ email }: { email: string }): Promise<void> {
+  try {
+    await db.insert(schema.waitlist).values({
+      email,
+      createdAt: new Date(),
+    });
+  } catch (error) {
+    console.error('Error adding to waitlist:', error);
+    throw error;
+  }
+}
+
+export async function getWaitlistCount(): Promise<number> {
+  try {
+    const [{ count }] = await db
+      .select({ count: sql<number>`count(*)` })
+      .from(schema.waitlist);
+    return Number(count);
+  } catch (error) {
+    console.error('Error getting waitlist count:', error);
+    return 0;
+  }
+}
+
+export async function checkEmailInWaitlist({ email }: { email: string }): Promise<boolean> {
+  try {
+    const result = await db
+      .select({ id: schema.waitlist.id })
+      .from(schema.waitlist)
+      .where(eq(schema.waitlist.email, email))
+      .limit(1);
+    return result.length > 0;
+  } catch (error) {
+    console.error('Error checking email in waitlist:', error);
+    return false;
+  }
+}

packages/db/migrations/0002_deep_power_man.sql

@@ -0,0 +1,6 @@
+CREATE TABLE IF NOT EXISTS "waitlist" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"email" text NOT NULL,
+	"created_at" timestamp DEFAULT now() NOT NULL,
+	CONSTRAINT "waitlist_email_unique" UNIQUE("email")
+);