### Set Up Environment Variables

Source: https://docs.tanstarter.dev/docs/start

Copy the example environment file to create your own `.env` file. Refer to the Environment Configuration guide for details on variables.

```bash
cp .env.example .env
```

--------------------------------

### Install Project Dependencies

Source: https://docs.tanstarter.dev/docs/start

Install all necessary project dependencies using PNPM.

```bash
pnpm install
```

--------------------------------

### Install and Check GitHub CLI

Source: https://docs.tanstarter.dev/docs/start

Install the GitHub CLI using Homebrew for macOS. Follow official documentation for other platforms. Check if it's installed and log in.

```bash
brew install gh
```

```bash
gh --version
```

```bash
gh auth login
```

```bash
gh auth status
```

--------------------------------

### Check Git Installation

Source: https://docs.tanstarter.dev/docs/start

Verify if Git is installed on your system. Download from the Git official website if not present.

```bash
git --version
```

--------------------------------

### Check Node.js Installation

Source: https://docs.tanstarter.dev/docs/start

Verify if Node.js is installed. Download from the Node.js official website if not present.

```bash
node --version
```

--------------------------------

### Install and Check PNPM

Source: https://docs.tanstarter.dev/docs/start

Install PNPM globally using npm if you haven't already. Follow official documentation for other platforms. Check the installed version.

```bash
npm install -g pnpm
```

```bash
pnpm --version
```

--------------------------------

### Install Stripe CLI

Source: https://docs.tanstarter.dev/docs/payment/stripe

Install the Stripe CLI globally to manage Stripe resources and forward events locally.

```bash
pnpm install -g stripe/stripe-cli
```

--------------------------------

### Run Development Server to Verify Environment Variables

Source: https://docs.tanstarter.dev/docs/env

Execute this command to start the development server and verify that your environment variables are correctly configured. If successful, the application will run normally without errors.

```bash
pnpm run dev
```

--------------------------------

### Create Content-Based Page (FAQ)

Source: https://docs.tanstarter.dev/docs/pages

For content-heavy pages, create a Markdown file in `content/pages` and a corresponding route component in `src/routes/(pages)/`. This example shows a FAQ page.

```typescript
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/(pages)/faq')({
  component: FAQPage,
});

function FAQPage() {
  return (
    <div className="max-w-4xl mx-auto space-y-8 py-12">
      <h1 className="text-3xl font-bold">FAQ</h1>
      {/* Your content here */}
    </div>
  );
}
```

--------------------------------

### Example Blog Post Markdown

Source: https://docs.tanstarter.dev/docs/blog

An example of a blog post written in Markdown, including frontmatter fields for title, description, date, category, and image.

```markdown
---
title: My First Blog Post
description: This is a brief description of my first blog post.
date: 2026-01-15
category: Tutorial
image: https://example.com/images/blog/my-first-post.jpg
---

# Introduction

This is my first blog post. You can use **Markdown** here.

## Section 1

Some content here...

## Section 2

More content here...
```

--------------------------------

### Create Component-Based Page (Pricing)

Source: https://docs.tanstarter.dev/docs/pages

For pages with complex interactivity, create a route file in `src/routes/(pages)/` with custom components. This example demonstrates a Pricing page with SEO configuration.

```typescript
import { createFileRoute } from '@tanstack/react-router';
import { messages } from '@/messages';
import { seo } from '@/lib/seo';

export const Route = createFileRoute('/(pages)/pricing')({
  head: () => ({
    ...seo('pricing', {
      title: messages.pricing.title,
      description: messages.pricing.description,
    }),
  }),
  component: PricingPage,
});

function PricingPage() {
  return (
    <div className="max-w-4xl mx-auto space-y-8">
      <h1 className="text-center text-3xl font-bold">
        {messages.pricing.title}
      </h1>
      {/* Pricing components */}
    </div>
  );
}
```

--------------------------------

### Implement Slack Notification Provider

Source: https://docs.tanstarter.dev/docs/notification

Create a new notification provider by implementing the `NotificationProvider` interface. This example shows how to send a basic Slack message.

