Welcome to eefashionita

Relevant source files

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

• README.md
• App.js
• src/features/home/screens/HomeScreen.js
• src/core/utils/constants.js
• TASK_3_SUMMARY.md
• TASK_4_SUMMARY.md
• BUGS_FIXED_AND_IMPROVEMENTS.md
• src/screens/AIAssistantScreen.js
• src/config/constants.js
• SECURITY_AND_CLEANUP_FIXES.md

eefashionita is a modern, cross-platform 3D fashion design application built with React Native and Expo. It provides a comprehensive suite of tools for professional garment design, including a powerful 3D design interface, real-time collaboration, and Augmented Reality (AR) visualization. The application is designed to work seamlessly across web, desktop, and mobile devices, with graceful fallbacks for less powerful platforms.

The project's architecture is modular, organized into features like the 3D Design Atelier, 2D Design Studio, and an AI Assistant. It leverages a modern technology stack including React Three Fiber for 3D rendering and Zustand for state management. The application is built with a focus on performance, user experience, and future-proofing through a "backdoor" architecture for backend services. For more details on the overall structure, see the Architecture Guide.

Sources: README.md:7-10, README.md:21-25

Key Features

The application offers a wide range of features tailored for fashion design professionals and enthusiasts.

Feature	Description	Source Files
3D Design Atelier	A full 3D garment design environment with real-time material editing, physics simulation, and advanced rendering. Primarily for web and desktop.	README.md:13, TASK_3_SUMMARY.md
Cross-Platform Support	The app is built to run on web, desktop, tablet, and mobile, with features adjusted based on platform capabilities.	README.md:14, App.js
Real-Time Collaboration	A planned feature to allow team members to work together on designs simultaneously. The architecture includes placeholders for this.	README.md:15, TASK_4_SUMMARY.md:100-103
AR Try-On	Augmented reality feature for visualizing garments on real-world models.	README.md:16, AUDIT_FIXES_SUMMARY.md:29-41
Advanced Material System	A system for applying and editing various fabric materials like denim, cotton, leather, and silk with configurable properties.	README.md:17, src/core/utils/constants.js:101-143
AI Assistant	An integrated AI assistant to provide design suggestions, trend analysis, and style advice through a chat interface.	src/screens/AIAssistantScreen.js, README.md:101
Auto-Save	A system to prevent work loss by automatically saving design progress.	README.md:19, CRITICAL_BUGS_FIXED.md:10-31

Technology Stack

The project is built on a modern stack centered around React Native and Expo, enabling cross-platform development. For 3D features, it utilizes the React Three Fiber ecosystem.

Category	Technology	Purpose	Source Files
Core Framework	React Native + Expo	Cross-platform application development for iOS, Android, and Web.	README.md:31-32
UI Library	Tamagui	A performant, type-safe UI kit for React Native & Web. Replaced react-native-paper.	TAMAGUI_MIGRATION.md, App.js:13
Navigation	React Navigation	Routing and navigation for the entire application.	App.js:9-10
State Management	Zustand	A small, fast, and scalable state-management solution.	README.md:34, TASK_4_SUMMARY.md:50
3D Rendering	React Three Fiber, Three.js	Declarative 3D scene creation within React (Web/Desktop only).	README.md:37-39
Backend Integration	Supabase	Planned backend-as-a-service for auth, database, and storage.	TASK_4_SUMMARY.md:11-19

The following diagram illustrates the layered technology stack.

Project Architecture

The project follows a feature-based directory structure to promote modularity and separation of concerns. Core business logic, shared components, and feature-specific modules are clearly delineated.

Sources: README.md:21-22

This diagram shows the main directories within the src/ folder and their responsibilities.
Sources: README.md:23-45

Application Flow

Startup and Navigation

The application's entry point is App.js. It sets up the necessary providers, including TamaguiProvider for UI, AuthProvider for authentication, and ThemeProvider for theming. The initial flow checks for authentication status to direct the user to the appropriate screen.

