Context & Problem
An education academy selling structured course programs needed a mobile app for its students. Enrollment had to be gated behind verified identities — a phone-verified student, not just an email signup — and the paid course material the academy's business depended on needed at least baseline protection from being trivially captured and reshared. The client needed both platforms covered by a small team on a short timeline.
Students needed one app to enroll, browse their program's courses, study course details, and ask questions when stuck. The academy needed the opposite guarantees: that an account maps to a real, phone-verified person, and that paid content is not casually screenshotted and redistributed. That put most of the product's complexity into the entry flow — a staged onboarding covering email, phone, OTP verification, registration, and program selection, each with its own failure states — and into platform-level content protection, which iOS and Android support very differently.
Design Constraints
- platformOne React Native codebase had to ship both the iOS and Android apps.
- compliancePaid course content required protection from casual capture — screenshot blocking was a client requirement, not an optimization.
- platformIdentity had to be phone-verified via OTP, adding an SMS dependency and country-code handling to onboarding.
Architecture Overview
Built a single React Native + TypeScript codebase for iOS and Android. Onboarding is a staged navigation flow — email entry, phone number with a country-code picker, OTP entry and verification, registration, then program selection — backed by JWT sessions with on-device token management. App state lives in Redux Toolkit, split into Authentication and Course feature slices with typed hooks. The API layer is an Axios client with a central endpoint registry and environment-based configuration, so no backend URL is hardcoded. Course content screens are protected on Android with a native secure-window flag that blocks screenshots and screen recording. UI is built on the React Native Elements kit with a custom theme layer, plus a native bootsplash for startup.
Key Engineering Decisions
Outcomes & Lessons Learned
Platforms
One React Native + TypeScript codebase shipping both platforms
Verified Onboarding
Staged enrollment flow with OTP phone verification and JWT sessions
Content Protection
Native screenshot and screen-recording block guarding paid course content on Android
Retrospective
- Verified onboarding dominates a gated app's surface area: nine of the fifteen screens were the authentication flow, and OTP verification multiplied the failure states — SMS delivery, resend, expiry, country-code edge cases — far beyond what a simple signup would have cost. Budget for the entry flow as a feature, not a formality.
- "Block screenshots" sounds like one requirement but is two platforms' realities: Android supports a hard OS-level block, iOS does not. The honest deliverable was per-platform — a real block on Android, and accepting that iOS content protection of this kind cannot be promised.