gabrielabubakar/crypto-trade-mobile

Purpose and runtime

Crypto Trade Mobile is an Expo SDK 54 / React Native client for cryptocurrency trading, wallets, market data, security, KYC, and price alerts. It runs on iOS, Android, and web through Expo/Metro, with EAS build configuration in eas.json. Its backend is an external HTTP API selected by EXPO_PUBLIC_API_URL; the default is a hosted Render service.

Application bootstrap and navigation

Expo Router file-based routing is rooted at app/_layout.tsx, with startup work isolated in app/bootstrap.tsx and the landing route in app/index.tsx. Route groups separate unauthenticated, onboarding, KYC, and primary tabbed experiences:

• Authentication: app/(auth)/_layout.tsx, app/(auth)/index.tsx

• Main tabs: app/(tabs)/_layout.tsx

• KYC flow: app/kyc/_layout.tsx, app/kyc/index.tsx

This boundary makes navigation state and screen composition distinct from API/state implementation.

Global state, persistence, and API boundary

Redux is the application state backbone. Store construction and typed hooks are in store/store.ts, store/index.ts, and store/hooks.ts; durable session behavior is described as using redux-persist with secure storage configured by config/secureStoreEngine.ts. Local cross-screen state is held in feature slices, notably store/slices/authSlice.ts and store/slices/kycSlice.ts.

RTK Query forms the remote-data boundary. store/api/baseApi.ts centralizes requests and reauthentication; feature endpoint modules such as store/api/authApi.ts, store/api/marketApi.ts, and store/api/walletApi.ts expose cached queries/mutations to screens. A 401 triggers token refresh guarded by a mutex, preventing concurrent refresh attempts before queued requests proceed.

Identity, security, and KYC

Authentication supports sign-in, registration, OTP, recovery, and two-factor screens under app/(auth)/. Reusable form/step UI is in components/auth/AuthForm.tsx, components/auth/OTPStep.tsx, and components/auth/SignInForm.tsx. Security settings—including PIN, devices, recovery codes, and 2FA—are routed under app/(tabs)/profile/security/.

KYC is a staged identity-verification workflow spanning personal details, document, selfie, review, and limits routes (app/kyc/details.tsx, app/kyc/document.tsx, app/kyc/selfie.tsx). KYC status presentation is encapsulated in components/kyc/.

Markets and trading flow

Market discovery and detail routes are organized in app/(tabs)/markets/, including dynamic asset pages at app/(tabs)/markets/[id]/index.tsx, order books, trades, alerts, watchlists, and trending. Market API data crosses through store/api/marketApi.ts; typed contracts live in types/api/marketApi.types.ts.

Trading is a multistep transaction flow: entry, quote preview, confirmation, operation, and status at app/(tabs)/trades/index.tsx, app/(tabs)/trades/quote-preview.tsx, and app/(tabs)/trades/status.tsx. Trade UI is composed from components/trades/, while request lifecycle and server contracts are isolated in store/api/tradeApi.ts and types/api/tradeApi.types.ts.

Wallets, portfolio, and transactions

Wallet screens cover balances, deposits, withdrawals, history, and transaction details in app/(tabs)/wallets/, with dynamic transaction records at app/(tabs)/wallets/transaction/[id].tsx. Withdrawal is explicitly staged through form, confirmation, and submission components in components/wallets/withdraw/. Remote wallet/portfolio data is owned by store/api/walletApi.ts, avoiding direct backend access from shared UI rows.

UI system and platform integrations

Reusable visual primitives and screen shells are centralized in components/ui/, particularly components/ui/ScreenContainer.tsx, components/ui/ScreenHeader.tsx, and components/ui/BaseModal.tsx. Feature-specific components consume route/state data rather than owning navigation or transport. The application includes Android Firebase configuration at google-services.json, push-notification integration via hooks/usePushNotifications.ts, toast configuration in config/toastConfig.tsx, bundled fonts under assets/fonts/, and OpenAPI documentation at openapi.yaml.