In this detailed three-part tutorial series, I'll take you through each step, making it easy for beginners to understand how to create a Stream Gated Website using ReactJS and SuperFluid Protocol from scratch.
Part 2 - Building the Content Model
Part 3 - Building Our Frontend
Introduction
In the world of making videos and stuff online, lots of new people are becoming creators every day. As they get better and more popular, they need to invest in resources to improve their work. Sometimes, even if they have a loyal fan base, it's hard for them to monetize their content through ads or sponsorships.
This is where membership websites step in. These platforms enable individuals to show support for their favourite creators by subscribing to their content by paying a small amount. In return, subscribers gain access to exclusive content, merchandise, one-on-one sessions, and more.
These websites are really important because they make it possible for small creators to turn their hobby into a job. They let creators earn money while staying true to their style and ideas.
What are we building?
In this tutorial, we will be building a Stream Gated Patreon-like Membership platform using SuperFluid protocol. This platform will grant access to the creator's songs exclusively to users who are actively streaming a specified amount to the creator.
By the end of the tutorial, you will learn how to:
Use React Router and Protected Routes to create Gated Websites.
Implement Money Streaming in your ReactJS application using SuperFluid SDK.
Use Redux Toolkit for State Management.
Use Hygraph as a Content Management Service (CMS)
Use GraphQL for querying our CMS data.
Feel free to explore the live demo by clicking here. If you encounter any challenges or wish to reference the code, you can access the complete repository here. In the repository, you'll also find all the assets used in this tutorial for your convenience.
Pre-requisites
This tutorial assumes that you have a fundamental understanding of Front-End Development, specifically ReactJS. Additionally, having a basic grasp of Blockchain Development concepts will be beneficial.
Tools and libraries we will be using include:
ReactJS & Tailwind CSS for implementing the Front-End.
Redux Toolkit for State Management.
HygraphCMS as a Content Management Service.
GraphQL for querying data from our CMS.
SuperFluid Protocol for enabling Money Streaming into our website.
What is Money Streaming?
Money Streaming in blockchain is a way of dividing large amounts into small fractions and transferring them continuously over a fixed duration. Picture this scenario: when subscribing to your favourite OTT platform for $20 per month, rather than making a lump-sum payment at the beginning of your plan, you have the flexibility to pay incrementally, minute by minute, based on your usage.
Why SuperFluid?
The concept of Money Streaming is relatively new, and only a few organizations have adopted it on a larger scale. SuperFluid provides excellent documentation which makes it easy for developers and businesses to implement Money Streaming into their application. To learn more about SuperFluid and Money Streaming you can take a look at their documentation here.
What is Headless CMS?
CMS stands for Content Management System. A Headless CMS allows users to create, manage, and publish digital content on their website via an API. It is used for building websites, blogs, and other online platforms, as it eliminates the need for developers to maintain a separate content dashboard, simplifying tasks like content creation, updates, and deletions right from the same platform.
Why Hygraph?
Hygraph enables developers to build powerful GraphQL content APIs in a matter of minutes, while it gives creators all the tools they need to manage their content. Hygraph is a headless content management system, so the hosted content APIs can be easily consumed by websites, apps or any other platform.
Conclusion
In the next blog, we will be structuring our Backend Schema using Hygraph Headless CMS so that we can manage the content of our website.