# tunnaduong/cbh-youth-online-mobile architecture

> Architecture diagram of the GitHub repository tunnaduong/cbh-youth-online-mobile, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/tunnaduong/cbh-youth-online-mobile
- Repository: https://github.com/tunnaduong/cbh-youth-online-mobile

## Overview

CBH Youth Online is a React Native community and school-services app. Users onboard and authenticate, then navigate a shared mobile shell to social feeds and stories, messaging, discovery, member services, and account settings. The app uses a shared API for backend features, with separate realtime chat, push-notification, and OTA-update capabilities. The README documents the major feature flows; some screen implementations are unsampled, so links between those screens and their underlying services are shown only where documented.

Main entry points: [`app/services/api/Api.js`](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/api/Api.js) (API client), [`App.js`](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/App.js) (App navigation), [`app/screens/MainScreens/HomeScreen/index.js`](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/HomeScreen/index.js) (Feed & posts), [`app/screens/LoginScreen/index.js`](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/LoginScreen/index.js) (Sign-in & onboarding)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_onboarding["Onboarding & Identity"]
  node_auth["Authentication<br/>[AuthContext.js]"]
  node_authscreens["Sign-in &amp; onboarding<br/>[index.js]"]
  node_oauth["OAuth sign-in<br/>[oauth.js]"]
  node_language["Language selection<br/>[index.js]"]
end

subgraph group_community["Social &amp; Discovery"]
  node_feed["Feed &amp; posts<br/>[index.js]"]
  node_posteditor["Post composer<br/>[usePostEditor.js]"]
  node_stories["Stories<br/>[index.js]"]
  node_forum["Forum &amp; reports<br/>[index.js]"]
  node_explore["Explore &amp; study<br/>[index.js]"]
end

subgraph group_messaging["Messaging &amp; Alerts"]
  node_chat["Chat conversations"]
  node_socket["Realtime socket<br/>[echo.js]"]
  node_notifications["Push notifications"]
  node_calls["Voice &amp; video calls<br/>[CallContext.js]"]
end

subgraph group_platform["Member Services &amp; Platform"]
  node_uploads["Background uploads<br/>[uploadQueue.js]"]
  node_api["API client<br/>[Api.js]"]
  node_profile["Profiles &amp; settings<br/>[index.js]"]
  node_points["Points &amp; wallet<br/>[index.js]"]
  node_webapp["Embedded web app<br/>[index.js]"]
  node_ota["OTA updates<br/>[otaService.js]"]
  node_localstate[("Local preferences<br/>[storage.js]")]
end

node_member(("App user"))
node_shell["App navigation<br/>[App.js]"]
node_backend[("Shared backend")]

node_member -->|"opens"| node_shell
node_shell -->|"routes to"| node_authscreens
node_authscreens -.->|"authenticates"| node_auth
node_authscreens -->|"starts OAuth"| node_oauth
node_auth -->|"requests session"| node_api
node_language -->|"stores language"| node_localstate
node_shell -->|"routes to"| node_feed
node_feed -->|"loads feed"| node_api
node_feed -.->|"opens composer"| node_posteditor
node_posteditor -->|"uploads images"| node_api
node_feed -->|"queues posts"| node_uploads
node_member -->|"creates stories"| node_stories
node_shell -->|"routes to"| node_forum
node_shell -->|"routes to"| node_explore
node_member -->|"messages"| node_chat
node_chat -->|"uses chat API"| node_api
node_chat -->|"receives realtime"| node_socket
node_member -->|"receives alerts"| node_notifications
node_calls -->|"calls endpoints"| node_api
node_calls -->|"subscribes realtime"| node_socket
node_api -->|"sends requests"| node_backend
node_oauth -->|"exchanges code"| node_backend
node_profile -.->|"updates account"| node_api
node_points -.->|"uses wallet API"| node_api
node_webapp -->|"opens shop &amp; admin"| node_backend
node_shell -->|"checks updates"| node_ota
node_ota -->|"stores update state"| node_localstate

