API Integration and Service Layer Patterns

Service Layer Architecture: #

Minchyn separates API logic from components using a service layer in /services. Each service handles related API endpoints: UserService for authentication and profile, ContentService for posts and media, AdService for advertising, MarketplaceService for store operations. Services use axios for HTTP requests with centralized configuration in /config/apiConfig.ts. Base URL, timeout, and default headers are configured once. Interceptors handle authentication tokens, request/response logging, and error transformation. This architecture keeps components clean and simplifies testing by mocking services.

Making API Calls: #

Import services: import { UserService } from ‘@/services/UserService’. Call methods with async/await: const user = await UserService.getProfile(userId). Services return typed responses: Promise for type safety. Handle errors with try/catch: catch (error) { handleError(error); }. Use loading states in components to show spinners during requests. Implement optimistic updates for better UX: update local state immediately, revert if API fails. Cache responses when appropriate using React Query or MobX computed values. Implement retry logic for transient failures. Add request debouncing for search and autocomplete.

Authentication & Authorization: #

JWT tokens are stored securely in AsyncStorage (encrypted on device). On app launch, check for stored token and validate with API. Include tokens in request headers: Authorization: Bearer ${token}. Handle token refresh automatically when access tokens expire using refresh token flow. Implement 401 response interceptor to trigger reauthentication or logout. Store sensitive data only with encryption libraries. Use role-based access control (RBAC) for feature gating: check user.role in components. Implement proper logout: clear local storage, revoke tokens on backend, redirect to login. Follow OWASP guidelines for mobile app security.