paint-brush
How to Build a Platform to Sell Your Online Course (A Brief Outline)by@taimoor

How to Build a Platform to Sell Your Online Course (A Brief Outline)

by Taimoor SattarApril 5th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

There are many online platforms for selling courses online, however, I found a few limitations. For the course platform, I would like more customization of landing pages, subscriptions, and content structure. We used Gatsby Framework, Sanity_io, Stripe and Tailwind CSS to build the website. Sanity Server is a database, fully managed by Sanity Studio, so we don’t need to worry about a pricing model that charges that usage is free. For example websites are listed below.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - How to Build a Platform to Sell Your Online Course (A Brief Outline)
Taimoor Sattar HackerNoon profile picture

There are many online platforms for selling courses online, however, I found a few limitations. For the course platform, I would like more customization of landing pages, subscriptions, and content structure. Therefore, I created my own platform for selling courses myself.


Here, I’ll briefly describe how I built a platform for selling my course. We used Gatsby Framework, Sanity_io, and Stripe to build the website.


Gatsby is a framework built on React. We use the Gatsby Framework to build the frontend and backend. The benefits of using the Gatsby framework are as follows:


  1. It supports thousands of plugins that we can use in the project.
  2. We can fetch the data both at build and runtime.
  3. Run serverless function.



To get started with the Gatsby Framework, you can choose the starter template from the below page.


https://www.gatsbyjs.com/starters

![Gatsby Starter](https://cdn.hackernoon.com//images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-2022-04-05T04:34:03.215Z-cl1lncqbz00480as67za6g030"Gatsby Starter")

The starter template is the reference point. You can customize the starter template as per your need. For the project, we used Tailwind CSS to style the HTML elements. Tailwind CSS provides utility classes that we can use in the project. Take a look at the image below to see how tailwind works.


You can also find tons of Tailwind CSS components online that you can use in your project. Some of the example websites are listed below.



In order to make the website available on the internet, we host the project on Github and deploy the repo on Netlify. Netlify provides a better user experience to build, deploy, and scale production applications.


![Netlify build](https://cdn.hackernoon.com//images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-2022-04-05T04:34:03.216Z-cl1lncqc000490as6eo6p0g0j"Netlify build")

Gatsby is a framework, not a database. So, we need a database to store and manage the content data. I use Sanity_io for that purpose. You can see the official Sanity page below.

https://www.sanity.io


![Sanity website](https://cdn.hackernoon.com//images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-2022-04-05T04:34:03.216Z-cl1lncqc0004a0as6drcs6fef"Sanity website")

Sanity_io has two layers as below.


  1. Sanity Studio
  2. Sanity Server


The Sanity Server is a database, fully managed by the Sanity team so we don’t need to worry about that. Sanity has a pricing model that charges for data usage.


Sanity Studio is a CMS that allows us to fully customize the document’s schema. In our case, we can create different documents in Sanity Studio e.g. course, customer, subscription, etc. For each document, we can define a custom schema as per the requirements.

![Sanity Studio](https://cdn.hackernoon.com//images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-2022-04-05T04:34:03.217Z-cl1lncqc1004b0as65scn2azq"Sanity Studio")

Stripe is the platform we use to process online payments. To collect payments from users, we need to build a checkout page. In Stripe, we have multiple options to create checkout. Below are two approaches to creating Stripe checkout:


  1. Stripe built-in checkout (fully managed by Stripe team).
  2. Create custom checkout using the Stripe API.


Stripe’s built-in checkout is easier to use since we can have fewer bugs and more payment solutions out of the box.

How to interconnect different layers of service?

The data is stored in Sanity Studio, the frontend UI is built on Gatsby Framework, and recipient subscription details are available on the Stripe server. As described, we have three layers of services. We want the data to be available to the user in the Gatsby project. To glue the data layers, we can use the API.


By using the Stripe Node API, we can retrieve and modify the recipient subscription. In the Gatsby framework, we use serverless functions to execute the Stripe Node API calls. You can find the Stripe Node API on the below page.


![Stripe Node API](https://cdn.hackernoon.com//images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-2022-04-05T04:34:03.222Z-cl1lncqc6004c0as63oxtb8rg"Stripe Node API")

To get the Sanity data in the frontend, we can send the HTTP requests to the respective API route. We can use the Sanity GROQ language to get the desired data from the Sanity server. You can learn more about Sanity GROQ language on the following page.

Final words

Here, I discuss briefly how I built my course platform website. If you want to learn more, you can check the below course.