> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pixlnext.tech/llms.txt
> Use this file to discover all available pages before exploring further.

# Environment

# Environment Configuration

This document details all environment variables and configuration settings used in the STO Education Platform.

## Environment Variables Overview

The platform uses environment variables for configuration, secrets management, and feature flags. All sensitive data is stored securely and accessed through environment variables.

## Frontend Environment Variables

### Core Configuration

```bash theme={null}
# Supabase Configuration
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-supabase-anon-key

# Application URLs
VITE_APP_URL=https://sto-education.com
VITE_API_BASE_URL=https://api.sto-education.com
```

**Purpose**: Core backend connection and application URL configuration.

### Third-Party Integrations

```bash theme={null}
# VideoSDK (server-side via Supabase Edge Function secrets)
# VIDEOSDK_API_KEY=your-videosdk-api-key
# VIDEOSDK_SECRET=your-videosdk-secret

# Legacy Whereby (unused by webapp; legacy edge functions only)
# VITE_WHEREBY_API_KEY=your-whereby-api-key
# VITE_WHEREBY_SUBDOMAIN=your-whereby-subdomain

# SendBird Chat
VITE_SENDBIRD_APP_ID=your-sendbird-app-id

# Mapbox Maps
VITE_MAPBOX_ACCESS_TOKEN=your-mapbox-token

# PostHog Analytics
VITE_POSTHOG_KEY=your-posthog-key
VITE_POSTHOG_HOST=https://app.posthog.com

# LogRocket Monitoring
VITE_LOGROCKET_APP_ID=your-logrocket-app-id

# Tawk.to Live Chat
VITE_TAWK_PROPERTY_ID=your-tawk-property-id

# Cloudinary Image Management
VITE_CLOUDINARY_CLOUD_NAME=your-cloudinary-name
VITE_CLOUDINARY_API_KEY=your-cloudinary-api-key
VITE_CLOUDINARY_API_SECRET=your-cloudinary-secret
```

**Purpose**: Integration with external services for video, chat, analytics, and media management.

### Feature Flags

```bash theme={null}
# Development Features
VITE_ENABLE_DEV_TOOLS=true
VITE_ENABLE_DEBUG_LOGGING=false
VITE_ENABLE_MOCK_DATA=false

# Feature Toggles
VITE_ENABLE_VIDEO_CONFERENCING=true
VITE_ENABLE_CHAT_SYSTEM=true
VITE_ENABLE_ANALYTICS=true
VITE_ENABLE_LIVE_CHAT=true
```

**Purpose**: Control feature availability and development tools.

## Backend Environment Variables (Supabase)

### Database Configuration

```bash theme={null}
# Supabase Database
DATABASE_URL=postgresql://postgres:[password]@[host]:5432/postgres
POSTGRES_PASSWORD=your-postgres-password
POSTGRES_DB=postgres
```

**Purpose**: Database connection configuration for Supabase.

### Authentication

```bash theme={null}
# JWT Configuration
JWT_SECRET=your-jwt-secret
JWT_EXPIRY=3600

# OAuth Providers
GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
```

**Purpose**: Authentication and JWT token configuration.

### Email Service

```bash theme={null}
# Resend Email Service
RESEND_API_KEY=your-resend-api-key
FROM_EMAIL=noreply@sto-education.com
ADMIN_EMAIL=admin@sto-education.com
```

**Purpose**: Email sending configuration using Resend service.

### Payment Processing

```bash theme={null}
# PayMob Configuration
PAYMOB_API_KEY=your-paymob-api-key
PAYMOB_INTEGRATION_ID=your-paymob-integration-id
PAYMOB_HMAC_SECRET=your-paymob-hmac-secret
```

**Purpose**: Payment processing with PayMob integration.

## Environment File Structure

### Development Environment

**File**: `.env.local` (not committed to git)

```bash theme={null}
# Development-specific overrides
VITE_APP_URL=http://localhost:5173
VITE_ENABLE_DEV_TOOLS=true
VITE_ENABLE_DEBUG_LOGGING=true
```

### Production Environment

**File**: Environment variables set in deployment platform (Vercel)

