/PhucNguyen-Dev/eefashiondesign

Wiki directory

Browse AI-generated documentation for any repository.

Getting Started

Relevant source files

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

This guide provides all the necessary information to set up, run, and understand the foundational structure of the eefashionita project. It is intended for developers who are new to the codebase.

eefashionita is a modern, cross-platform 3D fashion design application built with React Native and Expo. It enables real-time collaboration, AR visualization, and advanced material editing. The application is designed to work on web, desktop, and mobile, with a powerful 3D design interface for web/desktop and graceful fallbacks for mobile devices. For more details on the project's architecture, see the Architecture Guide.

Sources: README.md:5-9

Prerequisites

Before you begin, ensure you have the following software installed on your development machine.

Software	Required Version	Installation Guide
Node.js	v16+	nodejs.org
npm or yarn	Latest	Included with Node.js
Expo CLI	Optional	`npm install -g expo-cli`

Sources: README.md:72-76

Installation and Setup

Follow these steps to get the development environment running locally.

Clone the repository:

git clone https://github.com/PhucNguyen-Dev/eefashiondesign.git
cd eefashiondesign

Install dependencies:
```
npm install
```
Create an environment file: Create a .env file in the root of the project by copying .env.example. This file is used for managing environment-specific variables like API keys.
```
SUPABASE_URL=https://your-project-url.supabase.co
SUPABASE_ANON_KEY=your-anon-key
```
Start the development server:
```
npm start
```

This diagram illustrates the setup process.

Generating architecture diagram...

Sources: README.md:78-94, TASK_4_DISCUSSION.md:144-146, TASK_4_SUMMARY.md:15-19

Project Structure

The project follows a feature-based modular architecture to separate concerns and improve maintainability.

Generating architecture diagram...

This diagram shows the high-level project structure.

src/core: Contains the core business logic, state management (Zustand), services (API, storage), and utilities (platform detection, constants).
src/features: Houses the different feature modules of the application, such as design3D, auth, and home.
src/shared: Includes shared components, custom hooks, assets, and styles that are used across multiple features.
src/navigation: Manages the app's navigation logic using React Navigation.
App.js: The main entry point of the application, responsible for setting up providers and the root navigator.
tamagui.config.ts: Configuration file for the Tamagui UI library, defining themes, tokens, and component styles.

Sources: README.md:19-41, App.js, BUGS_FIXED_AND_IMPROVEMENTS.md:214-218

Technology Stack

The project is built on a modern stack centered around React Native and Expo.

Category	Technology	Description
Core Framework	React Native + Expo	For building cross-platform applications from a single codebase.
UI Library	Tamagui	A performant, universal UI kit for React Native and Web.
Navigation	React Navigation	Handles routing and navigation within the app.
State Management	Zustand	A small, fast, and scalable state-management solution.
3D Rendering	React Three Fiber, Three.js	For creating and displaying 3D content (Web/Desktop only).
Styling	React Native Paper (legacy)	Used for some older components, being migrated to Tamagui.
Backend Service	Supabase	Used for authentication, database, and storage.

Sources: README.md:43-52, package.json:55-100, TASK_4_SUMMARY.md:22, BUGS_FIXED_AND_IMPROVEMENTS.md:73-77

Running the Application

Several npm scripts are available to run the application on different platforms.

Command	Description
`npm start`	Starts the Expo development server.
`npm run web`	Runs the application in a web browser.
`npm run ios`	Runs the application on the iOS simulator (Mac only).
`npm run android`	Runs the application on the Android emulator.
`npm test`	Runs tests.
`npm run lint`	Lints the codebase using ESLint.

Sources: README.md:90-94, README.md:143-149

Application Startup Flow

The application's entry point is App.js. It initializes necessary providers and determines the initial screen based on authentication status.

Generating architecture diagram...

This sequence diagram outlines the app's startup and authentication flow.

Sources: App.js:280-353

Configuration

The project uses a combination of environment variables and configuration files for setup.

Environment Variables

Environment variables are managed via a .env file in the project root. This file is ignored by Git and should not be committed.

Variable	Description	Example
`REACT_APP_API_URL`	The base URL for the backend API.	`https://api.3datelier.com`
`REACT_APP_WS_URL`	The URL for the WebSocket server.	`wss://api.3datelier.com/ws`
`REACT_APP_CDN_URL`	The base URL for the Content Delivery Network.	`https://cdn.3datelier.com`
`SUPABASE_URL`	The URL for the Supabase project.	`https://riwzkjsbnggcmqnjimsa.supabase.co`
`SUPABASE_ANON_KEY`	The public anonymous key for the Supabase project.	`your-new-key-here`

Sources: README.md:151-155, SECURITY_AND_CLEANUP_FIXES.md:25-30, src/core/utils/constants.js:7-9

Build Configuration

Babel (babel.config.js): Configured to use plugins for Tamagui, Reanimated, and react-native-dotenv. The Tamagui plugin is crucial for optimizing the UI library's performance and bundle size.
Sources: babel.config.js, BUGS_FIXED_AND_IMPROVEMENTS.md:208-212
Webpack (webpack.config.js): The webpack configuration is extended from the Expo default to add support for Tamagui and TypeScript, ensuring proper transpilation for the web platform.
Sources: webpack.config.js, BUGS_FIXED_AND_IMPROVEMENTS.md:214-218

Platform-Specific Features

The application provides different levels of functionality depending on the platform.

Platform	3D Editing	3D Viewing	Project Management	AR Try-On
Web & Desktop	✅ Full	✅ Full	✅ Full	❌ No
Tablet	⚠️ Limited	⚠️ Basic	✅ Full	✅ Full
Mobile	❌ No	✅ View-only	✅ Full	✅ Full

