Usage and Testing of Interesting (SG) React Native Education (LMS) tutorial app (mobile and web) with public repos but not open source

This post is related to my post: Interesting React Native Education (LMS) tutorial app (mobile and web) with public repos but not open source; Possibilities of open source equivalent. The related app whose web app link and Android APK download is provided in aforementioned post is my slightly modified version of a tutorial app. This tutorial app is associated with 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.

Usage

The app needs a Google login. It uses free-tier Clerk authentication and Google SSO option in it.

After login, the first Strapi (data) request may take up to a minute due to free-tier 'Cold start' on Strapi cloud. Subsequent requests should be faster.

The app does have some relatively minor issues, but as the app is a tutorial app used on free-tier Strapi Cloud backend, I think some such issues are perhaps to be expected.

These minor issues usually get fixed by closing and reopening the Android app or refreshing the web page. The open issues I have noticed are put up in my post: Open Issues of Interesting (SG) React Native Education (LMS) tutorial app (mobile and web) with public repos but not open source.

How to use main functionality of app

In the home 'My Studio' screen, tap/click on Browse Courses button/menu.

You should be shown two course cards:

Beginner's Yoga Journey - Flow Into Balance (Free)
Elevate Your Practice - Advanced Yoga Mastery (Premium)

Tap (Android) / Click (web) on Beginner's Yoga Journey card.
You should be shown a Course details page with a 'Start Course' button. Note that sometimes the course details text is not shown. Closing and reopening (Android) / refreshing (web) app usually fixes it.
Tap/Click on 'Start Course'. It should turn into an Activity Indicator (circular loading spinner) while the app adds you as a user to the course. Note that on Android app, sometimes you need to tap two or three times before the Activity Indicator appears.
You should now be shown the Course Overview page for Beginner's course. Note that sometimes the course details text is not shown. Closing and reopening / refreshing app usually fixes it.
Tap/Click on Start Course button at bottom of screen. On web, you need to scroll down to bottom of page to see the Start Course button.
You should be shown the first lesson of Beginner's course: Introduction to Yoga. The lesson screen has:

Video player at the top
One sentence description below the video. Note that sometimes the description text is not shown. Closing and reopening / refreshing app usually fixes it.
'Complete & Next Lesson' button at the bottom

If you play the video to the end OR tap/click 'Complete & Next Lesson' button, the lesson should be marked as completed and the next lesson should be shown.

You may close the app mid-way through a course. When you reopen the app, go to the My Courses tab (Android) / page (web), instead of Browse Courses screen/page. Tap/click the Beginner’s course card. You will be taken to the last lesson you were on before you closed the app.

To go through 'Elevate Your Practice - Advanced Yoga Mastery (Premium)' course, you have to do a sandbox/dummy purchase through the web app. The purchase feature is not available on Android app. However even on mobile, you can use the web app (say, in mobile Chrome browser) to do the purchase. Later you can switch back to Android app to go through the purchased course.

The procedure to make the sandbox/dummy purchase (web app only on desktop/mobile):

Tap/click Browse Courses button/menu link -> Tap/click 'Elevate Your Practice...' course card -> Tap/click 'Purchase Course' button ->

You should be shown a payment screen. Enter following dummy data

(Dummy/Sandbox) Card: 4242 4242 4242 4242
Exp. date: 01/30 (any future date)
Sec. code: 222 (any 3 digit number)

Tap/click 'Pay Now'. You will be shown a 'Payment Complete' message. Tap/click 'Continue ' button
You should be shown course overview page for 'Elevate Your Practice...' course.
You can then go through the course following same procedure as described above for 'Beginner's...' course

More about payments for premium course:

The modified version Android app does not support in-app purchases as RevenueCat supports Android in-app payments only via Google Play Billing. I do not have a Google Play developer account as of now and so my modified version Android app does not support in-app purchases.

The modified version web app supports 'SANDBOX' in-app purchases. The payment screen in it 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.

Testing of app done on 18 Nov. 2025

[Below content is copy-pasted from my post: Notes on learning stage of developing my own React Native education app using Expo Framework - Part 6.]

Deleted my G users in Clerk dashboard

In Strapi cloud, deleted my G users, deleted all entries in User-course and Progress collections.

So now, from my G users perspective I am on a clean slate both in Clerk and Strapi. I don't think Stripe tx need to be deleted. Stripe dashboard is very, very slow.

Android release APK app test

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

As dG user on Android (release) app on phone:

Done. Bottom tabs showed correctly. User got added to Clerk (35eW...)
Loading message took its time to go away but now I have a black screen with bottom tabs
Closed and reopened app. Now home screen image and text showed correctly.
But user did not get added to Strapi User collection!

Start Beginner's course

Was still able to start the course. Beginner's course with ClerkId 35eW user got added to user-course

