With that done, here’s what our lesson page will look like. Let’s go ahead and set up our single-page app course site using Create React App. You can view a demo of the finished product here and get the source code here. For this part, we’ll integrate CourseKit which is a headless API for hosting online courses. Here’s what the home page, course page, and lesson page will look like:Īt the end of the tutorial, I’ll also show you how to (optionally) enroll students so you can track student progress and protect lesson content so you can monetize your course. We’ll make this a static site so you won’t need a backend. The features will include markdown-based content, embedded Vimeo videos, and lesson navigation.

In this tutorial, I’ll show you how to create a single-page app course site using React. Rather than being stuck with the boring and inflexible lesson pages offered by the well-known course platforms, we can build our own so we can make the design and UX exactly how we like. A great way to share your knowledge is with an online course.

Online react