Technology Stack

Relevant source files

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

• package.json
• README.md
• TAMAGUI_MIGRATION.md
• TASK_4_SUMMARY.md
• src/core/utils/constants.js
• BUGS_FIXED_AND_IMPROVEMENTS.md
• TASK_4_DISCUSSION.md

The eefashiondesign project is a cross-platform 3D fashion design application built on a modern, performant technology stack. The architecture is centered around React Native and Expo, enabling development for web, desktop, and mobile from a single codebase. The stack is designed to be scalable, supporting features like real-time 3D rendering, AR visualization, and future backend integration for collaboration and cloud storage.

A significant ongoing effort is the migration from react-native-paper to Tamagui for the UI layer, aiming for better performance, smaller bundle sizes, and a more consistent, type-safe development experience. The backend architecture is designed with "backdoors" for seamless integration with services like Supabase for authentication, storage, and real-time capabilities.

Sources: README.md, TAMAGUI_MIGRATION.md, TASK_4_SUMMARY.md

High-Level Architecture

The following diagram illustrates the major technology components and their relationships within the application architecture.

This diagram shows the foundational layer of React Native and Expo, which builds for multiple platforms. The application logic is managed by React Navigation and Zustand, with distinct layers for UI, 3D rendering, and backend services.

Sources: README.md, package.json, TAMAGUI_MIGRATION.md, TASK_4_SUMMARY.md

Core Framework

The application is built using React Native, allowing for cross-platform development. Expo is used to manage the development workflow, build process, and access to native device APIs.

Technology	Version	Purpose
react	18.2.0	Core library for building the user interface.
react-native	0.73.6	Framework for building native apps using React.
expo	~50.0.0	Platform and toolset for building and deploying React Native apps.

Sources: package.json:17, 39-41

UI & Styling

The project is undergoing a major UI migration from react-native-paper to Tamagui. This strategic shift aims to improve rendering performance, reduce bundle size, and enforce a consistent, type-safe design system.

Sources: BUGS_FIXED_AND_IMPROVEMENTS.md, TAMAGUI_MIGRATION.md

Tamagui UI System

Tamagui is the new primary UI library. It offers a performant, type-safe component system with responsive design and theming built-in.

• Core Libraries: @tamagui/core, @tamagui/config, @tamagui/themes
• Key Features:
  • Performance: Compiles to optimized styles for faster rendering.
  • Type-Safe Styling: Full TypeScript support.
  • Design Tokens: Centralized configuration for colors, spacing, and fonts in tamagui.config.ts.
  • Component Variants: Reusable component variations (e.g., button sizes, card styles).

Sources: TAMAGUI_MIGRATION.md, package.json:20-25

UI Migration Flow

This diagram shows the step-by-step process of migrating the UI layer to Tamagui, which is a key ongoing architectural improvement.

Sources: TAMAGUI_MIGRATION.md

Other UI Dependencies

Library	Version	Purpose
react-native-paper	5.12.3	The legacy Material Design UI component library, being phased out.
expo-linear-gradient	~12.7.2	Used for creating gradient backgrounds and effects.
expo-blur	~12.9.2	Provides blur effects for UI elements like modals.
lottie-react-native	6.5.1	Renders After Effects animations exported as JSON.
react-native-vector-icons	10.0.0	Provides a comprehensive set of icon libraries.

Sources: package.json, src/features/home/screens/HomeScreen.js:21-28

3D Rendering (Web/Desktop)

The 3D design capabilities are exclusive to the web and desktop platforms and are built on the Three.js ecosystem.

• @react-three/fiber: A React renderer for Three.js, allowing for a declarative, component-based approach to building 3D scenes.
• @react-three/drei: A collection of useful helpers and abstractions for @react-three/fiber.
• three: The underlying WebGL-based 3D graphics library.

The configuration for the 3D engine, including renderer, camera, and lighting settings, is defined in src/core/utils/constants.js.

// Example 3D Engine Configuration
export const ENGINE_3D_CONFIG = {
  // Renderer settings
  RENDERER: {
    antialias: true,
    alpha: true,
    powerPreference: 'high-performance',
  },
  // Camera settings
  CAMERA: {
    fov: 50,
    near: 0.1,
    far: 1000,
    position: [0, 1.5, 3],
  },
  // Lighting settings
  LIGHTING: {
    ambient: { intensity: 0.3 },
    directional: { intensity: 0.8 },
  },
};

Sources: src/core/utils/constants.js:27-60, package.json:18-19, 50, README.md:50-52

State Management

Zustand is used for global state management. It was chosen for its simplicity, minimal boilerplate, and ease of use compared to more complex libraries like Redux.

• Key Files:
  • src/core/state/stores/authStore.js: Manages user authentication state.
  • src/core/state/stores/designStore.js: Manages design data.
• Hooks: Custom hooks like useAuth are created to provide easy access to the state within components.

Sources: package.json:51, TASK_4_SUMMARY.md, README.md:47

Navigation

React Navigation is used to handle routing and navigation between screens.

• @react-navigation/native: The core navigation library.
• @react-navigation/bottom-tabs: Used for the main tab-based navigation.
• @react-navigation/stack: Used for stack-based navigation within features.

Sources: package.json:15-17

Backend & Services

The application is architected to integrate with a backend for features like user authentication, cloud storage, and real-time collaboration. Supabase is the recommended and planned backend service.

• @supabase/supabase-js: The client library for interacting with Supabase services.
• Services: The architecture includes a dedicated service layer (src/core/services/) to abstract backend interactions. This includes services for authentication (auth.api.js), cloud sync (sync.api.js), and file uploads (upload.api.js).
• Environment Configuration: API keys and URLs are managed via environment variables (.env files) and loaded through src/core/config/env.config.js to avoid hardcoding credentials.

Sources: TASK_4_SUMMARY.md, TASK_4_DISCUSSION.md, SECURITY_AND_CLEANUP_FIXES.md, package.json:20

Planned Authentication Flow with Supabase

The diagram below shows the sequence for a user signing in using the planned Supabase integration.

This flow demonstrates how the UI interacts with the useAuth hook, which calls the API service layer to communicate with Supabase and finally updates the global state in Zustand.

Sources: TASK_4_SUMMARY.md, TASK_4_DISCUSSION.md

Development & Tooling

Tool	Version/Type	Purpose
typescript	^5.9.3	Adds static typing to JavaScript for improved code quality and developer experience.
@babel/core	^7.20.0	JavaScript compiler used to transform modern JavaScript into compatible versions.
@expo/webpack-config	^19.0.1	Manages the webpack configuration for the web build.
babel-plugin-module-resolver	^5.0.0	Allows for path aliases to simplify import paths.
react-native-dotenv	(Planned)	Manages environment variables for different build environments.

Sources: package.json:53-59, SECURITY_AND_CLEANUP_FIXES.md