Configuration and Environment Variables

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• src/core/config/env.config.js
• src/core/config/features.config.js
• TASK_4_SUMMARY.md
• SECURITY_AND_CLEANUP_FIXES.md
• src/core/utils/constants.js
• src/config/constants.js

The eefashiondesign application employs a multi-layered configuration system to manage application settings, feature availability, and sensitive credentials. This system is designed for security, flexibility, and maintainability, separating environment-specific variables from static application constants and dynamic feature toggles.

The configuration architecture consists of three main parts:

1. Environment Variables: For secrets and environment-specific settings (e.g., API keys, URLs). Managed via .env files and accessed through src/core/config/env.config.js.
2. Feature Flags: For dynamically enabling or disabling application features without code changes. Managed in src/core/config/features.config.js.
3. Static Constants: For hardcoded, non-sensitive values that are consistent across all environments (e.g., theme colors, 3D engine settings, storage keys). Managed primarily in src/core/utils/constants.js.

This diagram illustrates the relationship between the different configuration components.

Environment Variables (env.config.js)

Sources: [src/core/config/env.config.js](https://github.com/PhucNguyen-Dev/eefashiondesign/blob/HEAD/src/core/config/env.config.js), [README.md:112-117](https://github.com/PhucNguyen-Dev/eefashiondesign/blob/HEAD/README.md#L112-L117), [SECURITY_AND_CLEANUP_FIXES.md](https://github.com/PhucNguyen-Dev/eefashiondesign/blob/HEAD/SECURITY_AND_CLEANUP_FIXES.md)

This module is responsible for managing environment-specific variables, particularly secrets like API keys and URLs. It prevents hardcoding sensitive information directly into the source code, which is a critical security practice.

Setup

To configure the environment, a .env file must be created in the project root. This file is ignored by Git to prevent secrets from being committed to the repository. The react-native-dotenv package is used to load these variables into the application's process environment.

Example .env file:

REACT_APP_API_URL=https://api.3datelier.com
REACT_APP_WS_URL=wss://api.3datelier.com/ws
REACT_APP_CDN_URL=https://cdn.3datelier.com

Sources: README.md:112-117

A separate .env file is required for Supabase credentials, as noted in the security fix documentation.

# .env (DO NOT COMMIT!)
SUPABASE_URL=https://riwzkjsbnggcmqnjimsa.supabase.co
SUPABASE_ANON_KEY=your-new-key-here

Sources: SECURITY_AND_CLEANUP_FIXES.md:28-32

Loading and Access

The env.config.js file reads values from process.env and provides default fallbacks if a variable is not set. This ensures the application can run in different environments (development, production) with distinct configurations.

This flowchart shows how an environment variable is loaded and used by the application.

Configuration Object

The ENV object centralizes all environment-dependent configuration.

Key	Type	Default Value	Description
SUPABASE_URL	string	'https://riwzkjsbnggcmqnjimsa.supabase.co'	The URL for the Supabase project backend.
SUPABASE_PUBLISHABLE_KEY	string	'sb_publishable_L89YcNI2LfXVM1ItoJlSOg_d_CdMrit'	The public anonymous key for Supabase.
API_TIMEOUT	number	30000	Timeout for API requests in milliseconds.
API_RETRY_ATTEMPTS	number	3	Number of retry attempts for failed API calls.
ENABLE_CLOUD_SYNC	boolean	false	Master switch to enable/disable cloud sync features.
ENABLE_PREMIUM_FEATURES	boolean	true	Master switch to enable/disable premium features.
ENABLE_OFFLINE_SUPPORT	boolean	false	Master switch to enable/disable offline caching.
ENABLE_IMAGE_UPLOAD	boolean	false	Master switch to enable/disable image uploading.
APP_ENV	string	'development' or 'production'	The current application environment.
IS_DEV	boolean	__DEV__	A flag indicating if the app is in development mode.
Sources: src/core/config/env.config.js:7-33

Validation

The validateEnv function is executed on app startup to check for common configuration errors, such as missing or placeholder Supabase keys. In development mode (IS_DEV), it logs detailed warnings to the console to guide developers in setting up their environment correctly.

// src/core/config/env.config.js:38-41
export const validateEnv = () => {
  const warnings = [];

  // Check if Supabase URL is configured
  if (!ENV.SUPABASE_URL || ENV.SUPABASE_URL.includes('your-project')) {
    warnings.push('⚠️ SUPABASE_URL not configured properly.');
  }
  // ... more checks
}

Sources: src/core/config/env.config.js:38-70

Feature Flags (features.config.js)

Sources: [src/core/config/features.config.js](https://github.com/PhucNguyen-Dev/eefashiondesign/blob/HEAD/src/core/config/features.config.js), [TASK_4_SUMMARY.md:104-120](https://github.com/PhucNguyen-Dev/eefashiondesign/blob/HEAD/TASK_4_SUMMARY.md#L104-L120)

The feature flag system provides a centralized way to toggle application features on or off. This is useful for gradual rollouts, A/B testing, enabling premium features, or hiding work-in-progress functionality.

The system is defined in src/core/config/features.config.js and is designed to be used with a helper function isFeatureEnabled to check a feature's status before rendering a component or executing logic.

This sequence diagram shows how a component would use the feature flag system.

Feature Configuration

The FEATURES object is structured by category, with each category containing specific flags.

Category	Flag	Default	Description
AUTH	ENABLED	true	Enables the authentication system.
	SOCIAL_LOGIN	false	Backdoor for future social login integration.
CLOUD_SYNC	ENABLED	false	Enables cloud synchronization of designs.
COLLABORATION	ENABLED	false	Enables real-time collaboration features.
PREMIUM	ENABLED	true	Enables UI elements related to premium features.
EXPORT	PNG	true	Allows exporting designs as PNG.
	GLTF	false	Backdoor for future 3D model export.
AR	ENABLED	true	Enables Augmented Reality features.
_3D_FEATURES	PHYSICS_SIMULATION	true	Enables fabric physics simulation in the 3D atelier.
Sources: src/core/config/features.config.js:5-64, TASK_4_SUMMARY.md:104-120

// src/core/config/features.config.js:5-24
export const FEATURES = {
  // --- Authentication ---
  AUTH: {
    ENABLED: true,
    SOCIAL_LOGIN: false, // Backdoor for Google, Apple, etc.
    MAGIC_LINK: false, // Backdoor for passwordless login
  },

  // --- Data & Sync ---
  CLOUD_SYNC: {
    ENABLED: false, // Master switch for cloud sync
    AUTO_SYNC: true,
    SYNC_INTERVAL: 30000, // 30 seconds
  },

  // --- Collaboration ---
  COLLABORATION: {
    ENABLED: false, // Master switch for real-time collaboration
    REAL_TIME: false,
  },
  // ... more features
};

Sources: src/core/config/features.config.js:5-24

Static Application Constants

For configuration values that are not sensitive and do not change between environments, the project uses constant files. The primary, modern source for these is src/core/utils/constants.js. An older file, src/config/constants.js, is being deprecated, and its values have been merged into the new file.

Sources: SECURITY_AND_CLEANUP_FIXES.md:50-54, src/core/utils/constants.js, src/config/constants.js:100-102

Key Constant Groups in src/core/utils/constants.js

Service Configuration

This includes base URLs and settings for external services. While some base URLs are defined here, best practice (as seen with Supabase) is to move them to .env files.

Constant Object	Key	Value	Description
API_CONFIG	BASE_URL	'https://api.3datelier.com'	Base URL for the main backend API.
WS_CONFIG	URL	'wss://api.3datelier.com/ws'	URL for the WebSocket server for real-time features.
CDN_CONFIG	BASE_URL	'https://cdn.3datelier.com'	Base URL for the Content Delivery Network.
Sources: src/core/utils/constants.js:7-26

3D Engine & Design

A large number of constants define the behavior and default settings of the 3D design atelier.

• ENGINE_3D_CONFIG: Contains detailed settings for the renderer, camera, lighting, and performance tuning.
• MATERIAL_TYPES: Defines available materials like DENIM, COTTON, LEATHER.
• MATERIAL_DEFAULTS: Provides default roughness, shininess, etc., for each material type.
• GARMENT_TYPES: Defines available garment bases like JUMPSUIT, DRESS.
• PHYSICS_CONFIG: Default values for physics simulation, including GRAVITY and WIND.
  Sources: src/core/utils/constants.js:31-163

Storage Keys

The STORAGE_KEYS object defines the keys used for storing data in the device's local storage (AsyncStorage). Using a centralized constant file prevents typos and ensures consistency. The @ prefix is a convention for AsyncStorage.

// src/core/utils/constants.js:203-223
export const STORAGE_KEYS = {
  // Authentication
  AUTH_TOKEN: '@auth_token',
  REFRESH_TOKEN: '@refresh_token',
  USER_DATA: '@user_data',

  // App Data
  THEME: '@theme',
  DESIGNS: '@designs',
  PROJECTS: '@projects',
  MEASUREMENTS: '@measurements',
  TEMPLATES: '@templates',
  SETTINGS: '@settings',

  // User Preferences
  RECENT_COLORS: '@recent_colors',
  RECENT_MATERIALS: '@recent_materials',
  ONBOARDING_COMPLETED: '@onboarding_completed',
  LAST_SYNC: '@last_sync',
};

Sources: src/core/utils/constants.js:203-223, SECURITY_AND_CLEANUP_FIXES.md:61-80