LogoTanStarter Docs
LogoTanStarter Docs
HomepageIntroductionCodebaseGetting StartedEnvironments
Configuration
Deployment

Integrations

CloudflareDatabaseAuthenticationEmailNewsletterStoragePaymentNotificationsAnalyticsChatboxAffiliates

Customization

MetadataPagesLanding PageBlogComponentsUser ManagementAPI Key Management

Codebase

Project StructureFormatting & LintingEditor SetupUpdating the Codebase
X (Twitter)

Newsletter

Learn how to set up and use Resend for newsletter subscription management

TanStarter uses Resend to manage newsletter subscriptions.

Setup

Create Resend Account

Create a Resend account at resend.com.

Get API Key

Click API Keys > Create API Key, set permissions to Send emails or Full access. Copy the API Key and add it to your environment file:

.env
RESEND_API_KEY=your-resend-api-key

Update Website Configuration

Update the website configuration to use Resend for newsletter management:

src/config/website.ts
export const websiteConfig = {
  // ...other config
  newsletter: {
    enable: true,
    provider: 'resend',
    autoSubscribeAfterSignUp: true, // Auto-subscribe users after registration
  },
  // ...other config
}

If you are setting up your environment, you can now go back to the Environment Configuration and continue. The rest of this document can be read later.

Environment Configuration

Set up environment variables

Customization

Creating a Custom Provider

If you need to use a different newsletter service, you can create a custom provider:

  1. Create a new file in the src/newsletter/provider directory
  2. Implement the NewsletterProvider interface
src/newsletter/provider/custom-provider.ts
import type {
  CheckSubscribeStatusParams,
  NewsletterProvider,
  SubscribeNewsletterParams,
  UnsubscribeNewsletterParams,
} from '@/newsletter/types';

export class CustomNewsletterProvider implements NewsletterProvider {
  constructor() {
    // Initialize your newsletter service provider
  }

  public getProviderName(): string {
    return 'custom';
  }

  async subscribe({ email }: SubscribeNewsletterParams): Promise<boolean> {
    // Subscribe user implementation
    return true;
  }

  async unsubscribe({ email }: UnsubscribeNewsletterParams): Promise<boolean> {
    // Unsubscribe user implementation
    return true;
  }

  async checkSubscribeStatus({ email }: CheckSubscribeStatusParams): Promise<boolean> {
    // Check subscription status implementation
    return true;
  }
}
  1. Register the new provider in the providerRegistry in src/newsletter/index.ts:
src/newsletter/index.ts
import { CustomNewsletterProvider } from './provider/custom-provider';

const providerRegistry: Record<NewsletterProviderName, ProviderFactory> = {
  resend: () => new ResendNewsletterProvider(),
  custom: () => new CustomNewsletterProvider(),
};

Next Steps

Now that you understand how to use newsletter subscriptions in TanStarter, you might want to explore these related features:

Email

Configure email services

Authentication

Configure user authentication

Analytics

Configure analytics services

Storage

Configure storage services

Table of Contents

Setup
Create Resend Account
Get API Key
Update Website Configuration
Customization
Creating a Custom Provider
Next Steps