```typescript
import type {
  NotificationProvider,
  SendPaymentNotificationParams,
} from '../types';

export class SlackProvider implements NotificationProvider {
  private webhookUrl: string;

  constructor() {
    const webhookUrl = process.env.SLACK_WEBHOOK_URL;
    if (!webhookUrl) throw new Error('SLACK_WEBHOOK_URL is required.');
    this.webhookUrl = webhookUrl;
  }

  getProviderName(): string {
    return 'slack';
  }

  async sendPaymentNotification(
    params: SendPaymentNotificationParams
  ): Promise<void> {
    const { sessionId, customerId, userName, amount } = params;
    try {
      // Your Slack message implementation
      await fetch(this.webhookUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          text: `🎉 New Purchase\nUsername: ${userName}\nAmount: $${amount.toFixed(2)}`,
        }),
      });
    } catch (error) {
      console.error('Failed to send Slack notification:', error);
    }
  }
}
```

--------------------------------

### Clone TanStarter Template

Source: https://docs.tanstarter.dev/docs/start

Clone the template repository from GitHub to start your project. Navigate into the project directory.

```bash
git clone https://github.com/MkFastHQ/mkfast-template.git your-project-name

cd your-project-name
```

--------------------------------

### Example: Dashboard Section Card Component

Source: https://docs.tanstarter.dev/docs/components

Demonstrates creating a reusable section card component for the dashboard using Shadcn UI's Card component. Ensure to import necessary components from '@/components/ui/card'.

```typescript
import { Card } from "@/components/ui/card"

export function SectionCards() {
  return (
    <Card>
      {/* ... */}
    </Card>
  )
}
```

--------------------------------

### Implement MailProvider Interface for SendGrid

Source: https://docs.tanstarter.dev/docs/email

Implement the MailProvider interface to define custom logic for sending emails. This example shows the basic structure for a SendGrid provider.

```typescript
import type {
  MailProvider,
  SendEmailResult,
  SendRawEmailParams,
  SendTemplateParams,
} from '../types';

export class SendGridProvider implements MailProvider {
  getProviderName(): string {
    return 'sendgrid';
  }

  async sendTemplate(params: SendTemplateParams): Promise<SendEmailResult> {
    // Logic for sending emails using templates
  }

  async sendRawEmail(params: SendRawEmailParams): Promise<SendEmailResult> {
    // Logic for sending raw HTML emails
  }
}
```

--------------------------------

### Create a New Block Component

Source: https://docs.tanstarter.dev/docs/landing-page

Implement a new block component in `src/components/blocks/` and add it to `homepage.tsx`. This example demonstrates a basic section with a title and description sourced from the `messages` module.

```typescript
import { messages } from '@/messages';

export default function MySection() {
  return (
    <section className="py-16 md:py-24">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center">
          {messages.home.mySection.title}
        </h2>
        <p className="mt-4 text-center text-muted-foreground">
          {messages.home.mySection.description}
        </p>
      </div>
    </section>
  );
}
```

```typescript
import MySection from '@/components/blocks/my-section';

export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <MySection />
      {/* ... other sections */}
    </div>
  );
}
```

--------------------------------

### Customizing Basic Website Information in `en.ts`

Source: https://docs.tanstarter.dev/docs/metadata

Example of how to update the English messages file to change the website's name, title, and description. This directly affects the global metadata.

```typescript
export const messages = {
  site: {
    name: 'Your Website Name',
    title: 'Your Website Title - Tagline',
    description: 'A detailed description of your website for SEO purposes',
  },
  // ...
} as const;

```

--------------------------------

### Initialize Local Database

Source: https://docs.tanstarter.dev/docs/database

Run this command to initialize the local D1 database for development.

```bash
pnpm run db:migrate:local
```

--------------------------------

### Manual Build and Deploy

Source: https://docs.tanstarter.dev/docs/deployment

Execute this command for a manual build and deployment of your TanStarter project to Cloudflare Workers.

```bash
pnpm run deploy
```

--------------------------------

### Rearrange Landing Page Sections

Source: https://docs.tanstarter.dev/docs/landing-page

Modify the order of sections or remove/add sections by editing the `homepage.tsx` file. This example shows a simplified structure with only a few components.

