API Services
Relevant source files
The following files were used as context for generating this wiki page:The API Services layer acts as the primary integration point between the application's frontend and backend services. It is designed as a collection of "backdoors" or modular services that abstract backend communication, allowing for features like user authentication, cloud data synchronization, and file storage to be plugged in without major refactoring. This architecture is built for flexibility, primarily targeting a Supabase backend but adaptable to other technologies.
This layer is responsible for handling all external API calls, managing data transformation, and providing a clean interface for the rest of the application to consume. It is configured via environment variables and controlled by a feature flag system, enabling gradual feature rollouts and different configurations for development and production environments.
Sources: TASK_4_SUMMARY.md, TASK_4_DISCUSSION.md
Architecture Overview
The service layer is structured to separate concerns, with distinct modules for API communication, local storage, and configuration. The core of the remote communication resides in the src/core/services/api/ directory.
This diagram illustrates the proposed structure for the service layer.
Sources: TASK_4_DISCUSSION.md
Supabase Client
The foundation of the API services is the Supabase client, which handles the connection to the Supabase backend. It is initialized once and exported for use in other API service modules.
- Initialization: The client is created using
createClientfrom@supabase/supabase-js. - Configuration: The Supabase URL and anonymous key are loaded from environment variables managed by
env.config.js. This prevents hardcoding sensitive keys in the source code. - Session Persistence: The client is configured to use
AsyncStoragefor session persistence, ensuring that user sessions are maintained across app launches.
Sources: src/core/services/api/supabase.client.js, src/core/config/env.config.js
Feature Flag Control
API services are controlled by a feature flag system, which allows developers to enable or disable backend-dependent features easily. This is managed in src/core/config/features.config.js.
| Feature Category | Flag | Default Status | Description |
|---|---|---|---|
AUTH | ENABLED | true | Enables the entire authentication system. |
CLOUD_SYNC | ENABLED | false | Enables cloud synchronization features. |
IMAGE_UPLOAD | ENABLED | false | Enables image upload functionality. |
COLLABORATION | ENABLED | false | Placeholder for real-time collaboration features. |
Sources: src/core/config/features.config.js:4-22, TASK_4_SUMMARY.md
Authentication Service
The Authentication Service (auth.api.js) manages all user authentication operations, interacting directly with the Supabase Auth service. It provides methods for user sign-up, sign-in, sign-out, session management, and profile updates.
Sources: src/core/services/api/auth.api.js
Key Functions
| Function | Description | Parameters |
|---|---|---|
signUp | Registers a new user with email and password. | email, password, metadata |
signIn | Signs in an existing user. | email, password |
signOut | Signs out the current user and clears the session. | - |
getSession | Retrieves the current user session. | - |
onAuthStateChange | Listens for changes in the authentication state. | callback |
updateUser | Updates the current user's metadata. | metadata |
sendPasswordResetEmail | Sends a password reset link to the user's email. | email |
Sources: src/core/services/api/auth.api.js
Sign-In Flow
The following diagram shows the sequence of events during a user sign-in operation.
Cloud Sync Service
The Cloud Sync Service (sync.api.js) is a placeholder module designed to handle the synchronization of user designs between the local device and a cloud database. The functions are defined but contain TODO comments, indicating that the implementation is pending. This follows the "backdoor" architecture, preparing the app for future cloud storage integration.
Placeholder Functions
| Function | Description |
|---|---|
syncDesignToCloud | Saves a single design to the cloud. |
loadDesignFromCloud | Loads a single design from the cloud. |
getAllDesignsFromCloud | Retrieves all designs for the current user. |
deleteDesignFromCloud | Deletes a design from the cloud. |
Sources: src/core/services/api/sync.api.js, TASK_4_SUMMARY.md
Upload Service
The Upload Service (upload.api.js) provides functionality for uploading files, specifically images, to Supabase Storage. The implementation is complete but commented out, pending the creation of a storage bucket in the Supabase project. It includes image compression before uploading.
Key Functions
| Function | Description |
|---|---|
uploadImage | Compresses and uploads an image to a specified storage bucket. |
deleteImage | Deletes an image from the storage bucket. |
getImageUrl | Retrieves the public URL for a stored image. |
compressImage | Reduces the size and dimensions of an image before upload. |
Sources: src/core/services/api/upload.api.js, TASK_4_SUMMARY.md
Image Upload Flow
This flowchart outlines the steps involved in uploading an image.
Other Services
While not strictly remote API services, the following modules are part of the application's service layer and provide critical functionalities.
Export Service
The ExportService (exportService.js) is a client-side service responsible for converting and exporting user designs into various file formats like PNG, JPG, SVG, and PDF. It uses utility functions to capture views and interacts with the device's file system to save or share the output.
The diagram below shows the public methods available in the ExportService class.
Sources: src/services/exportService.js
Summary
The API Services in eefashiondesign are architected as a modular and extensible layer that isolates backend communication from the UI. By leveraging Supabase for core functionalities and providing placeholder "backdoors" for future features, the system is well-prepared for growth. The use of environment configurations and feature flags ensures that the application remains flexible and easy to manage across different stages of development.