Developing an LMS (Learning Management System) — Planning

Photo by Dmitry Ratushny on Unsplash

I will start off by saying that I have spent close to 100 hours on this specific topic, trying to decide the best route to build out a moderately simplistic LMS. My former employer used a WordPress Site combined with a moderately complex LMS called LifterLMS (https://lifterlms.com/) and finally was slotted in to work with WooCommerce.

The development of that site took roughly 3 months to build, and about 2 months of planning, and exploration to try and find the best fit. For my project, I decided that I wanted to address the same kind of issues as my former employer, while also moving away from WordPress & WooCommerce into a customer E-commerce solution or a node-based solution. As far as the CMS, or Content Management System I looked at either building out an application that used a Rich Text Editor and submitted in JSON, or simply lock into a headless CMS solution, essentially diving into JAMStack.

Now that that is all put out there, what are the issues that I wanted to address, in order of importance.

Issue #1 — Client Experience

There are issues pertaining to both UI/UX & the speed at which the WordPress solution loaded, and responded.

Here is a lighthouse score for mobile:

Lighthouse Score — Mobile

And again for desktop:

Lighthouse Score — Desktop

Now the issues that this scoring showed were the same issues that doing manual testing that I had found, with the addition SEO being poorer than anticipated. Now, this is past my time working on this application, so some practices that I had in regards to SEO and Accessibility are likely different as there is no person who has developer experience on staff at this point.

Performance was the number one issue that plagued this site, and was the one that was complained about daily. But after doing what I could without trying to dive into PHP and attempting to optimize things there it was still an issue. I do not know PHP so it was a bit of a sacrifice that I was willing to make to ensure the stability of the site, and to minimize downtime as I explored, and attempted to learn PHP on the fly, and budget did not allow for a WordPress developer.

UI/UX were general issues with both mobile and desktop pertaining to the course catalog, the order page for the e-commerce solution, and the lessons and quizzes themselves.

The lessons were a bit odd with the design (Both to create, and use!). So I wanted when I built my solution to ensure that I was going to be able to have a clean dashboard, or CMS styled content editor to ensure fast, and user-friendly course creation, while also ensuring that the customer or student-facing side of the equation was addressed. I wanted to ensure that there was a super clean, super minimal BUT feature-rich mindset applied to both sides of that coin.

The quizzes were just as frustrating on both the administration and consumer side. On the admin side you had to create a question, then add an answer line by line with no way to import a batch of questions, or a batch of answers for multiple choice. You would have to bounce between the course builder and the WP page builder to build out the courses, with no way to embed PDFs, nor a good way to organize links and videos. Keep in mind that this site was developed in 2018. There have been a ton of changes to WP since then.

Issue 2 — Making Admin Dash User Friendly

While I was administering this page every day it was simple for me to deal with, but when you bring someone in who is not able to understand what all of the different buttons on a WP dash did, and were there for you quickly find, and create issues that did not need to happen. For a small business, this is expected because their function lies elsewhere, and the site is expected to exist, and operate as intended.

Additionally, there are aspects of information that are isolated away from the primary dashboard that required searching to find critical functions such as the ability to generate a coupon for a course, enrolling a student in a course, checking the status of specific students, and being able to create an inventory or modifying inventory on the e-commerce side. Tracking the highest selling items, and other similar functions.

Streamlining the user experience on both the public and private side is a critical component. Minimalist but powerful will be the mindset going into the creation of this application.

NOTE: This will be starting as a Content Management and LMS solution first, and then the e-commerce side of things will be added after the fact. Including the ability through stripe to have subscriptions.

Additionally, my previous employer would have to email a copy of a certificate of completion to the student. In our solution, we will be adding the ability to upload a certificate to that user's account so that they can download that certificate, and print it in PDF form whenever needed. Eventually, a PDF filling function will be added to ensure that the only portion of work that the administrator has to do is download a pre-filled PDF for that user and then upload that to their dash, but there will, down the road, be an ability to auto-generate a certificate of completion without any work on the administrator's side. This will be critical for non-state mandated educators who are simply showing completion.

Issue 3 — Rapid Course Creation

The idea that I can build an entire course by dragging and dropping components into a rich text editor instead of bouncing between multiple screens is huge. As I develop this application out I will be trying to ensure that I can almost copy and paste a word document, or an HTML document and have the formatting stick and be able to simply move on to the next section.

As you can tell speed and efficiency is a theme throughout this planning of this application. The idea that both the administrator, and student/consumer's time is valuable is a critical metric that I want to not only hit, but exceed. I want to limit time spent on the site to a bare minimum to ensure that both the end-user, and administrator can focus on the important things, and not fighting with the application to get things done.

Issue 4 — Addons/Plugins & Downtime

A major issue that I had dealing with the repeatedly mentioned WordPress solution is that there were regular conflicts when updating the WP version, and the plugins that were installed on the site, which were pretty numerous, which would require upwards of a number of days by third party contractors to troubleshoot and resolve. Both myself, and the PHP/database person have had to step away from other obligations to fight with the site. This is in part due to a lack of a CI/CD pipeline, and automated testing. This can and will be resolved on the final product of a node-based application as we will be limiting library updates to once per quarter and they will be on a dev branch of the GitHub repo. Additionally, we will be building out a number of tests to ensure that the components are functioning as intended during the development of this application.

Those are the major focuses going into this project. So what libraries, frameworks, and solutions will we be putting into this project. Off the top, we will be using React or Next.js for the frontend (perhaps Gatsby), and for the backend, we will be using a headless CMS solution such as strapi, sanity, or another. At this time I am still experimenting with the CMS side of the equation, but have made a pretty clear determination that this is the best route to go since it will give an API rapidly, and will allow for the fully-featured CMS solution without a huge amount of work to build out a custom CMS solution to slot into a custom LMS solution. It also means that I can leverage the work that a highly successful team has already invested into a product without worrying about that codebase, it keeps the focus on simply developing around it.

Additionally, to increase the ability to rapidly develop this solution I will be harnessing Material-UI or another UI Component Library to ensure that from the ground up we are focusing not only on a clean, crisp look but also rapid mobile functionality that can if ever wanted, can be translated into a React-Native or electron application as well.

Finally, at this stage, there have been conversations regarding if I/we want to use GraphQL or simply stay with a simple REST API. This will in part be determined by the CMS solution that is chosen for this project, if it offers the ability to go with GQL, or if we are stuck with REST. These conversations have been with a good friend whose profile, and contact information can be found here: https://kyleswillard.medium.com/engineer-profile-jesse-medrano-e25d51569978

In closing, I decided to choose this project for a portfolio project, and a potential production project because of its hardcore complexity from conception to production. I think that we can all agree that simply doing another e-commerce site, or a social media clone is overdone. Instead, I want to break the rules and go far bigger. As I start to close out my time with Lambda School I want to make the point that I am not scared of complex or large projects, and in fact, that is the environment that I thrive in. Additionally, if I am being honest I chose this because it just seems like fun to hack away at a monster of a project in comparison to what you deal with in boot camps, or even in most smaller companies.

More to come as development progresses. The source will be open source on my GitHub which I will link when there is a codebase to look at.

Full Stack Web Development Student — Lambda School