A fallback UI is displayed on mobile devices for features that are desktop-only, such as the 3D Atelier.

Sources: README.md:54-61, README.md:105-121, TASK_3_SUMMARY.md:100-102

Getting Started

Relevant source files

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

This guide provides all the necessary information to set up, run, and understand the foundational structure of the eefashionita project. It is intended for developers who are new to the codebase.

Sources: README.md:5-9

Prerequisites

Before you begin, ensure you have the following software installed on your development machine.

Software	Required Version	Installation Guide
Node.js	v16+	nodejs.org
npm or yarn	Latest	Included with Node.js
Expo CLI	Optional	`npm install -g expo-cli`

Sources: README.md:72-76

Installation and Setup

Follow these steps to get the development environment running locally.

Clone the repository:

git clone https://github.com/PhucNguyen-Dev/eefashiondesign.git
cd eefashiondesign

Install dependencies:
```
npm install
```
Create an environment file: Create a .env file in the root of the project by copying .env.example. This file is used for managing environment-specific variables like API keys.
```
SUPABASE_URL=https://your-project-url.supabase.co
SUPABASE_ANON_KEY=your-anon-key
```
Start the development server:
```
npm start
```

This diagram illustrates the setup process.

Generating architecture diagram...

Sources: README.md:78-94, TASK_4_DISCUSSION.md:144-146, TASK_4_SUMMARY.md:15-19

Project Structure

The project follows a feature-based modular architecture to separate concerns and improve maintainability.

Generating architecture diagram...

This diagram shows the high-level project structure.

src/core: Contains the core business logic, state management (Zustand), services (API, storage), and utilities (platform detection, constants).
src/features: Houses the different feature modules of the application, such as design3D, auth, and home.
src/shared: Includes shared components, custom hooks, assets, and styles that are used across multiple features.
src/navigation: Manages the app's navigation logic using React Navigation.
App.js: The main entry point of the application, responsible for setting up providers and the root navigator.
tamagui.config.ts: Configuration file for the Tamagui UI library, defining themes, tokens, and component styles.

Sources: README.md:19-41, App.js, BUGS_FIXED_AND_IMPROVEMENTS.md:214-218

Technology Stack

The project is built on a modern stack centered around React Native and Expo.

Category	Technology	Description
Core Framework	React Native + Expo	For building cross-platform applications from a single codebase.
UI Library	Tamagui	A performant, universal UI kit for React Native and Web.
Navigation	React Navigation	Handles routing and navigation within the app.
State Management	Zustand	A small, fast, and scalable state-management solution.
3D Rendering	React Three Fiber, Three.js	For creating and displaying 3D content (Web/Desktop only).
Styling	React Native Paper (legacy)	Used for some older components, being migrated to Tamagui.
Backend Service	Supabase	Used for authentication, database, and storage.

Sources: README.md:43-52, package.json:55-100, TASK_4_SUMMARY.md:22, BUGS_FIXED_AND_IMPROVEMENTS.md:73-77

Running the Application

Several npm scripts are available to run the application on different platforms.

Command	Description
`npm start`	Starts the Expo development server.
`npm run web`	Runs the application in a web browser.
`npm run ios`	Runs the application on the iOS simulator (Mac only).
`npm run android`	Runs the application on the Android emulator.
`npm test`	Runs tests.
`npm run lint`	Lints the codebase using ESLint.

Sources: README.md:90-94, README.md:143-149

Application Startup Flow

The application's entry point is App.js. It initializes necessary providers and determines the initial screen based on authentication status.

Generating architecture diagram...

This sequence diagram outlines the app's startup and authentication flow.

Sources: App.js:280-353

Configuration

The project uses a combination of environment variables and configuration files for setup.

Environment Variables

Environment variables are managed via a .env file in the project root. This file is ignored by Git and should not be committed.

Variable	Description	Example
`REACT_APP_API_URL`	The base URL for the backend API.	`https://api.3datelier.com`
`REACT_APP_WS_URL`	The URL for the WebSocket server.	`wss://api.3datelier.com/ws`
`REACT_APP_CDN_URL`	The base URL for the Content Delivery Network.	`https://cdn.3datelier.com`
`SUPABASE_URL`	The URL for the Supabase project.	`https://riwzkjsbnggcmqnjimsa.supabase.co`
`SUPABASE_ANON_KEY`	The public anonymous key for the Supabase project.	`your-new-key-here`

Sources: README.md:151-155, SECURITY_AND_CLEANUP_FIXES.md:25-30, src/core/utils/constants.js:7-9

Build Configuration

Babel (babel.config.js): Configured to use plugins for Tamagui, Reanimated, and react-native-dotenv. The Tamagui plugin is crucial for optimizing the UI library's performance and bundle size.
Sources: babel.config.js, BUGS_FIXED_AND_IMPROVEMENTS.md:208-212
Webpack (webpack.config.js): The webpack configuration is extended from the Expo default to add support for Tamagui and TypeScript, ensuring proper transpilation for the web platform.
Sources: webpack.config.js, BUGS_FIXED_AND_IMPROVEMENTS.md:214-218

Platform-Specific Features

The application provides different levels of functionality depending on the platform.

Platform	3D Editing	3D Viewing	Project Management	AR Try-On
Web & Desktop	✅ Full	✅ Full	✅ Full	❌ No
Tablet	⚠️ Limited	⚠️ Basic	✅ Full	✅ Full
Mobile	❌ No	✅ View-only	✅ Full	✅ Full

A fallback UI is displayed on mobile devices for features that are desktop-only, such as the 3D Atelier.

Sources: README.md:54-61, README.md:105-121, TASK_3_SUMMARY.md:100-102