📝 Waitlist Module

Complete waitlist system with email collection, validation, duplicate checking, and email confirmations.

✨ Features
Validation

Email Validation

Built-in email format validation with Zod

Duplicates

Duplicate Prevention

Automatic duplicate email checking

Position

Queue Position

Automatic position tracking in waitlist

Email

Email Confirmations

Welcome and approval email notifications

Hooks

React Hooks

useWaitlist hook for easy integration

API

REST API

Complete API endpoints for waitlist management

🚀 Installation
npx shadcn@latest add "https://supremetoolkit.in/r/waitlist-module"

This installs:

  • • WaitlistForm component with validation
  • • useWaitlist hook for state management
  • • Server actions for waitlist operations
  • • API routes for REST endpoints
  • • Email integration for confirmations
  • • Duplicate checking and position tracking
  • • Required dependencies (zod for validation)
🔧 Environment Variables & Setup

Email Integration Required

The waitlist module requires email functionality for sending confirmation emails. Install and configure the mailer module first.

1. Install Mailer Module (Required):

npx shadcn@latest add "https://supremetoolkit.in/r/mailer-module"

2. Configure Email Provider:

Choose one email provider (Resend recommended):

# .env.local
# Option 1: Resend (Recommended)
RESEND_API_KEY=re_your_api_key_here

# Option 2: SMTP
# EMAIL_PROVIDER=smtp
# SMTP_HOST=smtp.your-provider.com
# SMTP_USER=your-email@domain.com
# SMTP_PASSWORD=your-password

# Option 3: Gmail
# EMAIL_PROVIDER=gmail
# GMAIL_USER=your-email@gmail.com
# GMAIL_APP_PASSWORD=your-app-password

3. Configure Waitlist Settings in config.tsx:

export const toolkitConfig: ToolkitConfig = {
  waitlist: {
    successRedirect: '/thanks',
    emailNotifications: true,
    autoApprove: false, // Set to true to auto-approve all signups
  },
  // ... other config
};

Database Storage

The waitlist module stores data in memory by default. For production, consider integrating with a database or external service like Airtable, Notion, or a simple JSON file.

📦 What's Included

WaitlistForm

Complete waitlist signup form with validation and success states

<WaitlistForm title="Join the Waitlist" />
🔧 Usage Examples

Simple waitlist form:

import { WaitlistForm } from '@/components/ui/waitlist-form';

export default function LandingPage() {
  return (
    <div className="max-w-md mx-auto">
      <WaitlistForm 
        title="Join the Waitlist"
        description="Be the first to know when we launch!"
        placeholder="Enter your email address"
        buttonText="Join Waitlist"
      />
    </div>
  );
}
⚙️ Configuration

Email Integration:

// The waitlist module automatically integrates with the mailer module
// Make sure you have email configured (Resend or SMTP)

// .env.local
RESEND_API_KEY=re_your_api_key_here
EMAIL_FROM=noreply@yourdomain.com

// Or for SMTP
EMAIL_PROVIDER=smtp
SMTP_HOST=smtp.yourdomain.com
SMTP_USER=your-email@yourdomain.com
SMTP_PASSWORD=your-password

Database Storage:

Note: The current implementation uses in-memory storage for demo purposes. In production, replace the waitlistStore in actions/waitlist-actions.ts with your database (PostgreSQL, MySQL, etc.).

Customizing Email Templates:

// Modify the email templates in lib/mailer-resend.ts or lib/mailer-nodemailer.ts

export async function sendWaitlistWelcomeEmail(
  email: string,
  name?: string,
  position?: number
) {
  const html = WaitlistWelcomeTemplate({
    name,
    position,
    companyName: "Your Company Name",
    // Add your custom template variables
  });

  return await sendEmail({
    to: email,
    subject: "Welcome to our waitlist!",
    html
  });
}
🔧 Server Actions

Customizing server actions:

// actions/waitlist-actions.ts

export async function onAddWaitlist(params: {
  email: string;
  name?: string;
  referralCode?: string;
}) {
  // Add your custom business logic here:

  // 1. Custom validation
  if (params.email.includes('spam')) {
    return { success: false, error: 'Invalid email domain' };
  }

  // 2. Referral code processing
  if (params.referralCode) {
    // Process referral code, give priority position, etc.
    console.log('Processing referral:', params.referralCode);
  }

  // 3. Analytics tracking
  // await trackEvent('waitlist_signup', { email: params.email });

  // 4. Integration with other services
  // await addToMailchimpList(params.email);
  // await notifySlack(`New waitlist signup: ${params.email}`);

  // ... rest of the function
}
🌟 Best Practices

Database Storage

Replace in-memory storage with a proper database (PostgreSQL, MySQL) for production use.

Email Configuration

Set up email properly before deploying. Test with the mailer module to ensure emails are delivered.

Validation

Add custom validation rules for your specific use case (domain restrictions, etc.).

Analytics

Track waitlist signups and conversions to measure the effectiveness of your waitlist.

Privacy

Ensure compliance with privacy laws (GDPR, CCPA) when collecting email addresses.

User Experience

Provide clear feedback about waitlist position and expected timeline to manage user expectations.

🚀 Advanced Features

Referral System:

The waitlist module supports referral codes. You can implement custom logic to:

  • • Give priority positions to referred users
  • • Track referral sources and effectiveness
  • • Reward users who refer others
  • • Create viral growth loops

Status Management:

Each waitlist entry has a status that you can update:

  • • pending - Default status for new signups
  • • approved - User has been approved and notified
  • • rejected - User has been rejected (optional)
  • • converted - User has completed signup/purchase

Integration Ideas:

  • • Connect to your CRM (HubSpot, Salesforce)
  • • Add to email marketing lists (Mailchimp, ConvertKit)
  • • Send notifications to Slack or Discord
  • • Track events in analytics (Google Analytics, Mixpanel)
  • • Create admin dashboard for waitlist management