Case Study: Learning Management System
This case study details the re-engineering of a legacy Learning Management System, which I was lead developer and project manager for while working at Under One Cloud.
Project Brief
When UOC took over maintenance of Maguire Training's LMS, it was an ASP.NET Web Forms application running a proprietary data framework. The application was functional, but the design and performance were lacking compared to other competitor products in the LMS ecosystem, and from a maintenance and feature development perspective the custom framework was largely undocumented.
Together, Maguire Training and UOC planned to renew the LMS using a full stack approach, improving the back-end performance and the front-end user interface for both administration and customer accounts. I was the lead on the project working alongside another colleague, and served as primary point of contact with the client.
Tech Choices
We elected to base the new LMS platform around Next.js. As a two person team, keeping the codebase lean was key, and being able to write front- and back-end code in a single language (TypeScript) without needing to context switch improved our developer velocity.
The legacy LMS relied on MySQL 5.7 for its database needs. We elected to move the new application to MariaDB. This would give us the benefit of improved performance and more modern database features, and also allow us to migrate existing data structures over if needed.
The final major library leveraged in the project was Prisma, selected for both its ORM library and its mature database migration toolset.
User Interface
We built a component library using CSS Modules. These let us write CSS for different components and pages within the system with the added benefit of automatic locally scoped class names. Again, a choice driven by pragmatism given our small development team: this allowed us to avoid accidentally stepping on each other's namespaces.
A key element of the new interface was that it could be customised from the admin side to provide different branded themes for different customers. We achieved this through designing multiple palettes using CSS Custom Properties which were applied to elements using data attributes. These could be controlled from the server when the pages were rendered.
Performance
The new tech stack enabled us to use development patterns which improved performance across the board. An example of this is in the report generation section of the administration dashboard. The legacy report system gave no feedback to the user as to report generation progress, and caused performance issues for other users of the site due to excessive server resource utilisation. Generation of some reports took upwards of 30 minutes.
In contrast, the reengineered LMS is performant enough to run each report within a minute at most, and the results can be requested in either CSV or PDF format. For larger, more computationally complex reports, using a React-based framework let us provide more informative user interfaces with real-time progress bars. We were also able to move tasks like PDF generation to the client side, reducing computational load on the server and therefore impact on overall site performance.
Outcomes
The LMS has now been active for over a year. User count has increased, with multiple branded sites being created for Maguire's customers during that timeframe. Maguire contracted UOC for continued development of new features on the system after launch, and together we have improved the experience for both Maguire's employees and their customers.