Early Access Feature

The Early Access feature provides a controlled rollout mechanism for the Jubiloop marketing site, allowing users to sign up for early access while maintaining a professional landing experience.

Overview

The Early Access feature consists of:

1. Standalone Landing Page - A dedicated page at /early-access with signup functionality
2. Smart Redirects - Environment-controlled redirects to funnel traffic to the early access page
3. Newsletter Integration - Backend API for collecting and managing early access signups

Architecture

Frontend Components

The early access page is built with several key components:

src/components/early-access/
├── CTA.tsx              # Signup form with validation
├── Confetti.tsx         # Celebration animation
├── EventTypeCard.tsx    # Event category showcase
├── FeatureCard.tsx      # Feature highlights
├── Footer.tsx           # Social links and branding
├── Header.tsx           # Navigation and branding
├── IdeaBlockPreview.tsx # Interactive demo preview
├── Preview.tsx          # Main preview section
└── VisionBlurb.tsx      # Vision statement

Data Structure

Event types and features are defined in src/data/earlyAccess.ts:

export const eventTypesData = [
  {
    icon: <Heart className="h-5 w-5 text-pink-600" />,
    title: 'Life Celebrations',
    description: 'Make your most precious moments unforgettable...',
    examples: ['Weddings', 'Birthdays', 'Anniversaries', ...]
  },
  // ... more event types
]

export const featuresData = [
  {
    icon: <Search className="h-8 w-8 text-blue-600" />,
    title: 'Smart Vendor Matching',
    description: 'AI-powered matching connects you with perfect local vendors...',
    highlight: 'Find 5x more relevant vendors in minutes, not hours'
  },
  // ... more features
]

Configuration

Environment Variables

The early access redirects are controlled by environment variables:

# Enable/disable early access redirects
ENABLE_GLOBAL_REDIRECTS=true

# API endpoints for newsletter signup
NEXT_PUBLIC_API_URL=https://api.jubiloop.ca

Next.js Configuration

The redirect logic is implemented in next.config.ts:

const isRedirectsEnabled = process.env.ENABLE_GLOBAL_REDIRECTS === 'true'

const nextConfig: NextConfig = {
  async redirects() {
    if (!isRedirectsEnabled) return []

    return [
      {
        source: '/((?!early-access|favicon.ico|sitemap.xml|robots.txt).*)',
        destination: '/early-access',
        permanent: false,
      },
    ]
  },
}

Redirect Behavior:

• When ENABLE_GLOBAL_REDIRECTS=true: All routes except /early-access, /favicon.ico, /sitemap.xml, and /robots.txt redirect to /early-access
• When ENABLE_GLOBAL_REDIRECTS=false or unset: No redirects occur, normal site navigation works

Backend Integration

Newsletter Subscription API

The backend provides a newsletter subscription endpoint:

POST /newsletter/subscribe
Content-Type: application/json

{
  "email": "user@example.com"
}

Response:

{
  "success": true,
  "message": "Successfully subscribed to the newsletter."
}

Email Services

The early access feature uses the Email Infrastructure for newsletter subscriptions:

• Brevo - Subscriber list management and newsletter campaigns
• Resend - Welcome email delivery and transactional emails

For detailed configuration and service information, see the Email Infrastructure documentation.

Development Workflow

Local Development

1. Enable Redirects:

   # In apps/marketing/.env.local
   ENABLE_GLOBAL_REDIRECTS=true
   NEXT_PUBLIC_API_URL=http://localhost:3333

2. Start Services:

   # Terminal 1: Start backend
   cd apps/server && npm run dev
   
   # Terminal 2: Start marketing site
   cd apps/marketing && npm run dev

3. Test Flow:

   • Visit http://localhost:3000 → Should redirect to /early-access
   • Visit http://localhost:3000/early-access → Should show early access page
   • Submit email → Should call backend API

Testing Different States

With Redirects Enabled:

ENABLE_GLOBAL_REDIRECTS=true

• All traffic redirected to early access page
• Normal site navigation blocked

With Redirects Disabled:

ENABLE_GLOBAL_REDIRECTS=false
# or unset the variable

• Normal site navigation works
• Early access page still accessible at /early-access

Deployment

Environment-Specific Configuration

The env.deploy.yml file includes email service configuration for all environments:

DEV:
  server:
    # Email Service
    RESEND_API_KEY: 'from_secrets'
    RESEND_FROM_NAME: '${{ vars.DEV_RESEND_FROM_NAME }}'
    RESEND_FROM_EMAIL: '${{ vars.DEV_RESEND_FROM_EMAIL }}'
    BREVO_API_KEY: 'from_secrets'
    BREVO_NEWSLETTER_SUBSCRIBER_LIST_ID: '${{ vars.DEV_BREVO_NEWSLETTER_SUBSCRIBER_LIST_ID }}'

