How To Build A Patreon Clone With No Code

Platforms like Patreon have made it possible for audiences to support their favorite creators throughout their endeavors. Through a monthly subscription program, creators can package and distribute value in any unique form they choose. But what if you’re a maker who’d like to build their own membership platform like Patreon?

It’s never been easier to start building software through the power of no-code tools. Tools like Bubble are empowering makers of all backgrounds to easily create and ship valuable software. Our customers are using Bubble to build marketplaces, mobile apps, and even social networks.

Throughout this post, we’ll uncover the process of using Bubble to build your own version of Patreon without code.

Whether you’re looking to build a dedicated membership platform, or you’re just interested in utilizing some of the core features from Patreon, this guide will share an inside look into building the underlying logic of an MVP.

The steps to building Patreon with no code include:

Get Started

Before you start, you’ll need to first register your free Bubble account. Click the button below to get started, then you can follow along as we build our app together.

We also recommend completing our introductory lessons, which will guide you through the step-by-step process of the most common Bubble features. This will help you get a running start when building your Patreon clone.

It’ll also be beneficial if you understand how to create and edit user accounts. We’ve previously covered this in more detail in the article below.

When kickstarting your project, you can choose to begin by wireframing your product design, or building the necessary fields within your database.

In this case, we’ll start by using Bubble’s visual design tool to shape the user-interface of our platform. If you’re replicating a version of Patreon, some of the core pages you’ll want to include are:

• Home page - Including a search bar to help discover creators
• Upload page - A portal where creators can publish posts
• Post page - A page to host each individual creator post
• Tier page - A portal for creators to build their custom subscription tiers
• Creator profile - A page to host each creators profile

A major feature within Bubble is the ability to send data between pages. This allows you to create one generic version of a page, then dynamically display the relevant content from your database when it’s required.

In the case of your Patreon clone, you’ll only need to create one page to host your creator profiles. We can then write the necessary logic to display only the relevant creator on each page when it’s needed (we’ll cover this in more detail soon).

Configuring your database

Once you’ve mapped out the display of your product, you can focus on creating the necessary data fields to power your application. We’ll rely on these fields to connect the workflows behind your product.

Bubble’s pre-built database makes it easy to create different data types with unique fields. When creating a database, we recommend splitting larger items into separate data types to enhance the speed of your application.

For example, we’ll create two separate data types for each new creator post. One data type will include the basic details of a post (including the name, the image, and post excerpt), while the other data type will include larger content files like the full post itself.

By creating these as separate data types, it allows us to only load the necessary information when it’s needed, reducing the amount of content the Bubble editor will need to render.

When building Patreon as an MVP, we’ll need to create the following data types & fields:

Data type: User

Fields:

• Name
• Bio
• Photo
• Posts - List of posts Note: Creating a field as a list based on a separate data type allows you to seamlessly integrate all of its relevant data fields without having to create additional data points
• Supporters - Like of users
• Supporting - List of users
• Tiers - List of tiers
• Is creator (yes/no with no default)

Data type: Tier

Fields:

• Description
• Image
• Title
• Benefits - List of text
• Cost

Data type: Post

Fields:

• Title
• Post
• Image
• Comments - List of comments
• Content - Post content

Data type: Post content

Fields:

• Content
• Post - Post

Data type: Comment

Fields:

• Content
• Post - Post

Building workflows

Now that you’ve structured both the design and database of your application, it’s time to start stitching everything together and making your app functional.

In Bubble, the main way to do this is with workflows. Each workflow happens when an event occurs (e.g. a user clicks on a button), and then runs a series of “actions” in response (e.g. “sign the user up”, “make a change to the database”, etc.)

Creating support tiers

The first feature we’ll build is a function where creators can build their personalized subscription tiers for their profile.

On the tiers page, we’ll start by adding a variety of input elements that will be used to add data into our database. These fields can include text inputs, an image uploader, and a multi dropdown selection.

Note: The multi dropdown plugin will allow users to select from multiple options that are relevant to their tier features.

Once a user has added the relevant details within each input, they’ll click the create button to finalize the new tier.

This button click will be the necessary action to trigger your workflow.

You’ll then create a new thing within your database - a new tier.

We’ll then need to start adding the relevant fields within our database. Map each of the on-page input elements with their corresponding fields in your database.

