How tunnaduong/cbh-youth-online-mobile works
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: Api.js API client · App.js App navigation · HomeScreen/index.js Feed & posts · LoginScreen/index.js Sign-in & onboarding
Components 23
Onboarding & Identity
- Authentication
app/contexts/AuthContext.js - Sign-in & onboarding
app/screens/LoginScreen/index.js - OAuth sign-in
app/services/oauth.js - Language selection
app/i18n/index.js
Social & Discovery
- Feed & posts
app/screens/MainScreens/HomeScreen/index.js - Post composer
app/components/PostEditor/usePostEditor.js - Stories
app/screens/MainScreens/CreateStoryScreen/index.js - Forum & reports
app/screens/MainScreens/ForumScreen/index.js - Explore & study
app/screens/MainScreens/ExploreScreen/index.js
Messaging & Alerts
- Chat conversations
app/screens/MainScreens/ChatScreen/ConversationScreen.js - Realtime socket
app/services/echo/echo.js - Push notifications
app/services/notifications/ExpoNotificationService.js - Voice & video calls
app/contexts/CallContext.js
Member Services & Platform
- Background uploads
app/services/uploadQueue.js - API client
app/services/api/Api.js - Profiles & settings
app/screens/MainScreens/ProfileScreen/index.js - Points & wallet
app/screens/MainScreens/PointWalletScreen/index.js - Embedded web app
app/screens/MainScreens/WebAppScreen/index.js - OTA updates
app/services/ota/otaService.js - Local preferences
app/global/storage.js
Other components
- App user
- App navigation
App.js - Shared backend
Connections 27
- App user → App navigation: opens
README.md - App navigation → Sign-in & onboarding: routes to
README.md - Sign-in & onboarding → Authentication: authenticates
- Sign-in & onboarding → OAuth sign-in: starts OAuth
README.md - Authentication → API client: requests session
app/contexts/AuthContext.js - Language selection → Local preferences: stores language
app/i18n/index.js - App navigation → Feed & posts: routes to
README.md - Feed & posts → API client: loads feed
README.md - Feed & posts → Post composer: opens composer
- Post composer → API client: uploads images
app/components/PostEditor/usePostEditor.js - Feed & posts → Background uploads: queues posts
app/screens/MainScreens/HomeScreen/index.js - App user → Stories: creates stories
README.md - App navigation → Forum & reports: routes to
README.md - App navigation → Explore & study: routes to
README.md - App user → Chat conversations: messages
README.md - Chat conversations → API client: uses chat API
README.md - Chat conversations → Realtime socket: receives realtime
README.md - App user → Push notifications: receives alerts
README.md - Voice & video calls → API client: calls endpoints
app/contexts/CallContext.js - Voice & video calls → Realtime socket: subscribes realtime
app/contexts/CallContext.js - API client → Shared backend: sends requests
README.md - OAuth sign-in → Shared backend: exchanges code
README.md - Profiles & settings → API client: updates account
- Points & wallet → API client: uses wallet API
- Embedded web app → Shared backend: opens shop & admin
README.md - App navigation → OTA updates: checks updates
App.js - OTA updates → Local preferences: stores update state
app/services/ota/otaService.js