DEV Community: Rajat Saxena

Building A LMS: What I Have Accomplished In Two Years

Rajat Saxena — Sat, 06 Mar 2021 06:48:35 +0000

I originally published this post on my Medium blog but I am reposting it here for the DEV.to community and to draw more attention to my project to be honest.

Exactly two years ago, I embarked on a journey of creating my own little learning management system (aka LMS aka CMS for educators). I named it CourseLit and here is its landing page.

CourseLit - Sell online courses and digital downloads from your own website

I have been a solo developer working on this open source project. I have detailed my reasons for building a LMS in this post, if you are wondering why would anyone be insane enough to develop his own CMS when there are many out there.

Creating a CMS is no easy task. There are features, design, security and many other things to take care of.

Coming back to my progress, I am going to divide this article into two parts i.e. Technical Front and Marketing Front.

Till today, I have mostly focused on the technical front and it is going to be my primary focus until CourseLit hits 1.0-rc. I have done some marketing here and there but I have a lot to do in this area (suggestions most welcome).

So, let's begin.

Technical Achievements

Admin Dashboard

The front-end app is a monolith which means that both the non-admin area and the admin area are the parts of the same Next.js app. Using the admin area, one can customize almost every aspect of her teaching site.

Most of my development time goes towards bettering this area as I want the admins/creators to have a good time while authoring courses and managing sites.

Themes

CourseLit uses Material-UI. Hence I created a way to load custom themes (based on Material-UI). I even created a separate repo to contain all the themes. One can copy/paste themes into CourseLit from there.

CourseLit Themes

I intend to sell premium themes in future. That's a part of my monetization plan.

Rich Text Editor/Viewer

I spent a significant amount of time creating a rich text editor and viewer for CourseLit which makes it really easy for the users to create content. As of now, one can embed code snippets, Tweets, YouTube videos, images, links etc. in the text editor and it will be rendered appropriately to the end user.

See this post of have a look at the text editor in action (in non-editable mode).

Working With Shebangs In Webpack 5

The editor is based on DraftJS and there is still a lot to be desired from the editor in its current form but it gets the job done. You can even build a make shift landing page using the editor if you want to.

You can use the editor/viewer in your own React projects. Check this repo out.

@courselit/rich-text - npm (npmjs.com)

Installer

I have dabbled with a lot of ways of installing CourseLit on a Linux machine. I first experimented with Ansible. I was able to create an installer using Ansible which downloads the dependencies, installs docker and then creates containers for the app and brings it up. It worked really well. But there was this small little problem!

Since the inception of the project, I wanted the average user to be able to install CourseLit without any technical help. Asking the users to install Ansible so that they can run the playbook made the entire task, well…, technical enough.

I later transitioned the project to offer a bash script which does everything the Ansible playbook did. Now, one just has to copy-paste a simple one liner and CourseLit gets installed in no time. 🥳🥳

Layouts

A CMS allows its users to customize its appearance to their own wills. This means they would want to re-organize section(s) of the website as per their requirements.

So, I built a system to swap in/out widgets on the live website depending upon requirements. I divided the non-admin UI of the website into zones i.e. Top, Aside, Bottom, Footer Right and Footer Left. One can add/remove widgets to/from the zones.
The Layout Section in CourseLit's Admin DashboardThis brings us to the our next important topic, Widgets.

Widgets

I wanted to build a Wordpress like system where users could install any plugin they liked by a simple drag-and-drop operation. Unfortunately, JavaScript does not work like PHP and things need to be compiled beforehand.

Hence, I created a way to load custom widgets, which are React components, by importing them into a special file courselit.json. Once you do that, the widgets become visible in the admin area from where users can control them.

Official widgets in CourseLitAs of now, I have created a few official Widgets like A Buttondown widget which one can use to collect emails. I have plans to introduce many more like Google Ads, Substack etc.

One can build his own widget and integrate it with CourseLit but there is a challenge and I don't really know the workaround to this.

The problem is, CourseLit is being offered as a collection of two Docker images, one for the backend and one for the frontend. If you want to build your own widget for CourseLit, you are required to import it in courselit.json file, then re-build the frontend's Docker image and plug it in.

I don't really know a workaround to this situation. If you know something, I am all ears. Please get in touch on Twitter: @rajatsx.

Role-Based Access Control (RBAC)

CourseLit has three types of user privileges.

The Super Admin
The Creator
The normal user

The super admin can do everything from the Admin dashboard. The creator can only author and publish his/her own courses. The normal user can only take courses and does not have access to the admin dashboard.

This is one feature I really enjoyed building as it forces me to think how this can be misused if not configured properly from the very start.

Regular CMS Stuff

Since CourseLit is a LMS, one can easily author courses, manage site users, manage media and change various texts like Site title etc.

I have also built a way to load third party scripts like Google Analytics and all. The end user does not need to know any coding for this. It can be done using the Admin dashboard.

So those were the technical achievements. Let's see what all I have done on the marketing front in order to bring attention to CourseLit.

Marketing Achievements