```bash theme={null}
# Production configuration
VITE_APP_URL=https://sto-education.com
VITE_ENABLE_DEV_TOOLS=false
VITE_ENABLE_DEBUG_LOGGING=false
```

## Environment Variable Usage

### Frontend Usage

```typescript theme={null}
// Accessing environment variables
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY

// Feature flags
const enableDevTools = import.meta.env.VITE_ENABLE_DEV_TOOLS === 'true'
const enableAnalytics = import.meta.env.VITE_ENABLE_ANALYTICS === 'true'
```

### Type Safety

```typescript theme={null}
// Environment variable types
interface ImportMetaEnv {
  readonly VITE_SUPABASE_URL: string
  readonly VITE_SUPABASE_ANON_KEY: string
  readonly VITE_APP_URL: string
  readonly VITE_WHEREBY_API_KEY: string
  readonly VITE_SENDBIRD_APP_ID: string
  readonly VITE_MAPBOX_ACCESS_TOKEN: string
  readonly VITE_POSTHOG_KEY: string
  readonly VITE_LOGROCKET_APP_ID: string
  readonly VITE_TAWK_PROPERTY_ID: string
  readonly VITE_CLOUDINARY_CLOUD_NAME: string
  readonly VITE_CLOUDINARY_API_KEY: string
  readonly VITE_ENABLE_DEV_TOOLS: string
  readonly VITE_ENABLE_DEBUG_LOGGING: string
  readonly VITE_ENABLE_VIDEO_CONFERENCING: string
  readonly VITE_ENABLE_CHAT_SYSTEM: string
  readonly VITE_ENABLE_ANALYTICS: string
  readonly VITE_ENABLE_LIVE_CHAT: string
}
```

## Configuration Management

### Environment-Specific Configs

```typescript theme={null}
// config/environment.ts
export const config = {
  app: {
    url: import.meta.env.VITE_APP_URL,
    name: 'STO Education Platform',
    version: import.meta.env.VITE_APP_VERSION || '1.0.0'
  },
  supabase: {
    url: import.meta.env.VITE_SUPABASE_URL,
    anonKey: import.meta.env.VITE_SUPABASE_ANON_KEY
  },
  features: {
    devTools: import.meta.env.VITE_ENABLE_DEV_TOOLS === 'true',
    debugLogging: import.meta.env.VITE_ENABLE_DEBUG_LOGGING === 'true',
    videoConferencing: import.meta.env.VITE_ENABLE_VIDEO_CONFERENCING === 'true',
    chatSystem: import.meta.env.VITE_ENABLE_CHAT_SYSTEM === 'true',
    analytics: import.meta.env.VITE_ENABLE_ANALYTICS === 'true',
    liveChat: import.meta.env.VITE_ENABLE_LIVE_CHAT === 'true'
  },
  integrations: {
    whereby: {
      apiKey: import.meta.env.VITE_WHEREBY_API_KEY,
      subdomain: import.meta.env.VITE_WHEREBY_SUBDOMAIN
    },
    sendbird: {
      appId: import.meta.env.VITE_SENDBIRD_APP_ID
    },
    mapbox: {
      accessToken: import.meta.env.VITE_MAPBOX_ACCESS_TOKEN
    },
    posthog: {
      key: import.meta.env.VITE_POSTHOG_KEY,
      host: import.meta.env.VITE_POSTHOG_HOST
    },
    logrocket: {
      appId: import.meta.env.VITE_LOGROCKET_APP_ID
    },
    tawk: {
      propertyId: import.meta.env.VITE_TAWK_PROPERTY_ID
    },
    cloudinary: {
      cloudName: import.meta.env.VITE_CLOUDINARY_CLOUD_NAME,
      apiKey: import.meta.env.VITE_CLOUDINARY_API_KEY
    }
  }
}
```

### Runtime Configuration

```typescript theme={null}
// utils/config.ts
export function getConfig() {
  return {
    isDevelopment: import.meta.env.DEV,
    isProduction: import.meta.env.PROD,
    mode: import.meta.env.MODE,
    baseUrl: import.meta.env.BASE_URL
  }
}
```

