# gabrielabubakar/crypto-trade-mobile architecture

> Architecture diagram of the GitHub repository gabrielabubakar/crypto-trade-mobile, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-02). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gabrielabubakar/crypto-trade-mobile
- Repository: https://github.com/gabrielabubakar/crypto-trade-mobile

## Overview

#### 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`.

Main entry points: [`app/(tabs)/_layout.tsx`](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/(tabs)/_layout.tsx) (Route groups), [`store/api/baseApi.ts`](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/api/baseApi.ts) (RTK Query base API), [`store/store.ts`](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/store.ts) (Redux store), [`app/_layout.tsx`](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/_layout.tsx) (Root layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Runtime"]
  node_expo{{"Expo / Metro<br/>mobile runtime"}}
end

subgraph group_navigation["Navigation"]
  node_root_layout["Root layout<br/>router root<br/>[_layout.tsx]"]
  node_bootstrap["Startup bootstrap<br/>[bootstrap.tsx]"]
  node_route_groups["Route groups<br/>screen navigation<br/>[_layout.tsx]"]
end

subgraph group_state["State &amp; API"]
  node_redux_store[("Redux store<br/>global state<br/>[store.ts]")]
  node_secure_persistence[("Secure persistence<br/>storage adapter")]
  node_auth_kyc_slices["Auth &amp; KYC slices<br/>feature state<br/>[authSlice.ts]"]
  node_base_api["RTK Query base API<br/>HTTP boundary<br/>[baseApi.ts]"]
  node_backend{{"External trading API<br/>hosted HTTP API"}}
end

subgraph group_features["Feature flows"]
  node_auth_security["Auth &amp; security<br/>identity flow<br/>[_layout.tsx]"]
  node_kyc_flow["KYC workflow<br/>verification flow<br/>[_layout.tsx]"]
  node_markets["Markets<br/>market screens<br/>[index.tsx]"]
  node_market_api["Market API<br/>RTK endpoints<br/>[marketApi.ts]"]
  node_trading["Trade flow<br/>transaction flow<br/>[index.tsx]"]
  node_trade_api["Trade API<br/>RTK endpoints<br/>[tradeApi.ts]"]
  node_wallets["Wallets &amp; portfolio<br/>wallet screens"]
  node_wallet_api["Wallet API<br/>RTK endpoints<br/>[walletApi.ts]"]
end

subgraph group_platform["Platform UI"]
  node_ui_system["UI primitives<br/>shared UI"]
  node_push_notifications["Push notifications<br/>platform integration"]
  node_openapi["OpenAPI contract<br/>API documentation<br/>[openapi.yaml]"]
end

node_expo -->|"launches"| node_root_layout
node_root_layout -->|"initializes"| node_bootstrap
node_root_layout -->|"hosts"| node_route_groups
node_bootstrap -->|"hydrates"| node_redux_store
node_redux_store -->|"persists session"| node_secure_persistence
node_redux_store -->|"contains"| node_auth_kyc_slices
node_redux_store -->|"registers"| node_base_api
node_base_api -->|"HTTP requests"| node_backend
node_route_groups -->|"routes to"| node_auth_security
node_route_groups -->|"routes to"| node_kyc_flow
node_route_groups -->|"routes to"| node_markets
node_route_groups -->|"routes to"| node_trading
node_route_groups -->|"routes to"| node_wallets
node_auth_security -->|"updates"| node_auth_kyc_slices
node_kyc_flow -->|"updates"| node_auth_kyc_slices
node_markets -->|"queries"| node_market_api
node_trading -->|"submits"| node_trade_api
node_wallets -->|"queries and submits"| node_wallet_api
node_market_api -->|"extends"| node_base_api
node_trade_api -->|"extends"| node_base_api
node_wallet_api -->|"extends"| node_base_api
node_route_groups -->|"composes"| node_ui_system
node_bootstrap -.->|"initializes"| node_push_notifications
node_openapi -.->|"documents"| node_backend

click node_root_layout "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/_layout.tsx"
click node_bootstrap "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/bootstrap.tsx"
click node_route_groups "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/(tabs)/_layout.tsx"
click node_redux_store "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/store.ts"
click node_secure_persistence "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/config/secureStoreEngine.ts"
click node_auth_kyc_slices "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/slices/authSlice.ts"
click node_base_api "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/api/baseApi.ts"
click node_auth_security "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/(auth)/_layout.tsx"
click node_kyc_flow "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/kyc/_layout.tsx"
click node_markets "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/(tabs)/markets/%5Bid%5D/index.tsx"
click node_market_api "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/api/marketApi.ts"
click node_trading "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/(tabs)/trades/index.tsx"
click node_trade_api "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/api/tradeApi.ts"
click node_wallet_api "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/api/walletApi.ts"
click node_ui_system "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/components/ui/ScreenContainer.tsx"
click node_push_notifications "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/hooks/usePushNotifications.ts"
click node_openapi "https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/openapi.yaml"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_expo toneBlue
class node_root_layout,node_bootstrap,node_route_groups toneAmber
class node_redux_store,node_secure_persistence,node_auth_kyc_slices,node_base_api,node_backend toneMint
class node_auth_security,node_kyc_flow,node_markets,node_market_api,node_trading,node_trade_api,node_wallets,node_wallet_api toneRose
class node_ui_system,node_push_notifications,node_openapi toneIndigo
```

## Components

### Runtime

- **Expo / Metro**: mobile runtime · Runs the iOS, Android, and web client.

### Navigation

- [Root layout](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/_layout.tsx): router root · `app/_layout.tsx`
- [Startup bootstrap](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/bootstrap.tsx): startup · `app/bootstrap.tsx`
- [Route groups](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/(tabs)/_layout.tsx): screen navigation · Auth, tabs, and KYC route boundaries. · `app/(tabs)/_layout.tsx`

### State & API

- [Redux store](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/store.ts): global state · Typed state store with persisted session state. · `store/store.ts`
- [Secure persistence](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/config/secureStoreEngine.ts): storage adapter · `config/secureStoreEngine.ts`
- [Auth & KYC slices](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/slices/authSlice.ts): feature state · `store/slices/authSlice.ts`
- [RTK Query base API](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/api/baseApi.ts): HTTP boundary · Centralizes authenticated requests and mutex-guarded token refresh. · `store/api/baseApi.ts`
- **External trading API**: hosted HTTP API · Selected through EXPO_PUBLIC_API_URL.

### Feature flows

- [Auth & security](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/(auth)/_layout.tsx): identity flow · Sign-in, registration, OTP, recovery, 2FA, and security settings. · `app/(auth)/_layout.tsx`
- [KYC workflow](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/kyc/_layout.tsx): verification flow · Details, document, selfie, review, and limits stages. · `app/kyc/_layout.tsx`
- [Markets](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/(tabs)/markets/%5Bid%5D/index.tsx): market screens · Asset discovery, details, books, trades, alerts, and watchlists. · `app/(tabs)/markets/[id]/index.tsx`
- [Market API](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/api/marketApi.ts): RTK endpoints · `store/api/marketApi.ts`
- [Trade flow](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/app/(tabs)/trades/index.tsx): transaction flow · Entry, quote preview, confirmation, operation, and status. · `app/(tabs)/trades/index.tsx`
- [Trade API](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/api/tradeApi.ts): RTK endpoints · `store/api/tradeApi.ts`
- **Wallets & portfolio**: wallet screens · Balances, deposits, withdrawals, history, and transaction records.
- [Wallet API](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/store/api/walletApi.ts): RTK endpoints · `store/api/walletApi.ts`

### Platform UI

- [UI primitives](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/components/ui/ScreenContainer.tsx): shared UI · Screen shells, headers, modals, and feature components. · `components/ui/ScreenContainer.tsx`
- [Push notifications](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/hooks/usePushNotifications.ts): platform integration · `hooks/usePushNotifications.ts`
- [OpenAPI contract](https://github.com/gabrielabubakar/crypto-trade-mobile/blob/master/openapi.yaml): API documentation · `openapi.yaml`

## Connections

- Expo / Metro → Root layout: launches
- Root layout → Startup bootstrap: initializes
- Root layout → Route groups: hosts
- Startup bootstrap → Redux store: hydrates
- Redux store → Secure persistence: persists session
- Redux store → Auth & KYC slices: contains
- Redux store → RTK Query base API: registers
- RTK Query base API → External trading API: HTTP requests
- Route groups → Auth & security: routes to
- Route groups → KYC workflow: routes to
- Route groups → Markets: routes to
- Route groups → Trade flow: routes to
- Route groups → Wallets & portfolio: routes to
- Auth & security → Auth & KYC slices: updates
- KYC workflow → Auth & KYC slices: updates
- Markets → Market API: queries
- Trade flow → Trade API: submits
- Wallets & portfolio → Wallet API: queries and submits
- Market API → RTK Query base API: extends
- Trade API → RTK Query base API: extends
- Wallet API → RTK Query base API: extends
- Route groups → UI primitives: composes
- Startup bootstrap → Push notifications: initializes
- OpenAPI contract → External trading API: documents