E-Learning App
A React Native e-learning app built around a personalised student dashboard: progress tracking, attendance, exam results, upcoming classes, a video library, question bank and live lectures. Designed to make a student's own progress the first thing they see when they open the app.
92%
Attendance visibility
Sample student attendance surfaced directly on the dashboard.
Real time
Progress tracking
Course completion syncs across devices via Firebase.
4
Learning pathways
Tests, video library, study material and question bank.
Project overview
Most e-learning apps fail on retention rather than content. Students download them, watch two videos, and stop — because the app is organised around the institution's course catalogue rather than around the student's own progress. The brief here was explicitly about engagement: the client had good course material and poor completion rates. We designed the app so that the first screen answers "how am I doing and what is next", and the catalogue is something you navigate to, not something you land in.
The problem
Course material existed but students were not completing it. There was no single place a student could see progress, attendance, recent results and the next scheduled class, and no feedback loop that made continued study feel worthwhile.
How we built it
Our approach on this project
- 1
Dashboard-first information design
The home screen surfaces study progress, last exam result, attendance percentage and the next scheduled class before any course listing. Progress is the interface; the catalogue is secondary.
- 2
Learning pathways rather than a flat library
Content was grouped into pathways — online test, video library, study material, question bank — so a student always has an obvious next action instead of an undifferentiated content wall.
- 3
Real-time synchronisation
Firebase keeps progress, attendance and results consistent across devices in real time, so a student who switches from phone to tablet does not lose their place or see stale marks.
- 4
Gamification and feedback
Completion indicators, streak-style progress cues and achievement notifications were added to close the feedback loop — the mechanism that turns a first session into a habit.
- 5
Modular content structure
Subjects, chapters and assessments were modelled as composable units so the client can add new courses without engineering work.
Engineering detail
Challenges we hit, and how we solved them
!Challenges
- Creating intuitive student dashboard
- Real-time progress synchronization
- Organizing educational content
- Engagement and motivation features
✓Solutions
- Designed clean and motivating UI
- Implemented Firebase for real-time updates
- Created modular content structure
- Added gamification elements
Technologies
Tech stack used
Features
Key features implemented
Personalized dashboard for students
Study progress tracking (60% completion)
Last exam results display (A+ in Maths)
Attendance monitoring (92%)
Next class notifications (Chemistry - Organic Compounds)
Key learning pathways (Online Test, Video Library, Study Material)
Live lectures access
Question bank and syllabus
What the client received
iOS and Android apps with a personalised student dashboard
Progress, attendance and results tracking synced in real time
Video library and downloadable study material modules
Online test engine and question bank
Live lecture access with class scheduling and notifications
Admin tooling for publishing courses and assessments
Results
High student engagement rates
Improved learning outcomes
Positive teacher and student feedback
Featured in education app categories
Services used
The capabilities behind this project
Need something similar? These are the services this build drew on.
Questions about this project
Can the app work offline?
Downloaded study material and video content can be made available offline, with progress queued locally and synced when connectivity returns. This matters for students on intermittent mobile data and is worth scoping in from the start rather than retrofitting.
How do live lectures work inside the app?
Live sessions are scheduled by the institution and surface as dashboard notifications with a join action. The streaming itself integrates with a third-party provider so the app is not carrying video infrastructure it does not need to own.
Can we add AI tutoring or automated doubt solving later?
Yes. The modular content structure was designed to allow it — the natural first step is an AI assistant scoped to the institution's own question bank and study material, which is work we do under agentic AI solutions.
More work