Launch with Waitlist

Want to build anticipation for your product? Let's set up a waitlist to gather early users! Here's how to do it step by step. ✨

Prerequisites 📋

1. Set Up Your Database 💾 First, make sure your database is configured properly. Follow our database setup guide if you haven't already.

2. Enable Sign In 🔐

   # Add to your .env file
   NEXT_PUBLIC_SIGNIN_ENABLED=true
   
   # Run auth setup command
   npx auth secret

   This command will set up secure authentication with proper encryption keys.

3. Configure Admin Access 👑

   # Add to your .env file
   SUPER_ADMIN_EMAILS=admin@example.com,admin2@example.com

   🔑 Important Make sure to use the email addresses you'll use to sign in as admin.

Authentication Setup 🛡️

4. Set Up Authentication You have two options:
   • Email Authentication Setup Guide
   • Google Login Setup Guide

Managing Your Waitlist 📊

5. Access Admin Dashboard

   http://localhost:3000/super-admin/waitlist

   Here you can:

   • View all waitlist signups
   • Export user data

6. Waitlist Landing Page

   http://localhost:3000/join-waitlist

   This is where users can:

   • Join your waitlist
   • Learn about your product

Automatic Email Notifications 📧

7. Configure Waitlist Emails Customize the waitlist API route to send automatic welcome emails:

   // src/app/api/waitlist/route.ts
   import { sendMail } from '@/lib/email/sendMail'
   import { NextResponse } from 'next/server'
   import { WaitlistWelcome } from '@/emails/waitlist-welcome'
   
   export async function POST(req: Request) {
     try {
       const body = await req.json()
       const { email, name } = body
   
       // Existing waitlist logic here...
   
       // Send welcome email
       await sendMail({
         to: email,
         subject: "Welcome to the Waitlist! 🎉",
         html: render(
            <WaitlistWelcome email={email} name={name} />
         )
       })
   
       return NextResponse.json({ success: true })
     } catch (error) {
       return NextResponse.json(
         { error: "Failed to join waitlist" },
         { status: 500 }
       )
     }
   }

   💡 Pro Tip Check out our Sending Emails tutorial for more email customization options!

Changes to your codebase 🎨

8. Update CTA Elements Modify these files to customize your waitlist messaging:

   // src/components/website/hero.tsx
   <Button
     size="lg"
     asChild
     className="animate-fade-up"
   >
     <Link href="/join-waitlist">
       Join the Waitlist ✨
     </Link>
   </Button>

   // src/components/layout/header.tsx
   <Button asChild variant="secondary">
     <Link href="/join-waitlist">
       Join Waitlist
     </Link>
   </Button>

   💡 Pro Tip Use compelling copy that creates urgency and excitement! Examples:

   • "Get Early Access"
   • "Join the Exclusive Beta"
   • "Be the First to Know"

Launch Time 🚀

9. Deploy Your Waitlist Ready to go live? Follow our deployment guide to launch your waitlist.

Best Practices 💫

1. Email Communication 📧

   • Send a welcome email immediately (automatically)
   • Keep users updated on progress (send emails manually or automatically)
   • Provide exclusive previews (send emails manually or automatically)
   • Customize email templates for your brand (see Sending Emails tutorial)

2. Waitlist Management 📝

   • Regularly check your admin dashboard
   • Engage with early signups (automatic and manual)
   • Plan your onboarding strategy

3. Marketing Tips 🎯

   • Share on social media
   • Create FOMO with limited spots
   • Offer early-bird benefits
   • Use email campaigns effectively

Now you're ready to launch your product with a waitlist! Build that anticipation and grow your user base! 🚀