Case Study: Building an LMS Solution with WordPress & Gutenberg blocks

We were contacted to develop an LMS system with different types of user access for Paidefsis, an educational centre.

The project was prioritised and delivered within the first month of the COVID pandemic in order for the centre to continue operating seamlessly through COVID restrictions offering an easy-to-use application to its students.

Most importantly, the client needed a Learning Management System behind an invite-only login system where students were able to attend asynchronous or synchronous online classes.

I was the Development Lead for this project.

Custom Design & Development

During the research on similar websites in Greece, we realised that we couldn't find anything modern on this kind of website.

So we decided to design something from scratch and make it modern, simple and also fast and performant.

Instead of using a ready-made template, we developed a custom-made theme perfectly aligned with the design principles of the centre.

One of the first websites utilising Gutenbergs' full power in Greece

When we built Paidefsis.gr, WordPress had recently introduced Gutenberg as its new editor. We decided that the project should be future-proof, and built its tools around this editor.

In Gutenberg, the content is divided into blocks, which are “bricks” that users can use to create posts and pages or their entire websites.

Titles, paragraphs, columns, images, galleries, and all the elements that make up the editor’s interface, from sidebar panels to block toolbar controls, are React components.

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function.

reactjs.org

While the editing experience delivered by Gutenberg is new compared to the classic WordPress editor, the way WordPress stores your pieces of content in the database doesn’t change at all. That’s because Gutenberg is an application that works within WordPress but doesn’t change the way the CMS works at its core.

The client was thankful for this decision, as it remains easy to add content to this day, and Gutenberg keeps evolving.

Some of the blocks we built:

  1. A Minimal and performant Slider, either fullscreen or boxed (using Gutenbergs' built-in Align tool).
  2. A Horizontal Gallery Block (image below), to showcase images on each subpage.
  3. Cards Block, able to fetch pages and posts.
  4. Team Block, able to fetch a Custom Post with information about each teacher (Image, Name, Bio). On the front end, it is possible to click each teacher to see more info about them.

User Roles

Three (and a half) user roles were needed for this project:

Super Admins/Admins - This is actually us (the dev team) and the founders of the centre, this role was capable of having control over the whole app. In order to make the CMS cleaner for our clients, we had an Admin role that had some unneeded features hidden (like third-party SMTP settings etc.).

Teachers - This was used for the teachers of the centre. Every teacher had their own Classes and Courses, and couldn't access any Classes, Courses or Media from another teacher.

Students - This role was for the students of the centre. They were only able to see the Courses their teachers assigned to them on their custom dashboard (The WordPress admin panel was hidden from this role).

All User Roles have the ability to secure their accounts with 2-factor Authentication.

All without compromising performance

Building everything from scratch was a chance to avoid some pitfalls, like endlessly loading libraries we didn't need, and writing our code lightweight and as optimised as possible.

We also followed some techniques on production, like reducing image sizes whenever a user uploads Media, minifying JS and CSS files, the use of a CDN, keeping external scripts to a minimum (only tracking scripts), and of course, the use of advanced caching mechanisms.

The results were astonishing:

Results from webpagetest.org

While capable to handle all 300 students simultaneously logged in and attending classes, on a Friday evening, without the need to worry about the website crashing and happy teachers that were able to continue working during the pandemic.

Notable technologies & features

  1. Built on WordPress.
  2. Used the Bootstrap 4.x. front-end framework
  3. Used the Underscores (_s) as our themes' starting point.
  4. An SMTP service (in order to make sure every email/notification will be delivered). It also supported SMS notifications.
  5. Plugin to bulk import new students from a CSV, and automatically send a new Welcome Email with onboarding instructions.
  6. Direct ticketing system for teachers inside the platform to contact the Dev team to report issues or ask for help.

The Result

Images © Paidefsis.gr

See the project live

Like what you see?

I’m available to hear about your project and make it happen together. If you would like to reach out, please shoot me a message and I’ll get back to you as soon as possible.

Let's talk