QA:
  server:
    # Email Service
    RESEND_API_KEY: 'from_secrets'
    RESEND_FROM_NAME: '${{ vars.QA_RESEND_FROM_NAME }}'
    RESEND_FROM_EMAIL: '${{ vars.QA_RESEND_FROM_EMAIL }}'
    BREVO_API_KEY: 'from_secrets'
    BREVO_NEWSLETTER_SUBSCRIBER_LIST_ID: '${{ vars.QA_BREVO_NEWSLETTER_SUBSCRIBER_LIST_ID }}'

PROD:
  server:
    # Email Service
    RESEND_API_KEY: 'from_secrets'
    RESEND_FROM_NAME: '${{ vars.PROD_RESEND_FROM_NAME }}'
    RESEND_FROM_EMAIL: '${{ vars.PROD_RESEND_FROM_EMAIL }}'
    BREVO_API_KEY: 'from_secrets'
    BREVO_NEWSLETTER_SUBSCRIBER_LIST_ID: '${{ vars.PROD_BREVO_NEWSLETTER_SUBSCRIBER_LIST_ID }}'

GitHub Secrets Required

The following secrets must be configured in GitHub:

Development:

• DEV_RESEND_API_KEY
• DEV_BREVO_API_KEY
• DEV_RESEND_FROM_NAME
• DEV_RESEND_FROM_EMAIL
• DEV_BREVO_NEWSLETTER_SUBSCRIBER_LIST_ID

QA:

• QA_RESEND_API_KEY
• QA_BREVO_API_KEY
• QA_RESEND_FROM_NAME
• QA_RESEND_FROM_EMAIL
• QA_BREVO_NEWSLETTER_SUBSCRIBER_LIST_ID

Production:

• RESEND_API_KEY
• BREVO_API_KEY
• RESEND_FROM_NAME
• RESEND_FROM_EMAIL
• BREVO_NEWSLETTER_SUBSCRIBER_LIST_ID

Feature Flags

Marketing Site Flags

The marketing site supports several feature flags via environment variables:

# Early Access Redirects
ENABLE_GLOBAL_REDIRECTS=true

# Analytics (optional)
NEXT_PUBLIC_ENABLE_ANALYTICS=true
NEXT_PUBLIC_ANALYTICS_ID=your_analytics_id
NEXT_PUBLIC_GTM_ID=your_gtm_id

# Beta Features
NEXT_PUBLIC_ENABLE_BETA_FEATURES=false

# Maintenance Mode
NEXT_PUBLIC_MAINTENANCE_MODE=false

Usage Patterns

Soft Launch:

ENABLE_GLOBAL_REDIRECTS=true
NEXT_PUBLIC_MAINTENANCE_MODE=false

Full Launch:

ENABLE_GLOBAL_REDIRECTS=false
NEXT_PUBLIC_MAINTENANCE_MODE=false

Maintenance:

ENABLE_GLOBAL_REDIRECTS=false
NEXT_PUBLIC_MAINTENANCE_MODE=true

Monitoring & Analytics

Newsletter Metrics

Track newsletter signup performance through:

1. Brevo Dashboard - Subscriber growth, engagement rates
2. Resend Dashboard - Email delivery rates, bounce rates
3. Backend Logs - API call volumes, error rates

Key Metrics

• Daily signup volume
• Email validation success rate
• Welcome email open rate
• Duplicate subscription attempts

Troubleshooting

Common Issues

Redirects Not Working:

1. Check ENABLE_GLOBAL_REDIRECTS environment variable
2. Verify Next.js configuration
3. Clear browser cache

Newsletter Signup Fails:

1. Check API endpoint configuration
2. Verify email service credentials
3. Check backend logs for errors

Email Not Received:

1. Check spam folder
2. Verify Resend configuration
3. Check email service logs

Debug Commands

# Check environment variables
echo $ENABLE_GLOBAL_REDIRECTS
echo $NEXT_PUBLIC_API_URL

# Test API endpoint
curl -X POST https://api.jubiloop.ca/newsletter/subscribe \
  -H "Content-Type: application/json" \
  -d '{"email":"test@example.com"}'

# Check backend logs
docker logs server

Future Enhancements

Planned Features

1. A/B Testing - Test different early access page variations
2. Progressive Rollout - Gradually increase traffic to early access
3. Custom Domains - Support for custom early access domains
4. Analytics Integration - Track user behavior and conversion rates
5. Social Sharing - Viral referral system for early access

Technical Improvements

1. Rate Limiting - Prevent abuse of signup endpoint
2. Email Verification - Double opt-in for newsletter subscriptions
3. Geographic Targeting - Region-specific early access rollouts
4. Personalization - Dynamic content based on user preferences