Publishing creator posts

While we’re building features for our creator profiles, we’ll also build a separate page, allowing them to create and publish new posts to their profile.

This workflow will follow a similar process to our last example, only this time, we’ll be creating a new post.

On the upload page, we’ll add our necessary input elements.

Note: When building a product that requires text to be marked-up or formatted, we recommend using the rich text editor plugin. This input element will allow users to customize the style of content they add into this field.

Once a user has added the relevant details within each input, they’ll click the publish button to create a new post.

Within this workflow, we’ll start by creating the data of the post content, then we’ll link this to the post itself.

Next, we’ll add an additional step to this workflow, creating another thing - only this time we’ll create the post.

By linking the initial post content we created with this post, it’s possible to seamlessly integrate both data types across your platform.

Each time this workflow is triggered, a new post will be created.

Displaying creator profiles

Once we’ve built the core features to popular a creators page, we can begin displaying this content on their individual profiles.

Across Patreon, creator profiles are used to display the tiers and posts published by each creator.

On our profile page, we’ll start by configuring the page type to be a user.

Next, we’ll configure each of the on-page elements with dynamic content.

We’ll then add a repeating group, displaying the list of available Patreon tiers that users can subscribe to.

Repeating groups integrate with your database to display and update a list of dynamic content.

When using a repeating group, you’ll need to first link the element to a data type within your database. In this instance, you’ll classify the type of content as a tier.

You’ll also need to set the data source as a list of all the current page users, tiers.

Now you’re ready to start structuring the dynamic content that will be displayed within the grid. Simply map out the top row with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.

Creating subscriptions

Once a creator has listed their subscription tiers, we’ll need to build a function that charges subscribers on a recurring basis.

To get started, you’ll need to have created a Stripe account, as well as a subscription product within your billing dashboard.

Next, install the Stripe plugin and configure your API keys within the plugin settings.

Once you’ve configured the plugin, we’ll create a workflow that subscribes a users to a current subscription product.

Using a popup element, we’ll create a seamless experience that processes a payment, all without having to redirect the user from their current on-page experience.

At this point, we’ll also need to update the type of content for the popup to be a tier. This will allow us to send through the relevant data from the selected tier.

Once we’ve built this popup, we’ll create a workflow that displays this element.

Within this workflow, we’ll first choose to display data onto an element - our popup.

The data we’ll need to display is the current cells popup.

Once we’ve sent this data to the popup, we’ll then need to show the popup element itself.

Now, we’ll need to create an additional workflow that’s triggered when the join button is clicked on our popup.

Within this workflow, we’ll choose the stripe action - subscribe a user to a plan.

Within this stage, you can select which Stripe plan you’d like to subscribe a user to.

After a payment has been processed, we’ll then need to add the subscribing user to the creators list of total supporters.

By adding an additional step to this workflow, we’ll need to make changes to a thing.

The thing we’ll want to change is the parent groups tiers, creators, list of supporters - adding to it the current user.

We’ll then replicate this step, only this time, we’ll make changes to the current user, adding their parent groups tiers, creator to their list of their supporting users.

Searching for creators

After finishing the core features on our creator profiles, we’ll head back to our home page and build a function that allows users to discover new creators across the platform. This can be achieved by adding a search function to our home page.

By adding a search element on your home page, it will index all of the current creators in your database.

We’ll need to configure this search boxes list to a user property. Next, we’ll add a constraint to this property by only indexing users who are listed as creators (creator = yes).

Finally, we’ll configure the field to search for users names.

To send a user to the relevant creator profile, navigate to your workflow editor, then create a new event that is triggered when the value of an input is changed.

You’ll then create a navigation event, setting the destination page as the profile page, sending with it the data source of the search box’s current value.

Displaying creator posts

On our creator profiles, we’ll also need to display a list of all the post a creator shares with their audience.

Below our subscription tiers, we’ll add another repeating group, this time configuring its data type as posts.

We’ll also set the data source as the current page users, posts.

Sending data between pages

Within a repeating group, it’s also possible to create events based inside each individual row. This feature will become useful when building navigational features across your platform.

As creator posts only display a preview of each post - including the title and excerpt - we’ll need to display the full content when a user clicks-through to the individual post page.

