No items found.
May 11, 2022
read-time

How I Created a Custom Learning Management System (LMS)

Create an LMS using Airtable, Webflow, and Memberstack – No Coding Required!

The Essential Guide to Airtable is the first piece of content I ever created back in 2019. I shared the backstory for the Essential Guide to Airtable on the Makerpad podcast. What's relevant for the workflow inclined folks like yourself is that initially, I used Udemy for distributing the course. Seeing the paltry revenue I made on the course (often less then 25% of the 10$ sales price), I wanted to move it to my own website.

That's where I was faced with a choice: do I use a course hosting platform like Podia or Kajabi or build my own? Of course I opted for the latter so I can later write a newsletter about how I did so (repurposing remember?).

Over 3K students later, my workflow allows me to easily update courses, gate whatever part of the course I want and easily funnel folks from the course to my newsletter (you! maybe? More on that next week).

Step 1: Create a table for your course

Obviously, I used Airtable to record my course about Airtable. Anything else would have unacceptable! My table had a record for each lesson, and fields to reflect everything about each lesson including the section, status, feedback etc. This was perfect for tracking the status of each lesson, getting feedback, every I needed for the course creation process.

In addition to what I needed to create the course, I also added in Airtable the elements that I wanted to show on the website as fields. Fields for thumbnail, duration, short description, youtube URL.

Step 2: Mirror your table in Webflow

I used Webflow as my front-end for this LMS. I already had all the information of my LMS in Airtable, I only needed Webflow to display that information. So I created a mirror of my table in Webflow. Basically for every field in Airtable, I created a field in Webflow (I even named them the same to make things really easy).

For the design side, Finsweet adapted the Telly template which sped up the whole process.

Step 3: Sync Airtable and Webflow

Once the Webflow CMS was a copy of my Airtable base structure, I needed a way for the CMS items to match records in my Airtable base. Course done? Boom send it to Webflow from Airtable. Need to update something? Update it in Airtable and see that update in Webflow automatically.

This can be done in many ways—and I've tried them all. You can use Zapier (here's a stream on that), Nobull app natively from Airtable (another stream), or Parabola even. My favourite way is to use a short script that calls the Webflow API (whole course on how to do that here from Connor in Code Meets No-code). This gives me a button I can press to create/update a lesson's corresponding CMS item in Webflow:

one click updates!

Step 4: Gate the content with Memberstack

With Airtable and Webflow setup, I had a fully functioning learning management system up and running. All I was missing was a way for folks to sign up and pay me (note: I've since made the course free!). With Memberstack, you can gate any page of your Webflow website behind a pay wall. You can charge subscriptions or one time fees for access to a page (or pages). It takes a few minutes to setup and let me gate the whole course (go ahead, try to access it without logging in here).

Mackenzie Child actually did a whole course on this specific build which you can check out here!

In fact, now that I think about it, not only did I use McKenzie's front-end, I also basically used the same back-end. Guess this is the no-coder's version of copy pasting from stack overflow.

This setup has scaled very nicely, it's easy to update the course (which I haven't done much of unfortunately), gate the appropriate content and get folks signed up!

The more intricate part of this build is in fact the email infrastructure which I'll cover next week!

Until then, keep building!

Aron

Want to improve your workflows?
Join 2,000+ others who get the 10% better newsletter in their inbox every two weeks
One more step: check your inbox to verify your email!
Oops! Something went wrong while submitting the form.
Written by
Giovanni Segar
Share article
Written by
Aron Korenblit
Share article
Related posts
May 14, 2023
Are Managers To Blame For Bad Workflows? Yes And No.
Workflows
May 14, 2023
Why Workflow Documentation Is Useless (and What To Do Instead)
Workflows
May 14, 2023
You Don’t Understand Your Workflow
Workflows

Automate all the things

A weekly no-code automation delivered to your inbox (with thoughts on no-code every now and then)
Subscribe
May 11, 2022 by

How I Created a Custom Learning Management System (LMS)

The Essential Guide to Airtable is the first piece of content I ever created back in 2019. I shared the backstory for the Essential Guide to Airtable on the Makerpad podcast. What's relevant for the workflow inclined folks like yourself is that initially, I used Udemy for distributing the course. Seeing the paltry revenue I made on the course (often less then 25% of the 10$ sales price), I wanted to move it to my own website.

That's where I was faced with a choice: do I use a course hosting platform like Podia or Kajabi or build my own? Of course I opted for the latter so I can later write a newsletter about how I did so (repurposing remember?).

Over 3K students later, my workflow allows me to easily update courses, gate whatever part of the course I want and easily funnel folks from the course to my newsletter (you! maybe? More on that next week).

Step 1: Create a table for your course

Obviously, I used Airtable to record my course about Airtable. Anything else would have unacceptable! My table had a record for each lesson, and fields to reflect everything about each lesson including the section, status, feedback etc. This was perfect for tracking the status of each lesson, getting feedback, every I needed for the course creation process.

In addition to what I needed to create the course, I also added in Airtable the elements that I wanted to show on the website as fields. Fields for thumbnail, duration, short description, youtube URL.

Step 2: Mirror your table in Webflow

I used Webflow as my front-end for this LMS. I already had all the information of my LMS in Airtable, I only needed Webflow to display that information. So I created a mirror of my table in Webflow. Basically for every field in Airtable, I created a field in Webflow (I even named them the same to make things really easy).

For the design side, Finsweet adapted the Telly template which sped up the whole process.

Step 3: Sync Airtable and Webflow

Once the Webflow CMS was a copy of my Airtable base structure, I needed a way for the CMS items to match records in my Airtable base. Course done? Boom send it to Webflow from Airtable. Need to update something? Update it in Airtable and see that update in Webflow automatically.

This can be done in many ways—and I've tried them all. You can use Zapier (here's a stream on that), Nobull app natively from Airtable (another stream), or Parabola even. My favourite way is to use a short script that calls the Webflow API (whole course on how to do that here from Connor in Code Meets No-code). This gives me a button I can press to create/update a lesson's corresponding CMS item in Webflow:

one click updates!

Step 4: Gate the content with Memberstack

With Airtable and Webflow setup, I had a fully functioning learning management system up and running. All I was missing was a way for folks to sign up and pay me (note: I've since made the course free!). With Memberstack, you can gate any page of your Webflow website behind a pay wall. You can charge subscriptions or one time fees for access to a page (or pages). It takes a few minutes to setup and let me gate the whole course (go ahead, try to access it without logging in here).

Mackenzie Child actually did a whole course on this specific build which you can check out here!

In fact, now that I think about it, not only did I use McKenzie's front-end, I also basically used the same back-end. Guess this is the no-coder's version of copy pasting from stack overflow.

This setup has scaled very nicely, it's easy to update the course (which I haven't done much of unfortunately), gate the appropriate content and get folks signed up!

The more intricate part of this build is in fact the email infrastructure which I'll cover next week!

Until then, keep building!

Aron

Automate All the Things
3K+
Subscribers
88
Issues
Enjoying the post? Get it in your inbox every Thursday
Last step: confirm your email!
Oops! Something went wrong while submitting the form.

Related streams

See all streams
No items found.