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.
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.
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.
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
Top comments (0)