Building a Learning Management System (LMS) and a Mobile App: My Capstone Project Experience
In my final two semesters of Computer Engineering Technology/Computing Science, I led a team project to build an app for OttawaU's Italian Studies Department. We initially built a mobile app using React Native, but soon realized we needed a Learning Management System (LMS) web app to make it complete. The web platform became essential for letting administrators easily upload course materials, especially since one of our most exciting features was a custom interactive video player.
This was my capstone project, and it turned into an incredible learning experience that went far beyond just coding.
As team lead, I got to shape both the mobile app and LMS from the ground up, working closely with the client to understand their needs and deliver a comprehensive solution.
The Vision Behind the App
We set out to create a mobile platform where instructors could easily manage their courses - uploading materials, sharing lectures, and enrolling students. The complementary LMS would serve as the backbone, providing robust tools for course management. While we built it specifically for OttawaU's Italian Studies Department, we designed the system to be flexible enough for broader applications down the line. Throughout development, we carefully considered everything from user roles to content organization to ensure the system could grow with future needs.
Working closely with my development team, I focused on making both platforms intuitive and scalable. It wasn't just about writing efficient code - we wanted to create something that would feel natural and easy to use for everyone involved.
Key Features of the LMS
We built the LMS around core features that modern learning environments need, prioritizing engagement, flexibility, and user-friendliness across the board.
Custom Video Player
The custom video player was our greatest and most challenging feat for this project. Essentially, the lecturers wanted to upload lecture videos, and at chosen timestamps, pause the video and add pop-up multiple choice questions and dismissible notes.
This was a feature recommended by the client's students, and although difficult, it was a feature that we wanted to spend the most time on to ensure it's implemented well.
We put together a prototype pretty easily using React, and it worked very well as a web-based custom video player. But, adding it to the mobile app was much more challenging. Open-source video player support in React Native is lacking, so we were forced to build our own.
We started with a barebones video player package and built it completely from the ground up, including basic features like pausing, rewinding, a custom full-screen, etc.
The end result: Admins can upload videos in the web app, and add timestamped content. When playing the videos in the mobile app, questions and content pop up and specified timestamps, and the videos become much more interactive.
Admin User Management
User management sits at the heart of our LMS. We gave administrators comprehensive control over their digital classroom, including:
- Full visibility and editing capabilities for user accounts
- Simple tools for assigning courses to specific users
- Streamlined approval process for course access requests
Students can request to join courses through the mobile app, and administrators can quickly review and respond to these requests right from the web interface. This makes managing course access both secure and hassle-free.
Course Management and Structure
We designed course creation and management to be both powerful and approachable. Administrators can easily set up new courses, assign course codes, and organize content. One feature I'm particularly proud of is our dynamic content creation form - it automatically adapts based on whether you're uploading text, videos, or quizzes. This dynamic behaviour was easy thanks to React.
This intuitive approach takes the technical complexity out of content creation. Courses follow a logical structure that naturally organizes lessons in sequence, making the mobile app experience smooth and coherent for students.
The Code
I've decided to make the LMS web app code publicly available as a portfolio piece, after removing sensitive information and making some refinements. Since the client owns the original code, I have rafactored it enough to make it a completely separate web application. However, I want to be clear about its scope and limitations.
This codebase was built specifically to support one mobile application and isn't intended for production use. While you're welcome to explore the code and perhaps learn from it, I strongly recommend using established open-source LMS solutions if you're looking to implement a learning management system. These alternatives will offer more robust features, better security, and broader compatibility.
As for the companion mobile app, it remains under active development, and its code will stay private.