Because of Covid-19, we are seeing schools, universities, educational institutes changing from in-person model to 100% online education. Also, companies are using e-learning instead of having in-person workshops but there are not too many learning management systems out there that are modern and can address all the needs a school, university or company can have for distance learning. We have worked with an open-source learning management system called OpenEDX for around 7 years and we believe it's one of the best e-learning systems out there but it has it's own shortcomings too. Our project focused on improving OpenEDX to provide a high-quality learning experience for the users. Our improvement includes replacing OpenEDX frontend system which is outdated with a modern system using Vercel and NextJS and also improve Security and customize login and registration using Auth0. Before this hackathon, we already did an integration between OpenEDX and Auth0 in a project and saw how Auth0 can provide more than what we needed. This experience inspired us to do this hackathon to show how we can replace out of box OpenEDX Auth with something better aka Auth0 and also wanted to show how Vercel and NextJS can replace Monolith platforms Frontend to provide modern UI and great performance. By this improvement, we can make the learning experience more modern, enjoyable, accessible and also secure for students all around the world
We love to provide a high-quality e-learning system for everyone all around the world and help students keep learning and protect themselves from Covid-19 by continuing learning from home
What it does
As mentioned in the section before this LMS is built on top of OpenEDX, an open-source learning system developed by MIT and Harvard. but this LMS has the following problems:
Front End system:
it's not using modern approaches like Pre-rendering and Server-side Rendering, That's why site performance is low and also we can't introduce PWA (progressive web application) practices like offline functionality.
Any new changes in Front End need technical knowledge (even for changing a text, logo picture, etc), You have to compile all the front end assets in the server (it takes ~30 mins) and restart services. a lot of headaches and wasted time for the developer.
When you upgrade to a new version of OpenEDX you have to redo all the theming work you have done to adopt the existing themes to a new version of the platform.
Adding new fields to the registration form is so painful, you have to install extra Django app, customize it, and maintain it for the future versions.
You can't customize registration and login. for example, you can't add progressive profiling when a user signs up, or create a Marketo lead when user registers, merging users profile if they are using the same email address and so on.
You can't prevent using a breached password, detect brute force attack, customizing password reset workflow, and customize signup, password reset emails.
Add multiple languages to the login and registration forms.
Our project solves all these problems and here is how:
By using NextJs and host it on Vercel we improved performance with Pre-rendering and our pre-rendered assets are hosted in Vercel Edge.
We are developing integration with Strapi to have CMS for your front-end to make changes like adding a new page, changing a text, picture, and colors easier for non-technical staff users.
Having the platform hosted on Vercel, every new commit to our repo gets deployed automatically and doesn't need developer time to compile assets and deploy the change to the server.
Front End lives outside of Monolith (OpenEDX) then it doesn't depend on the OpenEDX version and doesn't need any extra work if you upgrade your OpenEDX to the next version. the result is you don't need to take your whole site down for a couple of hours during the upgrade and you don't need your developers to spend a couple of weeks to adopt an existing theme to the next version of OpenEDX.
We integrated our Platform to Auth0 and it solves all login and registration issues
Adding a new field to the registration form is as easy as one line of code in universal login settings of your Auth0 tenant, no need to install another Django app, maintain and upgrade it.
Auth0 supports multi-languages.
Auth0 notify your tenant admin if a user used a breached password and detect a brute force attack.
We are using Auth0 to provide social logins with Google, Github, Facebook, etc.
Auth0 Rules provide a great way to customize the login and registration workflow. You can add new signed up users as a lead to your Marketing system, make integration to your slack channel on user login and signup, add progressive profiling if you want to ask the user for extra info after signup
How we built it
Please see this Diagram https://i.ibb.co/LkPZCrT/diagram.png
In summary, we took Frontend and Auth system of a monolith out of its box and put it somewhere else by using Auth0, Vercel, and NextJS
If you want to learn more please watch https://drive.google.com/file/d/1GlgqDyMHAnv3GaQHgqbB1Y2yF-FR93y7/view
Challenges we ran into
Proxy and reverse proxy between Monolith and our frontend was challenging but it's working now
Accomplishments that we are proud of
The whole integration worked well and with some small changes it can be production-ready
What we learned
We did an investigation about Auth0, read great docs and could accomplish this integration by enabling SAML in my system and hook it to Auth0
Did learn more about Vercel and hosting a Frontend there and hook it to a monolith system like OpenEDX
What's next for Cubite Learning Management System
We only replaced OpenEDX Courses Catalog and Index page with Nextjs and Vercel our plan is to replace whole frontend and UI with a frontend powered by NextJS and hosted in Vercel
We are going to integrate our system with Strapi to provide better CMS for school staff and admin users
In the near future (~6 months) this project will become a SaaS platform with a really accessible price for universities and Schooles.
If we win the first place or second place of this hackathon we do the implementation of our LMS free of charge for 2 NGOs or Schools (Chosen by Hackathon judges or us)