To display this content, we’ll use our workflow editor to send data between pages.

You’ll need to start by creating a workflow that redirects a user to the post page when a posts image is clicked.

When creating this workflow, use a navigation event to send a user to another page.

From here, select the destination page to be the post page.

You’ll then need to send additional data to this page so the Bubble editor knows which unique post to display. The data you’ll need to display is that of the current cells post.

Display dynamic content on a post page

When a user is directed to a specific posts page, you can easily pull this event data and display the relevant content.

To build this function, you’ll first need to ensure that the destination page type matches the data property that you’re sending within the workflow. In this case, you’ll need to set the post page to a post property.

You can now start adding dynamic content into the fields that display information from a unique post.

Gating post content to subscribers

On our post page, we’ll only want this content to be available to those users who have subscribed to the current creator.

To make this content visible to only paid subscribers, we’ll add conditions to each element on the page.

Conditions are an effective way to create rules for individual elements when a specific criteria has been met.

For each post element, we’ll add a condition that recognizes when the current users, list of supporting users, doesn’t contain the current page posts, creator.

Within this condition, we’ll mark this content as not visible. (Leave the checkbox unchecked.)

Now when the current user visits a post where they’re not subscribed to the creator, we’ll instead want to display a list of the available subscription tiers they can join.

For the sake of our MVP, we’ll simply copy the same repeating group from our user profile onto our post page.

We’ll also need to update the data source of this repeating group to display the current page posts, creators, tiers.

Next, we’ll need to uncheck the box that displays this element when the page is loaded.

Finally, we’ll add a condition to this element. This condition will recognize when the current users, list of supporting users, doesn’t contain the current page posts, creator.

When this condition is met, we’ll opt to make this element visible.

Pro tip: You can use the elements tree in the top left-hand corner to hide and display select elements. This will help keep your development environment organized while building.

Liking a post

Creators love seeing support from their audience. Receiving likes on a post is always an effective way to know your audience appreciates your content.

When building a feature for likes in Bubble, you can utilize our icon elements to create a like button, or even upload an image of your own.

When the like icon is clicked, you’ll create a new workflow that makes changes to a thing.

The thing we’ll want to change is the current pages post.

As likes are measured as a list of users, we’ll add the current user to the current posts likes.

On our post page, we’ll then need to display a count of all the likes added for this post.

Commenting on a post

To help drive user engagement across the platform, we’ll also add a function to support comments on each post page.

Comments can easily be created by adding a repeating group and a multiline text input field below the post itself.

When configuring this repeating group, start by setting the data type as comments. Next, our data source will display the comments from the current pages post.

When creating a new comment, we’ll trigger a new workflow when the post button is clicked - creating a new thing.

The thing we’ll want to create is a new comment. Once again, you’ll need to match the on-page element with the necessary comment data field.

Whenever a new comment is created, the repeating group on this page will automatically update with the new content.

Additional features

Once you’re familiar with creating custom data fields and displaying dynamic content, you can start getting creative with the experiences you build for your product.

Privacy & Security: Now that you have the basics of your app, don't forget to start setting some privacy rules and conditionals to keep your data secure - starting with roles in the 'Privacy' section of your Data tab. You can also check if you're unintentionally exposing any data with an API checker.

Additionally you can:

• Build creator dashboards that display their earnings each month
• Add a goals and progress bar to creator profiles
• Add support for different formats of creator posts

Launch

Hiring a developer or dev team to build this application would cost thousands, if not tens-of-thousands of dollars. As you launch and grow in users, our paid plans allow you to host the product on your own custom domain, starting from as low as $25 per month. Some templates and plugins may cost more, but you can build all the functionality of Patreon without any additional costs.

Templates

If you don’t want to build your Patreon clone from scratch, you can purchase one of the templates made by our community members. Some similar templates include:

• Memberships Like Patreon by Zeroqode

Start Building

Bubble can help you build a Patreon clone or any other product you choose! It’s never been easier to build something incredible without having to code.

Ready to join the no-code movement? Register your free account here and get started today.

If you’d like additional help when building your product, our thriving community forum is a great place to source actionable advice and resources. It’s not only a great place to search through our existing Bubble examples, but any maker is encouraged to ask questions that can help them on their no-code journey.