Project Directory Structure

Relevant source files

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

• README.md
• TASK_4_DISCUSSION.md
• TASK_3_SUMMARY.md
• TASK_4_SUMMARY.md
• AUDIT_FIXES_SUMMARY.md
• SECURITY_AND_CLEANUP_FIXES.md
• TAMAGUI_MIGRATION.md
• src/core/config/env.config.js
• src/core/utils/constants.js

The eefashiondesign project follows a modular, feature-based architecture designed for scalability and maintainability. The structure separates core business logic, feature-specific modules, and shared resources, making it easier to add new features without major refactoring. This approach is crucial for a cross-platform application built with React Native and Expo, supporting web, desktop, and mobile.

The root of the project contains the main application source code in src/, documentation in docs/, and the primary application entry point App.js. This organization promotes a clean separation of concerns, where application logic is distinct from documentation and configuration files.

Sources: README.md:21-43

High-Level Architecture

The following diagram illustrates the top-level directory structure of the project.

This diagram shows the main directories and key files at the project root.

Sources: README.md:21-43, TASK_4_SUMMARY.md, TAMAGUI_MIGRATION.md

Top-Level Directories

Directory	Description	Source Files
src/	Contains all the application source code, including features, core logic, and shared components.	README.md:22-23
docs/	Project documentation, including architecture guides, setup instructions, and security information.	README.md:40-41, SECURITY_AND_CLEANUP_FIXES.md
App.js	The main entry point for the application, responsible for setting up providers and navigation.	README.md:43
.env	Environment variables for development and production, such as API keys. This file is not committed to version control.	TASK_4_SUMMARY.md, src/core/config/env.config.js
tamagui.config.ts	Configuration file for the Tamagui UI library, defining themes, tokens, and component styles.	TAMAGUI_MIGRATION.md

The src Directory

The src directory is the heart of the application, organized to separate concerns between core logic, feature modules, and shared assets.

Sources: README.md:22-23

src/core/

This directory contains the application's core business logic, services, and utilities that are shared across multiple features but are not UI components. It is designed to be the backbone of the application's functionality.

The structure of the core directory is designed to support backend integration, state management, and other cross-cutting concerns.

This diagram details the subdirectories within src/core/, showing the separation of configuration, services, state, and utilities.

Sources: TASK_4_DISCUSSION.md, TASK_4_SUMMARY.md, SECURITY_AND_CLEANUP_FIXES.md

Directory	Description	Key Files/Concepts
config/	Manages application configuration, including environment variables and feature flags.	env.config.js, features.config.js
services/	Handles external interactions like API calls, storage, and export functionalities. Contains sub-folders for api and offline management.	supabase.client.js, auth.api.js, exportService.js
state/	Global state management using Zustand. It is divided into stores for state definition and hooks for easy access in components.	authStore.js, useAuth.js
utils/	Contains utility functions and constants, such as platform detection, logging, and application-wide constants.	constants.js, logger.js, platform.js

src/features/

This directory contains self-contained feature modules. Each feature has its own folder with screens, components, and logic specific to that feature. This modular approach allows developers to work on features in isolation.

Sources: README.md:28-35

A typical feature module, such as design3D, has a nested structure to organize its UI and logic.

This diagram shows the internal structure of the design3D feature, as detailed in the development summaries.

Sources: TASK_3_SUMMARY.md

Directory	Description
screens/	Top-level components for each screen within the feature.
components/	Reusable components specific to this feature, often broken down further into layout, ui, etc.
index.js	Exports the feature's main components, making them available to the rest of the app.

src/shared/

This directory holds resources that are shared across all features of the application.

Directory	Description	Source Files
components/	Reusable UI components that are not specific to any single feature (e.g., PremiumButton, ErrorBoundary).	README.md:37-38, AUDIT_FIXES_SUMMARY.md
hooks/	Custom React hooks shared across the application.	README.md:37-38
assets/	Global assets like images, 3D models, and textures.	README.md:37-38
styles/	Shared styling utilities or themes (though much of this is now handled by tamagui.config.ts).	README.md:37-38

src/navigation/

This directory is responsible for defining the application's navigation structure, including stack and tab navigators using React Navigation. It connects the various feature screens into a cohesive user flow.

Sources: README.md:39

Configuration and Constants

The project centralizes configuration to avoid hardcoded values and manage settings across different environments.

Environment Configuration

The src/core/config/env.config.js file manages environment-specific variables, such as Supabase keys and API endpoints. It is designed to work with a root .env file, which is excluded from version control for security.

// src/core/config/env.config.js
const ENV = {
  // Supabase Configuration
  SUPABASE_URL: process.env.SUPABASE_URL || 'https://riwzkjsbnggcmqnjimsa.supabase.co',
  SUPABASE_PUBLISHABLE_KEY: process.env.SUPABASE_PUBLISHABLE_KEY || 'sb_publishable_L89YcNI2LfXVM1ItoJlSOg_d_CdMrit',

  // Feature Flags
  ENABLE_CLOUD_SYNC: false,
  ENABLE_PREMIUM_FEATURES: true,

  // App Configuration
  APP_ENV: __DEV__ ? 'development' : 'production',
};

Sources: src/core/config/env.config.js:6-26

Application Constants

The src/core/utils/constants.js file consolidates application-wide constants. This includes API configurations, 3D engine settings, material types, UI theme colors, and local storage keys. A previous duplicate file (src/config/constants.js) was deprecated to centralize all constants in one place.

Constant Group	Description
API_CONFIG	Base URL, timeout, and retry settings for API calls.
ENGINE_3D_CONFIG	Settings for the 3D renderer, camera, and lighting.
MATERIAL_TYPES	Enum-like object for fabric materials (e.g., DENIM, COTTON).
THEME_COLORS	Color palette for the UI, matching the design specifications.
STORAGE_KEYS	Keys for data stored in AsyncStorage, prefixed with @.

Sources: src/core/utils/constants.js, SECURITY_AND_CLEANUP_FIXES.md

Conclusion

The project's directory structure is thoughtfully organized to support a complex, cross-platform application. By separating core logic, feature modules, and shared resources, the architecture promotes modularity, scalability, and a clean separation of concerns. This structure, documented across multiple project files, provides a solid foundation for future development, allowing for the easy addition of new features like backend integration, real-time collaboration, and premium services.