Platform-Specific Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The eefashiondesign application is designed as a cross-platform solution, targeting web, desktop, and mobile devices. The architecture employs a strategy of progressive enhancement and graceful degradation, providing a full-featured 3D design experience on capable platforms (web/desktop) while offering a functional, view-oriented experience with clear fallbacks on others (mobile/tablet). This is achieved through a combination of platform detection utilities, feature gating, responsive UI logic, and conditional component rendering.
Sources: README.md:10-12, README.md:61-77
Core Platform Detection
The foundation of the platform-specific architecture is the utility module located at src/core/utils/platform.js. This module provides a set of functions to identify the current operating system, device type, and feature support.
Platform and Device Identification
The system first identifies the basic platform (web, ios, android) and then determines a more granular device type (desktop, tablet, mobile) based on screen dimensions.
The following diagram illustrates the logic of the getDeviceType function.
This logic allows the application to differentiate between a mobile browser and a native mobile app, and to distinguish between desktop and tablet experiences on the web.
Sources: src/core/utils/platform.js:18-34
Key Detection Functions
The platform.js module exports several boolean constants and functions for easy use throughout the application.
| Function/Constant | Description | Source File |
|---|---|---|
isWeb | Returns true if the platform is web. | src/core/utils/platform.js:9 |
isMobile | Returns true if the platform is iOS or Android. | src/core/utils/platform.js:11 |
isNative | Returns true if the platform is not web. | src/core/utils/platform.js:12 |
isDesktop() | Returns true if the device type is 'desktop'. | src/core/utils/platform.js:36 |
isTablet() | Returns true if the device type is 'tablet'. | src/core/utils/platform.js:37 |
supports3D() | Returns true if the platform is web and the device is a desktop. | src/core/utils/platform.js:43-46 |
supportsWebGL() | Checks if the browser environment supports WebGL. | src/core/utils/platform.js:48-57 |
isFeatureAvailable(feature) | Checks a map of features to see if one is available on the current platform. | src/core/utils/platform.js:115-127 |
Feature Gating and Configuration
The application uses platform detection to enable or disable features, a practice known as feature gating. This ensures that features are only exposed on environments that can support them, preventing crashes and improving user experience.
3D Feature Gating
The most significant example is the gating of the 3D Design Atelier. The supports3D() function is the primary gatekeeper for this feature.
// src/core/utils/platform.js:43-46
export const supports3D = () => {
// 3D features only available on web/desktop
return isWeb && isDesktop();
};
This function is used within high-level components, like Design3DAtelierScreen, to decide whether to render the full 3D interface or a fallback component.
Sources: src/core/utils/platform.js:43-46, TASK_3_SUMMARY.md
The following sequence diagram shows how a screen uses this utility to render the appropriate UI.
Sources: TASK_3_SUMMARY.md
Centralized Feature Flags
In addition to runtime detection, the project uses a configuration file for feature flags, which can control the availability of features like AR, 3D, and AI Assistant. This allows for easier management and remote configuration in the future.
// src/core/config/features.config.js:128-144
export const FEATURES = {
AUTH: {
ENABLED: true,
// ...
},
CLOUD_SYNC: {
ENABLED: false,
// ...
},
// ...
EXPORT: {
PNG: true,
SVG: true,
PDF: true,
GLTF: false, // Backdoor for 3D export
},
'3D': {
ENABLED: true,
// ...
},
AR: {
ENABLED: true,
// ...
}
};
This configuration provides a static layer of control over features, complementing the dynamic platform-based detection.
Sources: src/core/config/features.config.js, TASK_4_SUMMARY.md
Graceful Degradation: The Mobile Fallback
When a feature is unavailable, the system provides a MobileFallback component. This component, found in src/features/design3D/components/ui/MobileFallback.js, serves as a user-friendly placeholder.
Instead of showing a broken or empty screen, it:
- Informs the user that the feature is desktop-only.
- Lists the features available on the desktop experience.
- Provides clear navigation options to other available parts of the app, such as the "2D Design Studio" or "AR Try-On".
This approach maintains user engagement and clearly communicates the application's capabilities on their current device.
Sources: src/features/design3D/components/ui/MobileFallback.js, TASK_3_SUMMARY.md
Responsive UI and Layouts
The file src/utils/responsive.js contains utilities for creating a responsive UI that adapts to different screen sizes.
| Utility | Description | Source File |
|---|---|---|
useDimensions() | A hook that listens to screen dimension changes. | src/utils/responsive.js:9-19 |
BREAKPOINTS | Defines pixel widths for mobile, tablet, and desktop. | src/utils/responsive.js:22-27 |
isMobile(), isTablet(), isDesktop() | Boolean functions to check the current breakpoint. | src/utils/responsive.js:30-33 |
normalize(size) | Scales font sizes based on screen width. | src/utils/responsive.js:38-45 |
wp(percentage), hp(percentage) | Calculates width/height as a percentage of the screen dimensions. | src/utils/responsive.js:66-75 |
These utilities are used to adjust layouts, font sizes, and component dimensions, ensuring the UI is usable and aesthetically pleasing across all supported devices.
Platform-Specific Module Loading
The architecture also handles platform differences at the module level. For native-only modules like expo-camera, a try-catch block is used to conditionally require the module, preventing the app from crashing on platforms where the module is not available (like web).
// As described in AUDIT_FIXES_SUMMARY.md
let Camera = null;
if (Platform.OS !== 'web') {
try {
Camera = require('expo-camera').Camera;
} catch (error) {
console.warn('Camera module not available:', error);
}
}
This pattern ensures that native hardware APIs are only accessed on compatible devices.
Sources: AUDIT_FIXES_SUMMARY.md
Platform Feature Matrix
The following table summarizes the feature availability across different platforms as described in the project's README.md.
| Feature | Web & Desktop | Tablet | Mobile |
|---|---|---|---|
| 3D Viewport | ✅ Full | ⚠️ Basic | ✅ View-only |
| 3D Editing | ✅ Full | ❌ No | ❌ No |
| Real-time Material Editing | ✅ Full | ⚠️ Preview | ❌ No |
| Physics Simulation | ✅ Full | ❌ No | ❌ No |
| Project Management | ✅ Full | ✅ Yes | ✅ Yes |
| Collaboration | ✅ Full | ✅ Yes | ✅ Yes |
| AR Try-On | ❌ No | ❌ No | ✅ Yes |
| Export | ✅ Full | ❌ No | ❌ No |
Sources: README.md:61-77
Conclusion
The platform-specific architecture of eefashiondesign is a robust system that intelligently adapts to the user's environment. By combining runtime platform detection, feature gating, responsive design utilities, and graceful fallbacks, the application successfully delivers a rich, full-featured experience on powerful desktop machines while remaining accessible and useful on mobile devices. This strategy is crucial for maximizing user reach and satisfaction across a diverse technological landscape.