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 web-based Learning Management System (LMS) to make it complete. The web platform became essential for letting administrators easily upload course materials, especially since our top feature 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.
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 LMS would serve as the administrator’s dashboard, providing all 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. Before development even began, we considered everything from user roles to content organization to ensure the system could grow with future needs.
While designing the platform, I focused on making both platforms intuitive and scalable. I knew that once I graduated, I would need these skills in my first post-graduation role, so I focused heavily on UI/UX best practices, comparing backend options, and of course, documenting all features that the client considered must-haves and creating a prioritized product backlog.
Key Features of the App
We iteratively built the app and LMS by first prioritizing our client’s must-have features, and then core features that modern learning environments need. This meant prioritizing engagement, flexibility, and user-friendliness across the board. Basically, something that students would enjoy using; we ddin’t want the students to think “my professor is forcing me to use this”.
Custom Video Player
The custom video player was our most important, but 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 inspired by Edpuzzle.
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, at least ones with the flexibility we needed, 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 dynamic 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 was another core feature of our LMS. Course administrators should have full control to ensure only their current students have access to active courses. 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
- Easy 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 refactored 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.