```typescript
export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <FeaturesSection />
      <PricingSection />
      <TestimonialsSection />
      {/* Remove or add sections as needed */}
    </div>
  );
}
```

--------------------------------

### Initialize Remote Database

Source: https://docs.tanstarter.dev/docs/database

Run this command to apply migrations and initialize your remote D1 database.

```bash
pnpm run db:migrate:remote
```

--------------------------------

### Set PromoteKit Affiliate Key Environment Variable

Source: https://docs.tanstarter.dev/docs/affiliates

Add your PromoteKit key to the `.env` file after signing up and creating a referral program on PromoteKit.

```dotenv
VITE_AFFILIATE_PROMOTEKIT_ID=your_promotekit_key
```

--------------------------------

### Configure Affiliate Program

Source: https://docs.tanstarter.dev/docs/config/website

Configure affiliate program settings. Default enable is false.

```typescript
affiliates: {
  enable: true,
  provider: 'affonso', // or 'promotekit'
}
```

--------------------------------

### Open Drizzle Studio (Local)

Source: https://docs.tanstarter.dev/docs/database

Use this command to open Drizzle Studio for managing your local database.

```bash
pnpm run db:studio:local
```

--------------------------------

### Enable Invoice Creation for One-Time Payments

Source: https://docs.tanstarter.dev/docs/payment/stripe

Automatically create an invoice for one-time payments by setting `invoice_creation.enabled` to `true` in the checkout parameters. This configuration is part of the Stripe payment provider setup.

```typescript
// Automatically create invoice for one-time payments
checkoutParams.invoice_creation = {
  enabled: true,
};

```

--------------------------------

### Build Project

Source: https://docs.tanstarter.dev/docs/updates

Check if the project builds successfully after applying updates.

```bash
pnpm run build
```

--------------------------------

### Get Footer Links Configuration

Source: https://docs.tanstarter.dev/docs/config/footer

Defines the structure for footer links, including titles, URLs, and external link status. Links can be conditionally added based on feature flags like payment enablement.

```typescript
export function getFooterLinks(): MenuItemConfig[] {
  const productItems: MenuItemConfig[] = [];
  productItems.push({
    title: m.features,
    href: Routes.Features,
    external: false,
  });
  if (websiteConfig.payment?.enable) {
    productItems.push({
      title: m.pricing,
      href: Routes.Pricing,
      external: false,
    });
  }
  productItems.push({
    title: m.faq,
    href: Routes.Faqs,
    external: false,
  });

  // More sections: resources, company, legal...

  return [
    { title: m.product, items: productItems },
    { title: m.resources, items: resourcesItems },
    { title: m.company, items: companyItems },
    { title: m.legal, items: legalItems },
  ];
}
```

--------------------------------

### Preview Email Template Locally

Source: https://docs.tanstarter.dev/docs/email

Run the development command to preview your email templates locally.

```bash
pnpm email:dev
```

--------------------------------

### Configure Website Affiliate Settings

Source: https://docs.tanstarter.dev/docs/affiliates

Update the `websiteConfig` in `src/config/website.ts` to enable affiliate marketing and select a provider.

```typescript
export const websiteConfig: WebsiteConfig = {
  // ...
  affiliates: {
    enable: true,
    provider: 'affonso', // or 'promotekit'
  },
};
```

--------------------------------

### Configure New GitHub Repository

Source: https://docs.tanstarter.dev/docs/start

Remove the original remote connection and create a new private GitHub repository for your project. Push the code and set the default branch.

```bash
git remote remove origin

gh repo create your-project-name --private --source=. --remote=origin

git push -u origin main
```

--------------------------------

### Run Linting and Formatting

Source: https://docs.tanstarter.dev/docs/updates

Execute linting and formatting commands to ensure code quality and consistency.

```bash
pnpm run lint
```

```bash
pnpm run format
```

--------------------------------

### Default Website Configuration

Source: https://docs.tanstarter.dev/docs/config/website

The main configuration file for TanStarter websites. Customize core settings here.