1. Splash Screen: A temporary splash screen is shown while the app initializes.
2. Onboarding: If the user has not completed onboarding, OnboardingScreen is displayed.
3. Authentication Check: useAuth() hook determines if a user is authenticated.
   • If not authenticated, the user is directed to the Auth stack (LoginScreen, SignUpScreen).
   • If authenticated, the user is directed to the MainTabs navigator.
4. Main Application: The main interface is a bottom tab navigator containing Home, Studio, 3D View, and other primary screens.

The following diagram illustrates the application's startup and navigation logic.

App Initialization Sequence

This sequence diagram shows the interaction between components during the app's startup phase.

Core Modules

Home Screen

The HomeScreen is the main landing page after authentication. It is a dynamic screen designed to engage the user with quick access to features, trending designs, and personal stats.

• Components: It is composed of several animated components:
  • FeatureCard: Navigates to different feature screens like the Design Studio and 3D View.
  • TrendingCard: Displays a horizontal list of trending design collections.
  • QuickActionButton: Provides access to actions like Scan (AR), Trends, and Share.
• Animations: The screen heavily uses Animated API for effects like spring animations on cards and scroll-based animations on the header.
• Functionality: Includes a handleShare function that uses the Share and Linking APIs to share the app on social media.

Sources: src/features/home/screens/HomeScreen.js

3D Atelier

The 3D Atelier is the core design experience for web and desktop users. The UI is divided into several key areas to provide a comprehensive toolset.

• Header: Contains branding, main navigation tabs, and user profile access.
• Left Sidebar: Houses view controls (Rotate, Pan), garment selectors, and design tools (Material, Pattern, Draw).
• Right Sidebar: Provides controls for view orientation, material properties (Roughness, Shininess), and a color picker.
• Bottom Bar: Includes action buttons like "Save & Sync" and "Export Render", along with view mode toggles.
• Viewport: The central area where the 3D model is displayed and manipulated. It's a placeholder ready for React Three Fiber integration.

Sources: TASK_3_SUMMARY.md:12-46

Backend Integration Architecture

The application is designed with a "backdoor" architecture to facilitate future backend integration without major refactoring. This is managed through a dedicated service layer and feature flags.

• Service Layer: Located in src/core/services/, it abstracts all external communication. It includes placeholders for auth.api.js, designs.api.js, and sync.api.js. The plan is to use Supabase as the backend.
• State Management: Zustand stores (authStore.js, designStore.js) are used to manage server data and UI state.
• Feature Flags: A centralized configuration (src/core/config/features.config.js) allows enabling or disabling backend-dependent features like CLOUD_SYNC and COLLABORATION.

This diagram shows the proposed service layer structure.

Configuration & Theming

The application uses a centralized constants file and a theming system to maintain consistency.

Theming

The UI theme colors are defined in src/core/utils/constants.js and are based on the reference design image. The app has also been migrated to use Tamagui, which centralizes theme tokens in tamagui.config.ts.

Color Name	Hex Value	Usage
background.primary	#1a1d2e	Main app background
background.secondary	#252837	Secondary background, cards
accent.blue	#4A90E2	Primary accent, buttons
accent.purple	#6C5CE7	Secondary accent, gradients
text.primary	#FFFFFF	Primary text color
text.secondary	#B8B9C1	Secondary text, subtitles

Sources: src/core/utils/constants.js:213-241, BUGS_FIXED_AND_IMPROVEMENTS.md:70-79

Storage Keys

Local storage keys for AsyncStorage are consolidated in src/core/utils/constants.js. A legacy file src/config/constants.js exists but is marked for deprecation to avoid duplication.

// Source: src/core/utils/constants.js:250-269
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
  ONBOARDING_COMPLETED: '@onboarding_completed',
  LAST_SYNC: '@last_sync',
};

Sources: src/core/utils/constants.js:250-269, SECURITY_AND_CLEANUP_FIXES.md:32-41

Conclusion

eefashionita is a robust and feature-rich fashion design platform with a well-defined architecture. Its cross-platform nature, modular design, and modern technology stack make it a powerful tool for designers. The project is actively developed, with a clear roadmap that includes full backend integration for collaboration, cloud storage, and user authentication. The thoughtful architecture, including the service layer and feature flags, ensures that the application is scalable and maintainable for future development.

Sources: README.md:188-199