Finished study, code-along and small mods of Interesting React Native and Expo Education tutorial app by Simon Grimm

The tutorial video: Simon Grimm: Build Your Own MASTERCLASS clone in React Native, https://www.youtube.com/watch?v=fO3D8lNs10c , 4 hrs. 42 mins, Mar. 2025.

Tutorial App code on GitHub . The Readme of the repo has a Demo section with animated demos of the mobile app, followed by mobile app screenshots and web app screenshots. That's followed by Strapi screenshots showing how the course content is organized and specified at the Strapi backend using Strapi admin panel.

I could not find a live web app deployment link, nor any Android/iOS mobile app download link. So the README visuals seem to be the primary way of showcasing the app’s UX and features.

Features

This tutorial app teaches how to develop a small LMS app which:
  • Allows easy creation of course overviews and lessons (with images and rich text) using the Strapi admin panel
  • Supports associating a video with each lesson
  • Implements Google and Apple SSO authentication using Clerk
  • Hides course content from unauthenticated users
  • Renders course overview and lessons along with a video player on mobile and web
  • Supports multiple courses, each with multiple lessons
  • Allows courses to be free or premium
  • Uses RevenueCat for in-app purchases of premium courses
  • Tracks user progress through a course
  • Includes attractive UI elements such as animations and parallax effects
  • Lets users access the app interchangeably from mobile and web
The tutorial app is a Yoga courses app with two courses - one free and one premium. The course overview pages have images and rich text content. But the course lesson pages are essentially placeholder pages with only one sentence and one video. The same short cartoon video clip is used for all lessons in both courses. 

But it seems that incorporating images and rich text content for all lessons would be a straightforward task using Strapi admin panel. Similarly, if separate lesson videos are available, linking them to appropriate lessons would be a straightforward task using Strapi admin panel.

Unfortunately, the code is not shared with an open-source license, which limits its use beyond learning. Had it been released as open source and freeware, I think it could be used for many small education apps, with only content changes needed via the Strapi admin panel, and the app code - both frontend and backend API - being the same. It might also be usable for non-education apps that follow a similar two-level structure to course → lessons, such as therapy program → exercises (covering physiotherapy, occupational therapy, speech therapy, rehabilitation programs, etc.), but small modifications to the app code will be needed. See footnotes for more details about therapy program → exercises possibilities.

Study and Code-Along

In the video, the author develops and demos the LMS  (Learning Management System) app for iOS and web. However, he does not demonstrate it on Android. I did my code-along for Android and web, and I encountered several issues on Android that required fixes. I also made a few small improvements to the web app.

Since the original repos do not include a license file, I felt it inappropriate to make the GitHub repos with my modified version as public. So currently these GitHub repos are private. 

Development Version Web App Deployment

I have not created production builds of the Android app and of the web app as I felt that was not needed. I am also not sharing the development version Android APK as I am not sure if that's OK due to tutorial original code not being open source. However, the web app development version is deployed on expo.dev. 

I removed the Apple login as I don't use Apple devices. So the app currently supports Google login only.

I am using Strapi cloud free tier for hosting the API backend whose runtime behavior is 'Cold start'. This causes the first Strapi data request for both the web app and Android app to take as long as around a minute to complete. Subsequent requests don't take so long. In a production app whose API backend is hosted on paid Strapi cloud or AWS/Azure, the runtime behaviour would be 'Always on' and so even the first Strapi data request will complete quickly.

Web app (development version) on expo.dev: https://sg-eduapp-lms--excmsr0i6w.expo.app/  

About payments for premium course: 
The payment screen in the above deployed development version web app is connected to a Stripe test mode setup through RevenueCat. You will see a yellow bar at the top of the payment screen with “SANDBOX” displayed in the center, indicating that the payment screen is a test-mode screen and not a real financial transaction screen. The test cards that can be used to simulate various payment cases like success and declined are given on Stripe docs: Try it out. 

Please don't use real credit/debit card numbers. I presume that even if real credit/debit card numbers are used, as Stripe test mode is being used in the web app, real debit transactions will not happen. There is no bank account associated with this Stripe test mode.

Notes Posts

As notes for myself—and perhaps helpful to others—I have published several posts. The latest post is Notes on learning stage of developing my own React Native education app using Expo Framework - Part 6. These posts link to their previous and next posts.

================================================
================================================

Footnotes

Therapy program → exercises possibilities provided by ChatGPT:

Here are parallel “lesson-equivalent” items for each therapy type, matching the idea of course → lessons or therapy program → exercises.

These examples are standard categories and safe to mention.

✅ Physiotherapy (PT)

Therapy program → exercises

  • Knee mobility exercises

  • Shoulder strengthening exercises

  • Lower-back stability exercises

  • Neck posture correction exercises

  • Ankle balance exercises

✅ Occupational Therapy (OT)

Therapy program → functional activities

  • Fine-motor skill tasks (e.g., hand dexterity drills)

  • Daily living practice (buttoning, dressing, grooming tasks)

  • Grip-strength and hand-coordination activities

  • Sensory integration activities

  • Upper-limb functional strengthening

(Here “exercises” are usually “functional tasks”, but structurally they are the same as lessons.)

✅ Speech Therapy (SLP)

Therapy program → practice exercises

  • Articulation exercises (for specific sounds)

  • Speech fluency practice

  • Voice control exercises

  • Oral-motor strengthening tasks

  • Language comprehension drills

✅ Rehabilitation Programs (Post-surgery or Neuro Rehab)

Rehab program → rehabilitation tasks

  • Gait-training exercises

  • Balance and coordination tasks

  • Post-operative strengthening routines

  • Cognitive rehabilitation tasks

  • Range-of-motion exercises


Comments

Post a Comment