```typescript
export const websiteConfig: WebsiteConfig = {
  ui: {
    // UI settings
  },
  metadata: {
    // Metadata settings
  },
  social: {
    // Social media settings
  },
  auth: {
    // Auth settings
  },
  blog: {
    // Blog settings
  },
  affiliates: {
    // Affiliates settings
  },
  mail: {
    // Mail settings
  },
  newsletter: {
    // Newsletter settings
  },
  notification: {
    // Notification settings
  },
  storage: {
    // Storage settings
  },
  payment: {
    // Payment settings
  },
};

```

--------------------------------

### Copy Environment Variables for Production

Source: https://docs.tanstarter.dev/docs/deployment

Copy your development environment variables to a production file and update them with production-specific values.

```bash
cp .env .env.production

# Edit .env.production with production values
# VITE_BASE_URL='https://your-domain.com'
# STRIPE_SECRET_KEY='your-stripe-live-secret-key'
# Other variables - carefully check and update as needed for production
```

--------------------------------

### Format Code Automatically

Source: https://docs.tanstarter.dev/docs/lint

Run this command to automatically format all supported files according to the project's defined code style rules.

```bash
pnpm run format
```

--------------------------------

### Create R2 Bucket with Wrangler CLI

Source: https://docs.tanstarter.dev/docs/storage

Use the Wrangler CLI to create a new R2 bucket. Ensure you replace 'your-bucket-name' with your desired bucket name.

```bash
pnpm wrangler r2 bucket create your-bucket-name
```

--------------------------------

### Configure Google OAuth Credentials

Source: https://docs.tanstarter.dev/docs/auth

Add your Google Client ID and Client Secret to your environment variables file (.env) if Google login is enabled.

```dotenv
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
```

--------------------------------

### Authentication Options Configuration

Source: https://docs.tanstarter.dev/docs/config/website

Configure authentication settings, including enabling login, Google OAuth, credential login, and account deletion.

```typescript
auth: {
  enable: true,
  enableGoogleLogin: true,
  enableCredentialLogin: true,
  enableDeleteAccount: true,
}

```

--------------------------------

### Metadata Basic Information Configuration

Source: https://docs.tanstarter.dev/docs/config/website

Define the basic metadata for your website, including name, title, and description for SEO and branding.

```typescript
metadata: {
  name: messages.site.name,
  title: messages.site.title,
  description: messages.site.description,
  // ...
}

```

--------------------------------

### Configure Blog Functionality

Source: https://docs.tanstarter.dev/docs/config/website

Set 'enable' to false to disable blog menus and exclude blog pages from the sitemap. Default is true.

```typescript
blog: {
  enable: true,
  paginationSize: 6,
}
```

--------------------------------

### Apply Database Migrations

Source: https://docs.tanstarter.dev/docs/updates

Apply the generated database migration files to your local or remote D1 database.

```bash
# Apply to local D1 database
pnpm run db:migrate:local
```

```bash
# Apply to remote D1 database
pnpm run db:migrate:remote
```

--------------------------------

### Import and Compose Landing Page Blocks

Source: https://docs.tanstarter.dev/docs/landing-page

This code composes all available block components to form the default landing page structure. Ensure all imported components are correctly placed in `src/components/blocks/`.

```typescript
import HeroSection from '@/components/blocks/hero';
import LogoCloudSection from '@/components/blocks/logo-cloud';
import StatsSection from '@/components/blocks/stats';
import Features3Section from '@/components/blocks/features3';
import FeaturesSection from '@/components/blocks/features';
import CallToActionSection from '@/components/blocks/calltoaction';
import Features2Section from '@/components/blocks/features2';
import IntegrationSection from '@/components/blocks/integration';
import Integration2Section from '@/components/blocks/integration2';
import PricingSection from '@/components/blocks/pricing';
import FaqSection from '@/components/blocks/faqs';
import TestimonialsSection from '@/components/blocks/testimonials';
import NewsletterCard from '@/components/blocks/newsletter-card';

export function HomePage() {
  return (
    <div className="flex flex-col">
      <HeroSection />
      <LogoCloudSection />
      <StatsSection />
      <Features3Section />
      <FeaturesSection />
      <CallToActionSection />
      <Features2Section />
      <IntegrationSection />
      <Integration2Section />
      <PricingSection />
      <FaqSection />
      <TestimonialsSection />
      <NewsletterCard />
    </div>
  );
}
```

