Skip to content
/Soul33 – The Beacon
WellnessiOS · AndroidLiverole: Lead React Native Developer

Soul33 – The Beacon

Spirituality, Meditation & Mindfulness Platform

15K+
Users
4.7
Rating
50+
Screens
React Native 0.82.1React 19TypeScriptRedux ToolkitRedux PersistReact Navigation 7react-native-track-player@shopify/flash-listReanimated 4 + WorkletsFirebase (Modular SDK)AWS S3WebSocketNotifeeNew Architecture (Fabric + TurboModules)
Private client codebase. Architecture, decisions, and shipped outcomes shared with permission — source unavailable.

App Screenshots

Home Screen
Home Screen
Meditation Player
Meditation Player
Group Chat
Group Chat
Digital Guidance Cards
Digital Guidance Cards
Podcast & Teachings
Podcast & Teachings
Videos & Remote Healing
Videos & Remote Healing
Soul journal & Mood Tracking
Soul journal & Mood Tracking
Case Study

Spirituality, meditation & a private real-time community

Problem

An iOS + Android subscription app on RN 0.71 with audio jank, fragile WebSocket chat, and a fragmented multi-stack navigation that slowed feature work and made upgrades risky.

What I built

Re-architected the boot pipeline to lazy-instantiate every drawer stack, hoisted a single shared MeditationPlayer modal so all sub-stacks navigate to one player, and consolidated the WebSocket into one provider with heartbeat + exponential backoff. Built the audio engine on react-native-track-player with background playback, offline downloads, and listen-time analytics flushed across cold starts.

Hard parts
  • Three React Native upgrades shipped to live subscribers — 0.71 → 0.81.4 → 0.82.1 with the New Architecture
  • Firebase namespaced → modular SDK migration without breaking analytics or messaging
  • Memory-bounded chat over @shopify/flash-list with 500-message cap, swipe-to-reply gestures, and S3 presigned audio uploads
Result

Live on App Store + Google Play across Free, Seeker, and Mastery tiers — stable WebSocket, smooth 60fps audio playback, and a production-grade upgrade path for future RN releases.

3
RN Upgrades Shipped
60fps
Audio Mini-Player
11
Feature Pillars Owned

About the Project

Soul33 – The Beacon is a production iOS + Android app shipped to App Store and Google Play, serving Free, Seeker, and Mastery subscribers with guided meditations, journaling, oracle readings, weekly homework, and a private spiritual community. Built on React Native 0.82.1 with the New Architecture (Fabric + TurboModules) and React 19, with TypeScript across slices, components, and hooks.

I led end-to-end development across eleven feature pillars — auth, home dashboard, meditation engine, podcast, video, real-time chat, soul oracle, soul lab quiz, soul journal, weekly homework, and mantra messages. The codebase survived three React Native upgrades (0.71 → 81.4 → 82.1), a full Firebase namespaced → modular SDK migration, and the New Architecture rollout — all delivered cleanly to live subscribers.

The boot pipeline lazily instantiates every drawer stack via getComponent + require(), freezes inactive bottom tabs, mounts a single shared MeditationPlayer modal at the root so all sub-stacks navigate to one player instance, and consolidates the app's WebSocket into one hoisted provider with heartbeat liveness, exponential backoff with jitter, and AppState + NetInfo-driven reconnects.

The audio engine (react-native-track-player) supports background playback with lock-screen controls and Bluetooth / AirPlay handoff, an offline download queue with serial FIFO processing and per-user filesystem layout, and listen-time analytics buffered in AsyncStorage when offline and flushed on next foreground so data survives force-quit. A cross-tab mini-player isolates its ProgressFill into a memoized leaf so only that pixel bar updates at the 4Hz progress tick.

Real-time chat is built on a refactored hook architecture (useChatMessages, useChatAudio, useChatAudioUpload) over @shopify/flash-list, with S3 presigned-URL audio uploads, swipe-to-reply gestures, typing indicators, online presence, a 500-message cap for memory bounds, and admin broadcast voice notes.

A Firebase Remote Config pipeline drives forced-update, feature-update, and notification modals with AsyncStorage seen-message dedup so users only see new messages once. A centralized Axios client with request/response interceptors handles 401 auto-logout via a ResetStore action that preserves downloaded offline content across sessions.

Key Highlights

Live on App Store & Google Play with Free, Seeker & Mastery subscription tiers
Survived three React Native upgrades (0.71 → 81.4 → 82.1) plus full Firebase namespaced → modular SDK migration
Single hoisted WebSocket with heartbeat liveness, exponential backoff + jitter & AppState/NetInfo-driven reconnects
Background meditation player with lock-screen controls, Bluetooth/AirPlay handoff & serial offline download queue
Lazy-instantiated drawer stacks + freeze-on-blur tabs + root-shared MeditationPlayer modal — full cold-start pass
FlashList-backed chat with S3 presigned uploads, swipe-to-reply, typing indicators & online presence
Plan-aware drawer (Free / Seeker / Mastery) with menu items computed from token + profile state
Firebase Remote Config-driven forced/feature/notification modals with AsyncStorage seen-message dedup

Technical Breakdown

