From Silos to Synergy: The Complete Playbook to Frontend Tech-Stack Unification

Building a learning platform: The schema

In this article, we will be discussing how to create a comprehensive and effective model for a learning platform that allows educators to create courses.
Bryan Robinson

Bryan Robinson

Mar 27, 2023
Building a learning platform: The schema

One of our main goals is to establish a platform that not only provides students with high-quality educational content, but also allows educators to monetize their expertise by offering premium courses behind a payment or login gate.

To achieve this, we will need to carefully plan and organize our content flow. This involves identifying the key topics and themes that will be covered in our courses and structuring them in a logical and coherent manner. We will also need to consider the different types of media that will be used to deliver the content, such as videos, text, and interactive exercises.

Once we have established a solid content flow, we can move on to creating the content model. This is where we will design the structure and format of the courses themselves. We will need to consider factors such as the length and depth of each course, the level of interactivity and engagement required, and the overall learning objectives. We will also need to ensure that our model is scalable and can accommodate a wide range of courses and topics.

Editor's note: This is the first article in an on-going series for creating and extending this learning platform.

#Planning our content flow

In order to create an effective content model, it's important to first have a thorough understanding of our business goals. We want to not only educate our users, but also encourage them to purchase our courses. To accomplish this, we need to ensure that the educational flow is seamless and intuitive, with various opportunities for users to explore and engage with the content.

One way to achieve this is by providing users with a taste of the content through various means, such as free previews or sample lessons. In this case, we’re going to create the ability to give certain groups of lessons away for free and have users pay to unlock others.

Once we have a clear understanding of our business case and user needs, we can begin to map out the flow of content through the platform.

#Creating the content model

When it comes to modeling content for a learning platform, there are several approaches available. While a single document with a rich text field would be a simple solution, it would be less flexible when it comes to modifying and remixing content. On the other hand, a collection of lesson documents might seem more versatile, but it would present limitations when it comes to implementing our future payment functionality. In order to create a content model that can be adapted and modified with ease, we propose to develop three levels of content: a top-level course, a collection of lessons called a module, and finally the individual lessons.

The top-level content model will consist of courses, each with a unique identifier and a set of metadata that describes it. Each course will be composed of several modules, with each module containing a specific theme or topic. The mid-level content model will consist of a module that contains individual lessons. The module level is where we can implement our gating functionality to create a smooth editor experience. Each lesson will be structured in a consistent format to ensure a smooth learning experience across all subjects. The lesson content model will consist of a video and a rich text field, but can be extended in the future to create interactive components such as quizzes or supporting downloads like cheat sheets.

By creating these three levels of content, we can provide a flexible and scalable solution that can be easily modified and expanded upon as needed. Additionally, this approach will allow us to develop and implement our future payment functionality with minimal disruption to our content model. Overall, this approach will ensure that our learning platform is adaptable, scalable, and future-proof.

#Top-level: Course

The Course model described in this section The course will be the main element and create the primary structure of the course, including a long-form description and introduction. The course should also have the ability to display and reorder modules.

String field: Title

String field with a title of "Title" API ID of "title" and "Use as title field" checked The title field is a string field that should be marked as a "title" field for Hygraph. This will allow the title to display in the content table.

Slug field: Slug

Next, we need a slug based on the title. This will equate to the URL part in our application. The slug needs to be unique and use a "Slug template" of {title} to properly pull the title. Slugs should also be all lowercase. Slug field addition with Display name of "Slug", API ID of "slug" and Generate slug from template selected with a slug template of {title}

Rich Text Field: Body

For the body of each course, we'll want rich text to add styled and structured content to the introduction of the course. This is the basic Rich Text field from Hygraph, but we want to enable embedding and allow for embedding assets to let editors add images to the body of a course.

Rich Text field with a Display name of "Body" API ID of "body" and the "Enable embedding" selected with the Asset model allowed

Reference Field: Modules

Finally, the course needs a way to reference modules. You'll need to add the Module model in the next section before referencing — you can only reference to a model that already exists. Once the module model is set up, we'll use a Reference field. The reference field can allow references to a single model or multiple. In this case, we just want to reference the Module model and allow multiple modules per course. Once those options are selected, we then set up the field data — display name and id — and the way the field will appear on the referenced item (to allow for easier editing on both sides).

Relationship definition – Allow only one model to be referenced, model to reference "Module" and "Allow multiple modules per Course all selected

#Mid-level: Module

The Module model described in this section A module is a collection of lessons. The module is where the locking mechanism will be placed. If a course is fully paid, every module can be locked. However, if an educator wishes to give specific sections for free, only certain sections can be locked. The only new field type in this section is the "isLocked" boolean field. Fields:

  • Title (string)
  • Slug (slug field based on title)
  • Is Locked/Paid (boolean)
  • Lessons (multi-select reference to lessons model)
  • Course (single select reference to Course model)

#Low-level: Lesson

The Lesson model described in this section This is where the meat of the educational content lives. In this example, we're assuming an external video, such as a YouTube video, but the lesson could be any format. Fields:

  • Title (string)
  • Slug (slug field based on title)
  • Body (rich text)
  • Video URL (String)
  • Module (single select reference to Module model)

#Next steps

From here, we can start working toward implementing this with a frontend. In the next article of this series, we’ll take the API generated by Hygraph from this content model and implement a frontend with Next.js.

Blog Author

Bryan Robinson

Bryan Robinson

Bryan is Hygraph's Head of Developer Relations. He has a strong passion for developer education and experience as well as decoupled architectures, frontend development, and clean design.