--------------------------------

### Query Blog Posts Programmatically

Source: https://docs.tanstarter.dev/docs/blog

Utilize functions from `src/lib/blog.ts` to fetch blog posts. Import `getSortedPosts`, `getPostBySlug`, and `getPaginatedPosts` for various querying needs.

```typescript
import { getSortedPosts, getPostBySlug, getPaginatedPosts } from '@/lib/blog';

// Get all posts sorted by date
const allPosts = getSortedPosts();

// Get a specific post by slug
const post = getPostBySlug('hello-world');

// Get paginated posts
const { posts, totalPages, currentPage } = getPaginatedPosts(1);
```

--------------------------------

### UI Mode Configuration

Source: https://docs.tanstarter.dev/docs/config/website

Configure the light/dark mode settings for your website's appearance. Set the default mode and enable user toggling.

```typescript
ui: {
  mode: {
    defaultMode: 'system', // Choose from: light, dark, system
    enableSwitch: true,    // Allow users to switch modes
  },
}

```

--------------------------------

### Configure Blog Pagination Size

Source: https://docs.tanstarter.dev/docs/blog

Sets the number of blog posts to display per page in the website configuration.

```typescript
export const websiteConfig: WebsiteConfig = {
  // ...other config
  blog: {
    enable: true,
    paginationSize: 6,
  },
  // ...other config
}
```

--------------------------------

### Configure Website for Beehiiv Newsletter

Source: https://docs.tanstarter.dev/docs/newsletter

Update the website configuration to enable and set Beehiiv as the newsletter provider.

```typescript
export const websiteConfig = {
  // ...other config
  newsletter: {
    enable: true,
    provider: 'beehiiv',
    autoSubscribeAfterSignUp: true, // Auto-subscribe users after registration
  },
  // ...other config
}
```

--------------------------------

### Log in to Stripe CLI

Source: https://docs.tanstarter.dev/docs/payment/stripe

Authenticate your Stripe CLI with your Stripe account.

```bash
stripe login
```

--------------------------------

### Biome Configuration

Source: https://docs.tanstarter.dev/docs/lint

This is a simplified view of the project's Biome configuration file, defining rules for formatting, linting, and import organization.

```json
{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      // Various rule customizations...
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "es5",
      "semicolons": "always"
    }
  }
}
```

--------------------------------

### Enable Notification Channel Configuration

Source: https://docs.tanstarter.dev/docs/notification

Configure the notification provider in `src/config/website.ts`. Set `enable` to true and specify the desired `provider` ('discord' or 'feishu').

```typescript
export const websiteConfig: WebsiteConfig = {
  // ...other config
  notification: {
    enable: true,
    provider: 'discord', // or 'feishu'
  },
  // ...other config
}
```

--------------------------------

### Run Linting Check

Source: https://docs.tanstarter.dev/docs/lint

Execute this command to check code quality without making automatic changes. It reports linting errors and warnings.

```bash
pnpm run lint
```

--------------------------------

### Select New Provider in Website Configuration

Source: https://docs.tanstarter.dev/docs/notification

Update `websiteConfig` in `src/config/website.ts` to use your newly added notification provider.

```typescript
notification: {
  enable: true,
  provider: 'slack',
},
```

--------------------------------

### Sync Build-time Environment Variables to GitHub Secrets

Source: https://docs.tanstarter.dev/docs/deployment

Use this command to sync build-time environment variables from .env.production to GitHub Secrets, enabling automated builds.

```bash
pnpm sync-github-secrets
```

--------------------------------

### Default Website Price Plans Configuration

Source: https://docs.tanstarter.dev/docs/config/website

Defines the default price plans for the website: Free, Pro (monthly/yearly subscription), and Lifetime (one-time payment). Ensure Stripe price IDs are correctly set in environment variables.