click node_shell "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/App.js"
click node_auth "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/contexts/AuthContext.js"
click node_authscreens "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/LoginScreen/index.js"
click node_oauth "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/oauth.js"
click node_language "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/i18n/index.js"
click node_feed "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/HomeScreen/index.js"
click node_posteditor "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/components/PostEditor/usePostEditor.js"
click node_stories "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/CreateStoryScreen/index.js"
click node_forum "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/ForumScreen/index.js"
click node_explore "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/ExploreScreen/index.js"
click node_chat "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/ChatScreen/ConversationScreen.js"
click node_socket "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/echo/echo.js"
click node_notifications "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/notifications/ExpoNotificationService.js"
click node_calls "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/contexts/CallContext.js"
click node_uploads "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/uploadQueue.js"
click node_api "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/api/Api.js"
click node_profile "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/ProfileScreen/index.js"
click node_points "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/PointWalletScreen/index.js"
click node_webapp "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/WebAppScreen/index.js"
click node_ota "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/ota/otaService.js"
click node_localstate "https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/global/storage.js"

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_auth,node_authscreens,node_oauth,node_language,node_member toneBlue
class node_feed,node_posteditor,node_stories,node_forum,node_explore,node_backend toneAmber
class node_chat,node_socket,node_notifications,node_calls toneMint
class node_uploads,node_api,node_profile,node_points,node_webapp,node_ota,node_localstate toneRose
class node_shell toneTeal
```

## Components

### Onboarding & Identity

- [Authentication](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/contexts/AuthContext.js): `app/contexts/AuthContext.js`
- [Sign-in & onboarding](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/LoginScreen/index.js): `app/screens/LoginScreen/index.js`
- [OAuth sign-in](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/oauth.js): `app/services/oauth.js`
- [Language selection](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/i18n/index.js): `app/i18n/index.js`

### Social & Discovery

- [Feed & posts](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/HomeScreen/index.js): `app/screens/MainScreens/HomeScreen/index.js`
- [Post composer](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/components/PostEditor/usePostEditor.js): `app/components/PostEditor/usePostEditor.js`
- [Stories](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/CreateStoryScreen/index.js): `app/screens/MainScreens/CreateStoryScreen/index.js`
- [Forum & reports](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/ForumScreen/index.js): `app/screens/MainScreens/ForumScreen/index.js`
- [Explore & study](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/ExploreScreen/index.js): `app/screens/MainScreens/ExploreScreen/index.js`

### Messaging & Alerts

- [Chat conversations](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/ChatScreen/ConversationScreen.js): `app/screens/MainScreens/ChatScreen/ConversationScreen.js`
- [Realtime socket](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/echo/echo.js): `app/services/echo/echo.js`
- [Push notifications](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/notifications/ExpoNotificationService.js): `app/services/notifications/ExpoNotificationService.js`
- [Voice & video calls](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/contexts/CallContext.js): `app/contexts/CallContext.js`

### Member Services & Platform

- [Background uploads](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/uploadQueue.js): `app/services/uploadQueue.js`
- [API client](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/api/Api.js): `app/services/api/Api.js`
- [Profiles & settings](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/ProfileScreen/index.js): `app/screens/MainScreens/ProfileScreen/index.js`
- [Points & wallet](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/PointWalletScreen/index.js): `app/screens/MainScreens/PointWalletScreen/index.js`
- [Embedded web app](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/screens/MainScreens/WebAppScreen/index.js): `app/screens/MainScreens/WebAppScreen/index.js`
- [OTA updates](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/services/ota/otaService.js): `app/services/ota/otaService.js`
- [Local preferences](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/app/global/storage.js): `app/global/storage.js`

### Other components

- **App user**
- [App navigation](https://github.com/tunnaduong/cbh-youth-online-mobile/blob/main/App.js): `App.js`
- **Shared backend**

## Connections

- App user → App navigation: opens (evidence: `README.md`)
- App navigation → Sign-in & onboarding: routes to (evidence: `README.md`)
- Sign-in & onboarding → Authentication: authenticates
- Sign-in & onboarding → OAuth sign-in: starts OAuth (evidence: `README.md`)
- Authentication → API client: requests session (evidence: `app/contexts/AuthContext.js`)
- Language selection → Local preferences: stores language (evidence: `app/i18n/index.js`)
- App navigation → Feed & posts: routes to (evidence: `README.md`)
- Feed & posts → API client: loads feed (evidence: `README.md`)
- Feed & posts → Post composer: opens composer
- Post composer → API client: uploads images (evidence: `app/components/PostEditor/usePostEditor.js`)
- Feed & posts → Background uploads: queues posts (evidence: `app/screens/MainScreens/HomeScreen/index.js`)
- App user → Stories: creates stories (evidence: `README.md`)
- App navigation → Forum & reports: routes to (evidence: `README.md`)
- App navigation → Explore & study: routes to (evidence: `README.md`)
- App user → Chat conversations: messages (evidence: `README.md`)
- Chat conversations → API client: uses chat API (evidence: `README.md`)
- Chat conversations → Realtime socket: receives realtime (evidence: `README.md`)
- App user → Push notifications: receives alerts (evidence: `README.md`)
- Voice & video calls → API client: calls endpoints (evidence: `app/contexts/CallContext.js`)
- Voice & video calls → Realtime socket: subscribes realtime (evidence: `app/contexts/CallContext.js`)
- API client → Shared backend: sends requests (evidence: `README.md`)
- OAuth sign-in → Shared backend: exchanges code (evidence: `README.md`)
- Profiles & settings → API client: updates account
- Points & wallet → API client: uses wallet API
- Embedded web app → Shared backend: opens shop & admin (evidence: `README.md`)
- App navigation → OTA updates: checks updates (evidence: `App.js`)
- OTA updates → Local preferences: stores update state (evidence: `app/services/ota/otaService.js`)