Contribution Guide
Relevant source files
The following files were used as context for generating this wiki page:Welcome to the eefashionita project! This guide provides all the necessary information for you to get started with contributing. We welcome contributions of all kinds, from bug fixes to new features. This document outlines the project's architecture, development process, and coding standards to ensure a smooth and effective collaboration.
The project is a cross-platform 3D fashion design application built with React Native and Expo, featuring real-time collaboration, AR visualization, and advanced material editing. Your contributions will help build a modern, professional-grade design tool. For more details on the overall architecture, please see the Architecture Guide.
Sources: README.md:5-10
Getting Started
Before you begin, ensure you have the required tools installed. The setup process is straightforward, involving cloning the repository, installing dependencies, and starting the development server.
Sources: README.md:73-78
Prerequisites
- Node.js: v16+
- npm or yarn
- Expo CLI (optional, for mobile development)
Sources: README.md:75-78
Installation & Running the App
- Clone the repository:
git clone https://github.com/PhucNguyen-Dev/eefashiondesign.git cd eefashiondesign - Install dependencies:
npm install - Start the development server:
npm start - Run on a specific platform:
npm run web # Web browser npm run ios # iOS simulator (Mac only) npm run android # Android emulator
Sources: README.md:80-95
Project Commands
This table summarizes the main scripts available for development.
| Command | Description |
|---|---|
npm start | Start Expo dev server |
npm run web | Run on web |
npm run ios | Run on iOS |
npm run android | Run on Android |
npm test | Run tests |
npm run lint | Lint code |
Sources: README.md:162-169
Project Architecture
Understanding the project's structure and technology stack is crucial for making meaningful contributions.
Technology Stack
The project is built on a modern stack centered around React Native.
| Category | Technology |
|---|---|
| Core | React Native + Expo, React Navigation |
| UI | Tamagui, React Native Paper (being phased out) |
| State Management | Zustand |
| 3D Features | React Three Fiber, @react-three/drei, Three.js |
Sources: README.md:55-65, BUGS_FIXED_AND_IMPROVEMENTS.md:70-74
Project Structure
The codebase is organized into feature modules, shared components, and core business logic. This modular structure helps in separating concerns and improving maintainability.
The following diagram illustrates the high-level directory structure.
This diagram shows the main directories within the src folder, including core logic, features, and shared components.
Sources: README.md:21-48
Development Process
Follow these guidelines when developing new features or fixing bugs.
Contribution Workflow
The project uses a standard fork-and-pull-request workflow.
This diagram shows the steps for submitting a change.
Sources: README.md:191-196
Adding New Features
When adding a new feature, it should be encapsulated within its own folder in src/features/.
This diagram outlines the process for creating a new feature module.
Example of exporting a new screen:
// src/features/myFeature/index.js
export { default as MyFeatureScreen } from './screens/MyFeatureScreen';
Sources: README.md:173-185
Backend Integration & "Backdoors"
The application is designed with "backdoors" or placeholder integration points to facilitate future backend integration without major refactoring. This includes a dedicated service layer, state management hooks, and feature flags.
Sources: TASK_4_DISCUSSION.md:19-25
Service Layer
The service layer abstracts API calls and other external interactions. New services should be added under src/core/services/.
This diagram shows the proposed structure for the service layer.
Sources: TASK_4_DISCUSSION.md:139-154
State Management
Global state is managed with Zustand. New stores and hooks should be placed in src/core/state/.
This diagram shows the proposed structure for state management.
Sources: TASK_4_DISCUSSION.md:156-168
Environment Configuration & Security
Sensitive information like API keys must not be hardcoded. Use a .env file for this purpose.
- Create a
.envfile in the root directory. This file is ignored by Git. - Add your environment-specific variables.
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
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
CRITICAL: If you are working with Supabase, you must rotate the API keys and create a local .env file. Do not commit this file.
Sources: README.md:171-175, SECURITY_AND_CLEANUP_FIXES.md:12-32
Feature Flags
The application uses a feature flag system to enable or disable functionality remotely. This is useful for gradual rollouts and A/B testing. The configuration is located in src/core/config/features.config.js.
Example Feature Flag Configuration:
// src/core/config/features.config.js
export const FEATURES = {
AUTH: {
ENABLED: true,
SOCIAL_LOGIN: false,
},
CLOUD_SYNC: {
ENABLED: false,
},
COLLABORATION: {
ENABLED: false,
}
};
To check if a feature is enabled, use the isFeatureEnabled helper function.
Sources: TASK_4_DISCUSSION.md:180-204, TASK_4_SUMMARY.md:108-125
Code Style & Conventions
A consistent code style is enforced to maintain readability and quality.
Linting and Formatting
The project uses ESLint and Prettier to enforce code style. Please run npm run lint before committing your changes to catch any issues.
Sources: README.md:198-199
UI Components & Styling (Tamagui)
The project is migrating from StyleSheet.create to the Tamagui UI library for better performance, smaller bundle size, and a more consistent design system. New contributions should use Tamagui components and its styling conventions.
Key Benefits of Tamagui:
- Performance: Compiles to optimized styles, resulting in faster rendering.
- Developer Experience: Provides type-safe styling, CSS shorthands (
bg,p,m), and a powerful variants system. - Consistency: Uses a centralized design token system for colors, spacing, and typography.
Sources: TAMAGUI_MIGRATION.md:52-66, BUGS_FIXED_AND_IMPROVEMENTS.md:70-90
Styling Comparison
This table shows the difference between the old and new styling approaches.
| Aspect | Old Way (StyleSheet.create) | New Way (Tamagui) - |
| Example | javascript const styles = StyleSheet.create({ container: { backgroundColor: '#1A1A2E', padding: 16, borderRadius: 12, }, }); <View style={styles.container} /> | ```javascript
import { Container } from '@/components/tamagui';
Sources: BUGS_FIXED_AND_IMPROVEMENTS.md:80-96, TAMAGUI_MIGRATION.md:73-95
Bug Fixes and Code Quality
When contributing, please be mindful of code quality and potential bugs. Past fixes have addressed:
- Package Version Mismatches: Ensure dependencies are compatible with the Expo SDK. Use
npx expo install --fix. - Deprecated Components: Avoid using deprecated components from React Native.
- Performance: Use
useNativeDriver: truefor animations where possible. Tamagui handles this automatically. - Error Handling: Wrap asynchronous operations and external API calls in
try-catchblocks to prevent crashes. - Return Values: Ensure function return values match what the calling code expects. For example, export services return a URI string, not a success object.
Sources: BUGS_FIXED_AND_IMPROVEMENTS.md:13-68, CRITICAL_BUGS_FIXED.md:32-75
Summary
By following this guide, you can contribute effectively to the eefashionita project. Your work will help create a powerful and user-friendly fashion design tool. We look forward to your contributions