```typescript
price: {
  plans: {
    free: {
      id: 'free',
      prices: [],
      isFree: true,
      isLifetime: false,
    },
    pro: {
      id: 'pro',
      prices: [
        {
          type: 'subscription',
          priceId: clientEnv.VITE_STRIPE_PRICE_PRO_MONTHLY!,
          amount: 990,
          currency: 'USD',
          interval: 'month',
          trialPeriodDays: 7,
        },
        {
          type: 'subscription',
          priceId: clientEnv.VITE_STRIPE_PRICE_PRO_YEARLY!,
          amount: 9900,
          currency: 'USD',
          interval: 'year',
          trialPeriodDays: 7,
        },
      ],
      isFree: false,
      isLifetime: false,
      popular: true,
    },
    lifetime: {
      id: 'lifetime',
      prices: [
        {
          type: 'one_time',
          priceId: clientEnv.VITE_STRIPE_PRICE_LIFETIME!,
          amount: 19900,
          currency: 'USD',
          allowPromotionCode: true,
        },
      ],
      isFree: false,
      isLifetime: true,
    },
  },
},
```

--------------------------------

### Blog Card Component

Source: https://docs.tanstarter.dev/docs/blog

A React component for displaying a single blog post summary, including title, description, category, and date.

```typescript
import type { BlogPost } from '@/lib/blog';

interface BlogCardProps {
  post: BlogPost;
}

export function BlogCard({ post }: BlogCardProps) {
  return (
    <div className="group flex flex-col border rounded-lg overflow-hidden h-full bg-card shadow-sm hover:shadow-md transition-shadow">
      <h3>{post.title}</h3>
      <p>{post.description}</p>
      <span>{post.category}</span>
      <time>{post.date}</time>
      {/* ... rest of the component */}
    </div>
  );
}
```

--------------------------------

### Expose Local Server with ngrok

Source: https://docs.tanstarter.dev/docs/payment/creem

Use ngrok to expose your local development server to the internet, enabling Creem to send webhook events. The ngrok HTTPS URL should be added to the Creem Dashboard.

```bash
ngrok http 3000
```

--------------------------------

### Configure Notification Services

Source: https://docs.tanstarter.dev/docs/config/website

Configure notification services. Currently only Discord provider is supported. Default is true.

```typescript
notification: {
  enable: true,
  provider: 'discord',
}
```

--------------------------------

### Configure Beehiiv Environment Variables

Source: https://docs.tanstarter.dev/docs/newsletter

Add your Beehiiv API key and Publication ID to the .env file for integration.

```dotenv
BEEHIIV_API_KEY=your-beehiiv-api-key
BEEHIIV_PUBLICATION_ID=your-beehiiv-publication-id
```

--------------------------------

### Configure Email Services

Source: https://docs.tanstarter.dev/docs/config/website

Configure email services, including the provider and contact email addresses. Default enable is true.

```typescript
mail: {
  enable: true,
  provider: 'cloudflare',
  fromEmail: 'contact@example.com',
  supportEmail: 'support@example.com',
}
```

--------------------------------

### Set Affonso Affiliate ID Environment Variable

Source: https://docs.tanstarter.dev/docs/affiliates

Add your Affonso affiliate ID to the `.env` file after signing up and creating a campaign on Affonso.

```dotenv
VITE_AFFILIATE_AFFONSO_ID=your_affonso_id
```

--------------------------------

### Implement Custom Newsletter Provider

Source: https://docs.tanstarter.dev/docs/newsletter

Create a custom newsletter provider by implementing the NewsletterProvider interface and registering it.

```typescript
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;
  }
}
```

```typescript
import { CustomNewsletterProvider } from './provider/custom-provider';

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

--------------------------------

### Open Drizzle Studio (Remote)

Source: https://docs.tanstarter.dev/docs/database

Use this command to open Drizzle Studio for managing your remote D1 database.

```bash
pnpm run db:studio:remote
```

--------------------------------

### Environment Variables for Stripe

Source: https://docs.tanstarter.dev/docs/payment/stripe

Configure these environment variables to enable Stripe payments and set up your pricing plans.

```dotenv
# Payment provider
VITE_PAYMENT_PROVIDER=stripe

STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...

