Creating a Kickstarter or Indiegogo campaign can be a fun process for makers building unique products. Building a crowdfunding platform, however, has traditionally been a lengthy process that’s limited to the skill set of software developers.
As a maker, there’s no better feeling than launching your product to the world. We help create that feeling every day with Bubble.
Bubble’s powerful platform has made it easier than ever to start building software without having to write a single line of code. Our customers are using Bubble to build websites, directories, and even social networks.
Throughout this post, we’ll uncover the process of using Bubble to build your own no-code crowdfunding platform like Kickstarter, Indiegogo, or GoFundMe.
Whether you’re looking to build a dedicated crowdfunding platform, or you’re just interested in utilizing some of the core features from Kickstarter, this guide will share how to start building the underlying logic for your MVP.
Throughout this guide, we’ll highlight how to build the following key features from Kickstarter:
Before getting started, you’ll need a Bubble account (sign up here - it’s free). 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 Kickstarter clone.
We also recommend understanding how to create and edit user accounts, which we’ve previously covered in more detail in our other How To guides.
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 Bubbles visual design tool to shape the user-interface of our product. As we’re replicating a version of Kickstarter, some of the core pages we’ll need to include are:
A major feature of 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 is required.
In the case of your Kickstarter clone, you’ll only need to create one page to host an individual project. We can then write the necessary logic to display only the relevant project on each page when it’s needed (we’ll cover this in more detail soon).
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 building our Kickstarter MVP, we’ll create the following data types & fields:
Data type: Project
Data type: Creator/User
Now that you’ve structured both the design and database for your application, it’s time to start stitching everything together - making your product 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.)
One of the core features of Kickstarter is the ability for users to create and publish their projects to gain backers across the community.
On your ‘create project’ page, you can start creating this process by using a combination of input fields, including; free-text fields, image uploaders or multiple selection fields.
Once a user has added their relevant details within each input, they’ll click the submit button to create a new entry in your database. This button click will be the necessary action to trigger your workflow.
Using the workflow editor, you’ll need to create a new thing within your database. In this instance, we’ll be creating a new project.
You’ll then want to start adding data to the relevant inputs within your database. Start mapping each data field you’d like to create against each of the relevant inputs.
Once you’ve started submitting projects to the platform, you’re ready to display each item in a feed on the homepage. This can be achieved by utilizing our repeating group element.
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 case, you’ll classify the type as a project.
You’ll also need to set the data source as a list of all the submitted projects from your database. If you’d like to segment each repeating by a relevant category, you can add an additional constraint to your data source.
Now you’re ready to start structuring the dynamic content that will be displayed within this grid. Simply map out the first column with the relevant content you’d like to show, then this powerful element will populate the remaining columns based on your existing data.
Within a repeating group, it’s also possible to create events based on each individual column.
This feature will become useful when building navigational features across your platform. As Kickstarters homepage only displays an overview of each project (including its title, featured image and total fundraised amount), you’ll want to display the full details for each project on a separate page.
This additional content will need to be hosted on your individual project page.
To build this event, you’ll start by creating a workflow that redirects a user to your project page when the project's image is clicked.
When creating this workflow, use a navigation event to send a user to another page. From here, select the destination page type to be the project page.
You’ll then need to send additional data to this page so the Bubble editor knows which specific project to display. The data you’ll display is that of the current cells project.
When a user is directed to a specific project page, you can easily pull this event data from your workflow and display this relevant content.
Before we create this workflow, you’ll first need to ensure that the destination page type matches the data property that you’re sending through the workflow. In this case, you’ll need to set the project page to a project property.
You can now start adding dynamic content into your page elements, displaying the information from the relevant project.
Once a user finds a project they love, we’ll need to build a function to support the fundraising process. This workflow will include listing a payment amount, then processing the funds through a check-out experience. Using Bubble, it’s possible to harness the power of several plugins to easily accept payments and process orders.
In this guide, we’ll be using the Stripe.js plugin to process credit card payments through Stripe.
Note: After integrating this plugin, you’ll need to first configure your API keys within the plugin settings.
On your project page, start mapping out a payment form using input fields - allowing users to add their payment details. You’ll also need to include a Stripe token element next to the payment form.
This element won’t be visible to your end-users, but is essential to powering a new transaction in Stripe.
When the purchase button is clicked, we’ll then create a new workflow that triggers a Stripe payment.
You’ll begin by selecting the event ‘convert card into Stripetoken A’. Within this event, you’ll need to configure your input fields to match Stripe’s payment structure.
Once a card has been converted into a Stripe token, you’ll then need to create an additional workflow that automatically processes this token from a user's bank account.
Using the ‘Stripe.js - charge - create’ event, you’ll verify the Stripe token, as well as the final amount to be paid (including the currency).
If you’d like additional guidance when building your payment processing workflow, you can watch a full tutorial in the video below.