Do few lessons

Did 2 lessons, Progress entries got added with ClerkId correctly

Sign out and close app

Done

open app again and login as dG

Did it. Loading message was shown correctly. Bottom tabs show correctly.
My Courses correctly shows 20% progress (2 lessons out of 10 or so) in Beginner's course
Browse Courses -> Beginner's course -> Shows screen with Continue Course button which correctly took me to Overview screen for course
Drawer shows tick against 2 completed lessons correctly.
Elevate Course correctly shows as purchase not available for Android

I think once it did not show the description text. I did not catch that correctly. Later it is showing.

Closed app without signing out

Now on mobile Chrome, went to https://sg-eduapp-lms.expo.app/

Logged in as dG user
Web app shows correct data
In Browse Courses -> Elevate Your Practice -> Purchase Course ->

Payment screen ->(Dummy/Sandbox) Card: 4242 4242 4242 4242, Exp. date: 01/30, Sec. code: 222 -> Pay Now -> Payment Complete message -> Continue ->
Course Overview page for Elevate course is shown
So with mobile Chrome I was able to make Dummy payment and start Elevate course.

Profile -> Sign out

Shown Login screen

Closed browser tab.

Now opened Android app (on mobile)

It remembered dG login and took me to home screen (without having to login again)
My Courses -> Showed both Beginner's Course and (premium) Elevate course
Tapped Elevate Course -> Was shown Course Overview page of Elevate Course

-> Start Course button -> Was shown first lesson of "Refining Your Breath"
Tapped Complete & Next Lesson -> Was shown second lesson of "Inversions & Headstands"
Drawer shows tick mark against first lesson of "Refining Your Breath"
Went back to My Content (link at bottom of Drawer) (Should the link be My Courses?)

Shown 20% progress for Elevate course correctly (1 lesson completed out of 5).
Bottom tabs were being shown correctly throughout these tests of Android app
Short Loading message was also shown correctly at times when the inner screens were taking time to get loaded.
Profile -> Sign out
Was shown login screen.

The Android app has passed the above main functionality tests. It failed to add user to Strapi backend (perhaps due to poor network connectivity issues). I think the black screen (in dark mode) display mentioned for this test must be due to some failure condition which is not caught properly by the app and so no message is shown to user. But on restarting the app, it worked fine even without that user in Strapi user collection. That's probably because the code for the main functionality is ClerkId based which is supplied by Clerk auth on successful login of user.

Web app test on desktop PC

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

As regular G user (different from dG user used above on mobile), on web app on desktop Chrome browser, https://sg-eduapp-lms.expo.app/ :

Done. User got added to Clerk (35ed...)
Loading message was shown briefly after which home screen image and text showed correctly.
User got added to Strapi User collection

Start Beginner's course

Was able to start the course. Beginner's course with ClerkId 35ed user got added to user-course

Do few lessons

Did 3 lessons, Progress entries got added with ClerkId correctly

Sign out and close tab

Done

open app again and login as same user

Did it. IFIRC, loading message was shown very briefly and correctly.
My Courses correctly shows 30% progress (3 lessons out of 10 or so) in Beginner's course
Browse Courses -> Beginner's course -> Shows screen with Continue Course button which correctly took me to Overview screen for course
Drawer shows tick against 3 completed lessons correctly.
Elevate Course showed short (inner screen) loading message for long (Seems like a bug in web app).

I refreshed the page (https://sg-eduapp-lms.expo.app/course/advanced-yoga). Loading message showed briefly and then image, text and purchase button showed correctly (as purchase is available from web app)

Purchase Course ->

Payment screen -> (Dummy/Sandbox) Card: 4242 4242 4242 4242, Exp. date: 01/30, Sec. code: 222 ->Pay Now -> Payment Complete message -> Continue ->
Course Overview page for Elevate course is shown

On Elevate course overview -> Start Course button (bottom of page; has to be scrolled down vertically) -> Was shown first lesson of "Refining Your Breath" (The active lesson is highlighted in left hand side drawer if the web window is wide enough)

Played video fully for this first lesson -> Was shown second lesson of "Inversions & Headstands"
Clicked 'Complete & Next Lesson' button -> Was shown third lesson of "Deep Hip Openers"
Drawer shows tick mark against first and second lesson correctly.
Went back to My Content (link at bottom of Drawer)

Shown 40% progress for Elevate course correctly (2 lessons completed out of 5).
Top Menu bar was being shown correctly throughout these tests of web app
Short Loading message was also shown correctly at times when the inner screens were taking time to get loaded.
Profile -> Sign out
Was shown login screen.

Progress and User-course collections in Strapi cloud had data as expected reflecting users who started the two courses and which lessons they completed.

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

Search This Blog

Ravi S. Iyer: Software Development