# Price plans
VITE_STRIPE_PRICE_PRO_MONTHLY=price_...
VITE_STRIPE_PRICE_PRO_YEARLY=price_...
VITE_STRIPE_PRICE_LIFETIME=price_...
```

--------------------------------

### Push Schema Changes to Database (Development)

Source: https://docs.tanstarter.dev/docs/database

Use this command to push schema changes directly to your database during development. Be cautious when using this in production.

```bash
pnpm run db:push
```

--------------------------------

### Generate Drizzle Migration Files

Source: https://docs.tanstarter.dev/docs/database

Command to generate Drizzle migration files based on your schema changes.

```bash
pnpm run db:generate
```

--------------------------------

### Configure Website for Resend Newsletter

Source: https://docs.tanstarter.dev/docs/newsletter

Update the website configuration to enable and set Resend as the newsletter provider.

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

--------------------------------

### Implement Custom Payment Provider

Source: https://docs.tanstarter.dev/docs/payment

Implement the PaymentProvider interface for a new payment provider. This includes methods for creating checkouts, customer portals, and handling webhook events.

```typescript
import type {
  PaymentProvider,
  CreateCheckoutParams,
  CheckoutResult,
  CreatePortalParams,
  PortalResult,
} from '../types';

export class MyProvider implements PaymentProvider {
  getProviderName(): string {
    return 'my-provider';
  }

  public async createCheckout(params: CreateCheckoutParams): Promise<CheckoutResult> {
    // Create checkout session implementation
  }

  public async createCustomerPortal(params: CreatePortalParams): Promise<PortalResult> {
    // Create customer portal implementation
  }

  public async handleWebhookEvent(payload: string, signature: string): Promise<void> {
    // Handle webhook events implementation
  }
}
```

--------------------------------

### Configure Wrangler Binding for R2 Bucket

Source: https://docs.tanstarter.dev/docs/storage

Configure the R2 bucket binding in your `wrangler.jsonc` file. This links your application to the created R2 bucket. Remember to change 'your-bucket-name' to your actual bucket name.

```json
{
  "r2_buckets": [
    {
      "binding": "BUCKET",
      "bucket_name": "your-bucket-name" // Change to your bucket name
    }
  ]
}
```

--------------------------------

### Website Configuration in `website.ts`

Source: https://docs.tanstarter.dev/docs/metadata

Defines core website metadata like name, title, description, image paths, and social media links. This configuration is used globally across the application.

```typescript
import { messages } from '@/messages';

export const websiteConfig: WebsiteConfig = {
  metadata: {
    name: messages.site.name,
    title: messages.site.title,
    description: messages.site.description,
    images: {
      ogImage: '/og.png',
      logoLight: '/logo.png',
      logoDark: '/logo-dark.png',
    },
  },
  social: {
    github: 'https://github.com/MkFastHQ',
    discord: 'https://mksaas.link/discord',
    twitter: 'https://x.com/TanStarter',
    youtube: 'https://www.youtube.com/@TanStarter',
  },
  // Other configuration sections...
};

```

--------------------------------

### Basic File Operations with TanStarter Storage API

Source: https://docs.tanstarter.dev/docs/storage

Perform common file operations such as uploading, deleting, downloading, and retrieving file information using the TanStarter storage API. Ensure necessary imports are included.

```typescript
import { uploadFile, deleteFile, downloadFile, getFileInfo } from '@/storage';

// Upload a file
const { url, key } = await uploadFile(
  fileBuffer,
  'original-filename.jpg',
  'image/jpeg',
  { folder: 'uploads/images' }
);

// Delete a file
await deleteFile(key);

// Download a file
const stream = await downloadFile(key);