## Security Considerations

### Sensitive Data Protection

1. **Never Commit Secrets**: Environment files with secrets are gitignored
2. **Use VITE\_ Prefix**: Only variables with `VITE_` prefix are exposed to frontend
3. **Server-Side Secrets**: Backend secrets are kept server-side only
4. **Environment Validation**: Validate required variables at startup

### Environment Validation

```typescript theme={null}
// utils/env-validation.ts
const requiredEnvVars = [
  'VITE_SUPABASE_URL',
  'VITE_SUPABASE_ANON_KEY',
  'VITE_APP_URL'
]

export function validateEnvironment() {
  const missing = requiredEnvVars.filter(
    envVar => !import.meta.env[envVar]
  )
  
  if (missing.length > 0) {
    throw new Error(`Missing required environment variables: ${missing.join(', ')}`)
  }
}
```

## Deployment Configuration

### Vercel Deployment

Environment variables are configured in Vercel dashboard:

1. **Production Variables**: Set in Vercel project settings
2. **Preview Variables**: Set for preview deployments
3. **Development Variables**: Set for local development

### Build-Time Variables

```typescript theme={null}
// vite.config.ts
export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
    __BUILD_TIME__: JSON.stringify(new Date().toISOString()),
    __BUILD_HASH__: JSON.stringify(generateBuildHash())
  }
})
```

## Feature Flags

### Dynamic Feature Control

```typescript theme={null}
// hooks/useFeatureFlag.ts
export function useFeatureFlag(flag: string): boolean {
  const envFlag = `VITE_ENABLE_${flag.toUpperCase()}`
  return import.meta.env[envFlag] === 'true'
}

// Usage
const enableVideo = useFeatureFlag('video_conferencing')
const enableChat = useFeatureFlag('chat_system')
```

### Runtime Feature Detection

```typescript theme={null}
// utils/feature-detection.ts
export const features = {
  videoConferencing: import.meta.env.VITE_ENABLE_VIDEO_CONFERENCING === 'true',
  chatSystem: import.meta.env.VITE_ENABLE_CHAT_SYSTEM === 'true',
  analytics: import.meta.env.VITE_ENABLE_ANALYTICS === 'true',
  liveChat: import.meta.env.VITE_ENABLE_LIVE_CHAT === 'true'
}
```

## Environment Setup Guide

### Development Setup

1. **Copy Environment Template**:

```bash theme={null}
cp .env.example .env.local
```

2. **Configure Variables**:
   * Update Supabase credentials
   * Set third-party API keys
   * Configure feature flags

3. **Validate Configuration**:

```bash theme={null}
npm run type-check
npm run build
```

### Production Setup

1. **Set Environment Variables** in deployment platform
2. **Configure Secrets** for sensitive data
3. **Test Configuration** in staging environment
4. **Deploy** with validated configuration

## Troubleshooting

### Common Issues

1. **Missing Environment Variables**:
   * Check `.env.local` file exists
   * Verify variable names match exactly
   * Ensure `VITE_` prefix for frontend variables

2. **Type Errors**:
   * Update `ImportMetaEnv` interface
   * Check variable types in configuration

3. **Build Failures**:
   * Validate all required variables are set
   * Check for typos in variable names

### Debug Environment

```typescript theme={null}
// utils/debug-env.ts
export function debugEnvironment() {
  if (import.meta.env.DEV) {
    console.log('Environment Variables:', {
      mode: import.meta.env.MODE,
      dev: import.meta.env.DEV,
      prod: import.meta.env.PROD,
      baseUrl: import.meta.env.BASE_URL,
      // Log non-sensitive config
      appUrl: import.meta.env.VITE_APP_URL,
      supabaseUrl: import.meta.env.VITE_SUPABASE_URL
    })
  }
}
```

## Related Documentation

* [Build Configuration](/docs/configuration/build-config) - Build and deployment setup
* [Package Configuration](/docs/configuration/package-json) - Dependencies and scripts
* [Supabase Integration](/docs/integrations/supabase) - Backend configuration
* [Third-Party Integrations](/docs/integrations) - External service configuration