Dávid Lévai
Build Your Own Subscription-based Course Platform
#1about 2 minutes
Introducing the modern stack for a course platform
An overview of the tools used to build the subscription platform, including Supabase, Stripe, Next.js, and GraphCMS.
#2about 1 minute
Using the Vercel subscription payments starter kit
The Next.js starter project from Vercel provides a foundation with Supabase and Stripe already integrated.
#3about 3 minutes
Styling the application with Tailwind CSS and UI
Tailwind CSS is a utility-first framework for styling, while the paid Tailwind UI package provides pre-built components to accelerate development.
#4about 3 minutes
Deploying the platform with Vercel's features
Vercel provides hosting, serverless functions, CI/CD, and preview environments for every pull request.
#5about 17 minutes
Managing users and data with Supabase
Supabase, an open-source Firebase alternative, handles authentication via OAuth and magic links, and uses Postgres with row-level security for data access.
#6about 10 minutes
Handling payments and subscriptions with Stripe
Stripe is used to create products, manage pricing plans, and handle the entire payment lifecycle, from checkout to recurring billing.
#7about 11 minutes
Managing course content with a headless CMS
GraphCMS serves as the headless CMS, allowing for easy schema creation and content management for courses and lessons via a GraphQL API.
#8about 5 minutes
Syncing Stripe products to Supabase with webhooks
Webhooks from Stripe automatically trigger a serverless function to insert or update product and price data in the Supabase database.
#9about 5 minutes
Automating site updates with Vercel deploy hooks
When content is updated in GraphCMS, a Vercel deploy hook or integration can be triggered to automatically rebuild and deploy the static site.
#10about 7 minutes
Demonstrating the complete user subscription journey
A live demonstration shows a new user signing up, being denied access to paid content, subscribing via Stripe, and then successfully viewing the courses.
#11about 4 minutes
Analyzing the cost of running this modern stack
The entire platform can be run for free using the generous free tiers of Supabase, Vercel, and GraphCMS, with Stripe charging only transaction fees.
#12about 12 minutes
Q&A on low-code, production readiness, and career
The speaker answers audience questions about the evolution of low-code tools, production readiness of this stack, and how to keep up with new technologies.
Related jobs
Jobs that call for the skills explored in this talk.
Featured Partners
Related Videos
How to Build Truly Production-ready Apps - Modern JS-based SaaS Stack for Indie Devs and Small Teams
Dávid Lévai
Web development best practices in 2021
Laurie Voss
Web development: where are we, and where are we going?
Laurie Voss
Teini - an extremely small webshop leveraging awesome and free tech
Christian K.
Snappy UI needs no Single-Page Application
Clemens Helm
Modern Headless Commerce with Vendure
Michael Bromley
Front-End Micro Apps
Serg Hospodarets
Meet Your New BFF: Backend to Frontend without the Duct Tape
Noam Honig
From learning to earning
Jobs that call for the skills explored in this talk.
Senior Frontend Engineer (Next.js / React)
LearnWise AI
Municipality of Bilbao, Spain
Remote
Senior
ETL
React
Figma
Next.js
+3
Full Stack Web Developer (NextJS/React)
Sportserve
Municipality of Madrid, Spain
Remote
Intermediate
API
GIT
JIRA
Bash
+10
Senior Frontend Engineer (Next.js / React)
LearnWise AI
Municipality of San Sebastian, Spain
Remote
Senior
ETL
React
Figma
Next.js
+3
Senior Frontend Engineer (Next.js / React)
LearnWise AI
Municipality of Marbella, Spain
Remote
Senior
ETL
React
Figma
Next.js
+3
Senior Frontend Engineer (Next.js / React)
LearnWise AI
Municipality of Vitoria-Gasteiz, Spain
Remote
Senior
ETL
React
Figma
Next.js
+3
Senior Frontend Engineer (Next.js / React)
LearnWise AI
Municipality of Palma, Spain
Remote
Senior
ETL
React
Figma
Next.js
+3
Senior Frontend Engineer (Next.js / React)
LearnWise AI
Gijón, Spain
Remote
Senior
ETL
React
Figma
Next.js
+3


