People study on trains, in waiting rooms and during commutes, which are precisely the places a connection is least dependable. The client's learners could reach the platform on a phone browser but could not rely on it, so studying required planning around connectivity. ELIVTECH built a React Native app where lessons download for offline use, assessments complete without a connection, and progress reconciles correctly against the same backend the web platform reads.
The client delivers professional education through a web platform that assumed a desk and a stable connection. A growing share of study time happened on phones during commutes and short intervals, where the responsive site was usable but not dependable: video stalled, a lost connection during an assessment discarded the attempt, and nothing could be prepared in advance. ELIVTECH delivered a React Native learner app sharing the existing Laravel LMS backend through a versioned API, with lesson downloads for offline study, assessments that complete and queue locally, progress that merges predictably when a learner uses more than one device, and study reminders built around genuine continuity rather than notification volume.
At a glance
The challenge
Study happens in the gaps of a day, and the platform only worked in the settled parts of one.
Nothing available without a connection
Every lesson streamed on demand. A learner on an underground commute or in a building with poor coverage could not study at all, and because nothing could be prepared in advance, the time most people had genuinely free was the time the platform could not serve.
Assessment attempts lost mid-question
Assessments submitted answers at the end of an attempt. A connection dropping part-way discarded the work, and because attempts were limited, a learner could lose one to a network failure rather than to their own performance. That risk discouraged attempting assessments away from a desk at all.
Progress disagreeing across devices
A learner watching a lesson on a phone and continuing on a laptop found the two disagreed about position. Last write won, so the more recent session could move a learner backwards, and nobody could tell whether the platform or their memory was wrong.
An interface designed for a larger screen
The responsive site reflowed desktop layouts rather than being designed for a phone. Controls were small, navigation required precision, and returning to the exact lesson took several taps, which is enough friction to end a study session that only had a few minutes in it.
No mechanism to sustain a habit
Learning that happens in short intervals depends on returning consistently. The platform had no way to remind a learner or to reflect continuity back to them, so people who missed a few days often did not return, and nothing in the product noticed.
Video that ignored device conditions
Playback used one quality regardless of connection or battery state. On a constrained mobile connection it buffered instead of degrading, and sustained playback drained batteries quickly enough that learners rationed how much they watched away from a charger.
Our solution
Make offline the normal case, and define exactly how two devices reconcile before writing any sync code.
Study Pattern Research and Sync Design
Three weeks understanding when and where learners actually study, which established that most sessions are short, mobile and interrupted. Alongside it, the reconciliation rules were designed explicitly: furthest progress wins rather than most recent, completion is never reversed by a later partial view, and an offline assessment attempt is authoritative for the moment it was taken.
React Native App with Offline Lesson Downloads
Learners download individual lessons or a whole module for offline study, with encrypted local storage, quality selection at download time and clear visibility of what is stored and what it occupies. Playback, notes and progress all work identically online and offline, so the learner never has to think about which mode they are in. Downloads resume after an interrupted transfer rather than restarting, which matters when a module is prepared on a connection that is itself unreliable.
Offline Assessments and Deterministic Merge
Assessment attempts persist answer by answer to local storage as the learner works, so an interruption at any point loses nothing. Completed attempts queue with a client-generated identifier treated as an idempotency key on the Laravel API, and progress merges by the declared rules rather than by arrival order, so no sync can move a learner backwards. Where an offline attempt arrives after the assessment has been closed by a deadline, it is accepted with its original timestamp and flagged for the instructor rather than silently rejected.
Mobile Learning Experience and Continuity
The interface opens on the next thing to do rather than a catalogue, so resuming takes one tap. Video adapts to connection quality and respects battery state, playback is accessible with captions and keyboard support, and streak-based reminders are timed from a learner's own study pattern rather than sent on a fixed schedule, and reduce in frequency when they are consistently ignored so the app does not become something a learner mutes.
Technology stack
Results
Measured once the app was serving learners alongside the existing web platform.
Before and after: platform engineering measures
- Every lesson streamed on demand with nothing available offline
- Study impossible during commutes and in poor coverage
- Assessment answers submitted only at the end of an attempt
- A dropped connection discarded a limited attempt
- Progress reconciled by last write, able to move a learner backwards
- Desktop layouts reflowed onto a phone screen
- Video quality fixed regardless of connection or battery
- Lessons and modules downloadable for offline study
- Playback, notes and progress identical online and offline
- Assessment answers persisted locally as the learner works
- Attempts queued with idempotent submission on reconnect
- Progress merged by declared rules, furthest position wins
- Interface opening on the next lesson, one tap to resume
- Adaptive video respecting connection quality and battery state
Project timeline
Study Pattern Research and Sync Design
Learner interviews and session analysis across devices, offline capability scoping, explicit reconciliation rule definition for progress and attempts, and the API contract against the existing LMS backend.
Offline Foundation and API Layer
Versioned Laravel API over the existing platform, encrypted on-device storage, download manager with quality selection and storage visibility, client-generated identifiers with idempotent endpoints, and the deployment pipeline.
Learning and Assessment Experience
React Native lesson player with adaptive streaming and accurate resumption, offline note taking, answer-by-answer assessment persistence, attempt queueing and replay, and deterministic progress merge implementation.
Continuity, Search and Accessibility
Resume-first home surface, streak tracking and reminders timed from individual study patterns, Elasticsearch course and topic search, captions and keyboard support in the player, and contrast and target-size remediation.
Testing and Staged Release
Automated tests across the sync conflict matrix, scripted connectivity-loss scenarios during assessments, battery and storage profiling across a device range, a learner beta, then a staged release alongside the web platform.
Key takeaways
What shaped the engineering decisions
- Declare the merge rules before writing sync: Last-write-wins is the default that quietly moves learners backwards. Deciding that furthest progress wins and completion is never reversed made reconciliation reviewable rather than emergent.
- Persist assessment answers continuously: Submitting at the end of an attempt was rejected because it makes a network failure cost a limited attempt. Writing each answer locally as it is given means an interruption costs nothing.
- Treat offline as the normal case: Building online-first with a degraded offline mode was rejected because it produces two behaviours the learner has to understand. Making local storage the primary path meant one behaviour everywhere.
- Idempotency keys make replay safe: A queued attempt may be submitted more than once across an unreliable connection. A client-generated identifier treated as an idempotency key means a replay is recognised rather than recorded as a second attempt.
- Open on the work, not the catalogue: A short study session cannot afford navigation. Making the home surface resume the next lesson in one tap removed the friction that was ending sessions before they started.
- Respect the device, not only the network: Battery and storage were profiled across a representative device range, because an app that drains a phone or fills its storage gets uninstalled regardless of how good the learning content is.
Want results like these?
Let's discuss how ELIVTECH can drive measurable outcomes for your business.
Start your project