// Get file info
const info = await getFileInfo(key);
```

--------------------------------

### Website Configuration for Stripe Pricing Plans

Source: https://docs.tanstarter.dev/docs/payment/stripe

Update the payment configuration in `src/config/website.ts` to match your Stripe products and prices. Fields like `enable`, `provider`, and `priceId` are automatically resolved from environment variables.

```typescript
payment: {
  enable: isPaymentEnabled,
  provider: isPaymentEnabled ? paymentProvider : undefined,
  price: {
    plans: {
      free: {
        id: 'free',
        prices: [],
        isFree: true,
        isLifetime: false,
      },
      pro: {
        id: 'pro',
        prices: [
          {
            type: 'subscription',
            priceId: priceIds.proMonthly,
            amount: 990,
            currency: 'USD',
            interval: 'month',
          },
          {
            type: 'subscription',
            priceId: priceIds.proYearly,
            amount: 9900,
            currency: 'USD',
            interval: 'year',
          },
        ],
        isFree: false,
        isLifetime: false,
        popular: true,
      },
      lifetime: {
        id: 'lifetime',
        prices: [
          {
            type: 'one_time',
            priceId: priceIds.lifetime,
            amount: 19900,
            currency: 'USD',
            allowPromotionCode: true,
          },
        ],
        isFree: false,
        isLifetime: true,
      },
    },
  },
}
```

--------------------------------

### Metadata Images Configuration

Source: https://docs.tanstarter.dev/docs/config/website

Configure images for branding and social sharing, including Open Graph image, light mode logo, and dark mode logo.

```typescript
metadata: {
  images: {
    ogImage: '/og.png',      // Open Graph image for social sharing
    logoLight: '/logo.png',  // Logo displayed in light mode
    logoDark: '/logo-dark.png', // Logo displayed in dark mode
  },
  // ...
}

```

--------------------------------

### Configure Payment Processing

Source: https://docs.tanstarter.dev/docs/config/website

Configure payment processing services, including provider and price plans. Default is true.

```typescript
payment: {
  enable: true,
  provider: 'stripe',
  price: {
    plans: {
      // ... price plans
    },
  },
}
```

--------------------------------

### Configure Custom Domain in wrangler.jsonc

Source: https://docs.tanstarter.dev/docs/deployment

Set up custom domain routing in wrangler.jsonc. Ensure your domain is hosted on Cloudflare or configure it manually post-deployment.

```json
"routes": [
  {
    "pattern": "your-domain.com", // Change to your domain
    "custom_domain": true
  }
],
```

--------------------------------

### Configure Authentication Settings in Website Config

Source: https://docs.tanstarter.dev/docs/auth

Modify the 'auth' configuration in 'src/config/website.ts' to enable or disable authentication features like Google login and email/password login.

```typescript
export const websiteConfig: WebsiteConfig = {
  // ...
  auth: {
    enable: true,
    enableGoogleLogin: true,     // Enable Google login
    enableCredentialLogin: true, // Enable email/password login
    enableDeleteAccount: true,   // Allow users to delete their account
  },
  // ...
};
```

--------------------------------

### Configure Project Name in wrangler.jsonc

Source: https://docs.tanstarter.dev/docs/deployment

Update the 'name' field in wrangler.jsonc to match your project's name for deployment.

```json
{
  "name": "your-project-name" // Change to your project name
}
```

--------------------------------

### Configure Crisp Website ID Environment Variable

Source: https://docs.tanstarter.dev/docs/chatbox

Add your Crisp Website ID to the .env file. This variable is used by the chatbox component to initialize the Crisp widget.

```env
VITE_CRISP_WEBSITE_ID=your_crisp_website_id
```

--------------------------------

### Configure Discord Webhook URL

Source: https://docs.tanstarter.dev/docs/notification

Add the Discord webhook URL to your `.env` file after creating a webhook in your Discord server settings.

```dotenv
DISCORD_WEBHOOK_URL="https://discord.com/api/webhooks/..."
```

--------------------------------

### Configure Blog Content Collection

Source: https://docs.tanstarter.dev/docs/blog

Defines the blog content collection using Content Collections, specifying the directory, file inclusion pattern, schema, and a transformation function to add a slug.

```typescript
import { defineCollection, defineConfig } from '@content-collections/core';
import { z } from 'zod';

const blog = defineCollection({
  name: 'blog',
  directory: 'content/blog',
  include: '**/*.md',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.string(),
    category: z.string(),
    content: z.string(),
    image: z.url(),
  }),
  transform: (doc) => ({
    ...doc,
    slug: doc._meta.path,
  }),
});

export default defineConfig({
  collections: [blog],
});
```