React TypeScript Integration
// API Client Example
interface ApiResponse<T> {
status?: string;
data?: T;
error?: string;
}
class ECommerceAPI {
private baseURL = 'https://your-domain.com/api/v1';
private authToken: string | null = null;
setAuthToken(token: string) {
this.authToken = token;
}
private async request<T>(
endpoint: string,
options: RequestInit = {}
): Promise<ApiResponse<T>> {
const headers = {
'Content-Type': 'application/json',
...(this.authToken && { 'Authorization': `Bearer ${this.authToken}` }),
...options.headers,
};
const response = await fetch(`${this.baseURL}${endpoint}`, {
...options,
headers,
});
return response.json();
}
// Authentication methods
async register(userData: {
email: string;
password: string;
display_name: string;
}) {
return this.request('/auth/register', {
method: 'POST',
body: JSON.stringify(userData),
});
}
async login(credentials: { email: string; password: string }) {
return this.request('/auth/login', {
method: 'POST',
body: JSON.stringify(credentials),
});
}
// Product methods
async getProducts() {
return this.request('/auth/get/products');
}
async createProduct(productData: any) {
return this.request('/auth/create/product', {
method: 'POST',
body: JSON.stringify(productData),
});
}
// Order methods
async placeProductOrder(orderData: any) {
return this.request('/auth/place/product/order', {
method: 'POST',
body: JSON.stringify(orderData),
});
}
}
React Native Integration
// React Native API Service
import AsyncStorage from '@react-native-async-storage/async-storage';
class ECommerceApiService {
constructor() {
this.baseURL = 'https://your-domain.com/api/v1';
}
async getAuthToken() {
return AsyncStorage.getItem('auth_token');
}
async setAuthToken(token) {
return AsyncStorage.setItem('auth_token', token);
}
async apiCall(endpoint, method = 'GET', body = null) {
const token = await this.getAuthToken();
const headers = {
'Content-Type': 'application/json',
};
if (token) {
headers['Authorization'] = `Bearer ${token}`;
}
const config = {
method,
headers,
};
if (body) {
config.body = JSON.stringify(body);
}
try {
const response = await fetch(`${this.baseURL}${endpoint}`, config);
const data = await response.json();
if (!response.ok) {
throw new Error(data.error || 'API request failed');
}
return data;
} catch (error) {
console.error('API Error:', error);
throw error;
}
}
// Usage examples
async registerUser(email, password, displayName) {
return this.apiCall('/auth/register', 'POST', {
email,
password,
display_name: displayName,
});
}
async getActiveOrders(customerId) {
return this.apiCall('/orders/product/active', 'POST', {
Customer_ID: customerId,
});
}
}
Common Workflows
User Registration & Setup Flow:
- POST /auth/register - Create user account
- Store returned idToken for authentication
- POST /auth/setup - Complete profile setup
- User can now access protected endpoints
Product Order Flow:
- GET /auth/get/products - Browse products
- POST /auth/place/product/order - Place order
- System generates authentication code
- POST /auth/complete/order - Complete with auth code
Seller Product Management:
- Ensure account type is "Seller" in setup
- POST /auth/create/product - Create products
- GET /auth/get/user/products - View own products
- POST /auth/update/product/details - Update products
Best Practices
- Token Management: Securely store Firebase tokens, implement refresh logic
- Error Handling: Always check response status codes and handle errors
gracefully
- Loading States: Show loading indicators during API calls
- Validation: Validate user input before sending requests
- Offline Support: Cache important data for offline usage
- Security: Never expose sensitive data in client-side code