A video learning app where people watch courses, track their progress and earn certificates. I built its web app in React and its mobile app in React Native, and worked on sign-in and permissions on the backend.
01
A video learning platform that feels fast: a feed that scales to a big catalogue, a watch page that holds attention, and a secure account flow, without the layout breaking on a phone.
02
Both front ends from the client's designs: the web app in React and the mobile app in React Native. On the backend, I worked on authentication and authorization with the team.
03
About 11 screens shipped across web and mobile, all true to the designs, with sign-in and access control that hold up.
Counted from the build
Each highlight says what it does for the people learning, and how it works underneath.
01
Open the app and the courses you started are right at the top, each with how far you've got. Your overall progress, finished courses and certificates sit beside them.
For learners
No hunting for where you left off. Tap and keep going.
Under the hood
React Query caches the feed and refetches it in the background, so the home screen opens instantly.
02
Browse every course by category, with the teacher, price and rating on each card. On the phone, Explore puts search and category chips at your thumb.
For learners
Find a course by topic in a couple of taps.
Under the hood
Infinite scroll with React Query, so long lists load as you go instead of all at once.
03
The watch page pairs the player with everything around it: the teacher to follow, comments, resources, and an Up Next rail that autoplays the next lesson.
For learners
One lesson leads straight into the next.
Under the hood
A custom watch page: the player and the recommendations rail stay side by side on desktop and stack on mobile.
04
On the web, a split screen with the sign-in form beside the brand. On the phone, the same flow in one column. People can use email and a password, or Google.
For learners
Sign in with Google in one tap, no new password to remember.
Under the hood
Google Sign-In on both apps, with the session token kept in secure storage on the phone. On the backend, I worked on the sign-in itself.
05
Signing up sends a 6-digit code to check the email is real, and a forgotten password can be reset the same way. Four steps in all: sign up, verify, log in and reset. Behind them, each account only reaches what it's allowed to.
For learners
Your account is really yours, and easy to get back into.
Under the hood
My part of the backend: token checks and permissions. In the apps, Axios attaches the token to every request.
Varplat isn't public, so these screens are rebuilt from the client's design board. Course names, teachers and numbers are the design's sample content.
I built the two apps people use, from the client's designs. The web app is React; the mobile app is React Native with Expo, with managed builds and over-the-air updates. NativeWind brings Tailwind's styling into React Native, so both apps share one look, and React Query keeps their data cached and fresh.
Behind them is a Node and Express API built with the backend team. My part there was authentication and authorization: signing people in, issuing and checking their tokens, and making sure each account only reaches what it's allowed to.
A learner signs in
Email or Google Sign-In, token in secure storage
Their feed opens instantly
React Query cache, background refetch
The server checks who they are
Token checks and permissions, my part of the backend
Lessons play, one after another
Watch page with an Up Next rail, on web and mobile
Varplat shipped on the web and on the phone: the feed, the player and the full account flow, built faithfully from the client's designs, with sign-in and permissions I helped build on the backend.