Feature areas & implementation details

Architecture & State
7 Redux slices (Authentication, Meditation, Profile, Downloads, Misc, Updates, Chat) with a redux-persist whitelist
Custom rootReducer intercepts ResetStore → restores defaults while preserving the Downloads slice on logout
12 navigation stacks: native-stack root + drawer + 5-tab bottom + 10 feature stacks; root-modal MeditationPlayer shared across all sub-stacks
Late-binding bindApiClientStore() pattern breaks the apiClient → store → slices → apiClient circular import
TypeScript across all slices, hooks, and new components with a fully typed RootStackParamList
Audio Engine & Downloads
react-native-track-player with PlaybackService handling Remote Play/Pause/Next/Previous/Seek/Duck events
Cross-tab AudioPlayerOverlay with isolated memoized ProgressFill — only the pixel bar re-renders at the 4Hz tick
AudioContext uses positionRef / currentTrackRef so progress-tick handlers don't cascade re-subscribes
FIFO download queue (rn-fetch-blob) with serial processing, per-user filesystem layout & cross-tab progress banner
Pending playback analytics buffered in AsyncStorage when offline and flushed on next foreground (survives force-quit)
Real-Time Chat
Single hoisted WebSocket provider with 25s heartbeat ping + 10s pong timeout for dead-connection detection
Exponential backoff reconnect (1s → 30s cap, 30% jitter) with AppState + NetInfo-driven recovery
Pub-sub model (subscribeToMessages / subscribeToConnection) so consumers register callbacks instead of forcing re-renders
ChatScreen refactored into useChatMessages / useChatAudio / useChatAudioUpload hooks over @shopify/flash-list
S3 presigned-URL audio uploads, swipe-to-reply, 500-message cap for memory bounds, online presence & typing debounce
Feature Modules
Soul Oracle Progression Reading: tarot card-flip animations + Merkersha cards + audio result screens
Soul Lab quiz engine: paginated subquestions with skeleton loading and aggregated answer submission
Soul Journal: mood-filtered entries with date-range filtering and full create/edit/delete flow
Weekly Homework: multi-week curriculum with audio-response submissions and certificate downloads
Mantra Messages, Mini Reading, Wallpapers, E-Magazine PDF viewer & Special Date calendar with moon-phase widget
Performance & Resilience
Lazy navigation: every drawer stack uses getComponent + require() — only Home BottomTabs is in memory at cold start
Bottom tabs use lazy + freezeOnBlur + detachInactiveScreens; paginated lists capped via a generic capList<T> helper
Narrow Redux selectors (e.g. state.Profile?.profile?.username) so screens only re-render when the specific scalar changes
Centralized Axios client with interceptor-driven 401 auto-logout, server-message toast surfacing & network-aware fallbacks
ErrorBoundary, Crashlytics, WebSocket recovery, download-queue cleanup finalizers & babel-plugin-transform-remove-console in production

Related Writeups

Technical posts drawn from this project's real challenges

8 min read

Boosting React Native Performance: New Architectures Deep Dive

How enabling the New React Native Architecture improved Soul33's runtime performance by 40% — a real migration story covering JSI, Fabric, TurboModules, and the 40+ library audit I did before touching a single line.

6 min read

Building Real-Time Chat with WebSocket in React Native

Lessons from building a production WebSocket group chat supporting 200+ concurrent sessions — covering connection lifecycle, offline queuing, message deduplication, swipe-to-reply, and audio messages.

7 min read

Implementing Sign In with Apple in React Native (iOS + Android)

A complete walkthrough of integrating Sign In with Apple using @invertase/react-native-apple-authentication — covering Xcode capability setup, Android workaround via JWT, private email relay, credential state handling, and App Store compliance gotchas.

8 min read

Google Sign In with React Native — The Complete Guide

Everything you need to implement Google Sign In using @react-native-google-signin/google-signin — from SHA-1 fingerprint setup and OAuth client IDs, to silent sign-in, token refresh, Play Integrity, and the iOS URL scheme trap that breaks half of all setups.

9 min read

Deploying a React Native App to the App Store — Full Xcode Walkthrough

A step-by-step production deployment guide for iOS — covering Apple Developer account setup, certificates, provisioning profiles, Xcode archive, TestFlight distribution, App Store Connect metadata, and the review gotchas that cause most first-time rejections.

9 min read

Deploying a React Native App to Google Play — Android Studio & Play Console Guide

The complete production deployment guide for Android — covering keystore generation, Gradle signing config, AAB builds in Android Studio, Play Console setup, internal/closed/open tracks, Play App Signing, and avoiding the policy violations that get new apps suspended.

Other Projects

View All →
Arkmantra
Ayurvedic Cosmetics E-Commerce Storefront & Admin

A highly hardened, full-featured D2C storefront and admin control panel designed...

Yoke Yoga
Social Wellness, Live Yoga & Learning Platform

Production yoga social platform — TikTok-style Reels, ZEGOCLOUD live streaming +...

Barva Skin Therapie
Ayurveda E-commerce & AR Beauty App

Full-featured Ayurveda beauty e-commerce app with Shopify API, AR lipstick try-o...