The Product Landing Page

I created the landing page using HTML and TailwindCSS. I am using GitHub pages to host the landing page of CourseLit.
For the domain, I have hosted it on a sub-domain as I did not want to spend anything on a domain name for a project which does not make money.

A dollar not spent is a dollar saved. But I pay in Rupees. And you still got the point, right?

The Documentation

I am using GitBook for hosting the documentation of the product. Again, I am on a free plan obviously.

I am trying to keep the documentation as easy to follow and as updated as possible because good documentation leads to greater adoption.

CourseLit (gitbook.io)

A YouTube Series

I have a YouTube series where I document the journey of creating my own LMS. CourseLit gets a few eyeballs every now and then from this series. The series is not as hit as I imagined it to be but I still find it interesting to share my journey with others.

Watch The Series Here

If you have any feedback about how to make it interesting, please let me know.

Adding CourseLit To The Public Lists

There are many awesome-tech lists on GitHub. I try to hunt the ones down where CourseLit can fit in. As of now, I have managed to get CourseLit listed on the awesome-nextjs list. Check it out here.

unicodeveloper/awesome-nextjs: A curated list of awesome resources : books, videos, articles about using Next.js (A minimalistic framework for universal server-rendered React applications) (github.com)

I am working on to get it listed on one more list i.e. awesome-selfhosted. 🤞

There are a few things on the marketing front that I have planned for the future, once CourseLit is stable enough and I have figured the major parts out.

A YouTube series of tutorials detailing how to use the software.
Cold emailing the teachers, institutions and content creators who are currently using sites like Teachable, Thinkific or their own make-shift websites for running their own courses.

"SaaS"ifying CourseLit

In its current form, CourseLit can be installed on a single Linux machine. It configures everything it needs. But it is a standalone piece of software. You can only have one installation of the software on a server and it serves only one site.

In order to build a complete SaaS offering out of CourseLit, I need to figure out how to let users spin up their own version of CourseLit on demand. It has be economical as well. I am not some mega corporation who has enough money at his disposal.

Currently, I am researching multi-tenant architectures and Kubernetes for this purpose as I don't have an expertise in this domain. If anybody knows anything, I am more than willing to listen.

I thought I would complete the project in approximately one year but here I am. Software and deadlines!

If you liked this write up, please upvote this post and follow me on social media as I will come back with more updates.

Twitter: @rajatsx
My YouTube Channel: CodeLit
YouTube Series About CourseLit: Watch
CourseLit's Discord: Join

Debugging HAProxy containers

Rajat Saxena — Sat, 02 May 2020 03:32:37 +0000

HAProxy is a popular solution for load balancing and reverse proxy needs. So I will cut to the chase and show you how you can get more insights into your HAProxy container.

In this guide, I am assuming the you are running the offical HAProxy image.

In order to debug your HAProxy container you need to have this program socat installed on your HAProxy container. Using this program you can have insights related to the running instance of HAProxy inside the container.

In your Dockerfile, add the following line to install socat into your container.

RUN apt-get update && apt-get install -y socat && rm -rf /var/lib/apt/lists/*

Now build and start your container normally. Once started, log into the container by issuing the following command.

docker exec -it <haproxy_container_id> sh

After you are logged into the container, you can start the socat program in interactive mode like this.

socat /var/run/haproxy.sock stdio

prompt

Now you can issue commands like show acl, show info, show errors, show env etc., to get more information about the running process. You can head over to this document to see the full list of available commands.

I hope someone will find this quick guide useful. Thanks for reading and check me out on YouTube as I love sharing more development related tips.

Effective Refactoring

Rajat Saxena — Tue, 28 Apr 2020 10:22:23 +0000

When you start working on some existing code, sooner or later you are going to bump into a situation where you have to refactor some part of that code. There can be many motivations behind that refactor. Maybe the code is too complex to maintain, maybe the code is doing just way too much and so on. So here are some quick tips regarding refactoring that code effectively.

1. Write unit tests
Before you even think about changing that code, you have to make sure that you have written all the unit tests you need in order to refactor that code. These tests will ensure that you've refactored the code while maintaining the existing behaviour and you've not introduced new bugs while changing the code. Make sure you've written test cases to cover all branches (if-else, switch etc.) of the code.

2. Break it down
If the code in question is doing too many tasks i.e. fetching data, parsing data, doing computation on it, transforming the result etc., you need to break this code into several functions each doing a single task. This way you'll make your refactor more complaint to the notion of the single responsibility principle. Make sure you also write some more unit tests to test these new functions as well.

3. Touch base with original author(s)
If you have the original authors of that code still around, you can ask them to review your code. It is much easier for them to recall the intricate details about that code and scenarios they handled. They may tell you about some additional scenarios you should have considered while refactoring. Make them the reviewer of the PR for this refactor or get in touch with them in person, whatever floats your boat. If the original author(s) are not around, you can still ask other developers to review your refactored code so as to weed out code smells and things that look off.

That's it for today. I build CourseLit and teach software development on YouTube.