In this post, we’ll walk you through the step-by-step process of building an Indie Hackers clone with Bubble. Communities are a powerful way to engage an audience and drive meaningful discussions. Whether forums are for sporting communities, hobbies, work, or our personal favorite, visual programming, there’s a hub for every niche.
Indie Hackers is one of the most popular watering holes on the internet for people interested in starting their own online business. Aspiring and accomplished entrepreneurs exchange ideas and tips freely there. This guide will show you how you can build your own online community just like Indie Hackers.
Table of ContentsAbout the author: Alex is the founder of NoCode Builds, a boutique Bubble development agency that helps entrepreneurs turn their app ideas into reality. He has built several revenue-generating apps with Bubble and specializes in UI/UX and API integrations. Working with clients from a wide variety of industries has been a real highlight of his Bubble career and he’s always interested to hear from aspiring entrepreneurs who want to build using Bubble.Get StartedBefore 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 product together.
Register your account on Bubble
New to Bubble? Follow along on our introductory videos to get familiar with the basics of Bubble. This will help you get a running start when building an Indie Hackers clone.
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 an app like Indie Hackers, you’ll need to build the following pages:
Homepage: used to display posts from users.New Post: allows users to create new posts.Post: a page that dynamically displays content for each post.New Group: Allow user to create new groups.Community Group: A page that dynamically displays content relevant to each community group.Homepage of Indie Hackers clone with posts submitted by usersA 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 Indie Hackers clone, you’ll only need to create one page to host your individual posts, products and community groups. We can then write the necessary logic to display only the relevant content for each page when it’s required.
Configuring your databaseOnce you’ve wireframed these pages, 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 your Indie Hackers clone as an MVP, we’ll need to create the following data types and fields.
Data type: User
Fields:
UsernameProfile PhotoUser data type and associated fieldsData type: Posts
Fields:
bodycommunity groupcontenttitleupvotesuserPosts data type and associated fieldsData type: Community Group
DescriptionImageNameCommunity Group data type and associated fieldsBuilding workflowsNow that you’ve structured both the design and database of your application, it’s time to start stitching everything together, making your app functional.
In Bubble, the main way to create functionality in your app 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 new postsThe first core feature we’ll build is a function for users to create posts that will be seen on the homepage and the relevant community group pages.
On the “new-post” page of our application, you can start creating this process by using: an input, a dropdown, and multiline input.
For the dropdown, we’re going to make the type of choice “Community Group.”
Dropdown on “new-post” pageOnce a user has written their post title, selected the relevant group, and written the body of their post, they’ll click the submit button to create a new post in your database. Clicking this button will be the necessary action to trigger your workflow.
“new-post” page with input elements and submit buttonUsing the workflow editor, you can select “Create a new thing" within your database. In this instance, we’ll be creating a new post.
Creating a new thing (post) via a workflowWe’ll then need to start adding the relevant fields within our database. Map each input field you’d like to create against its corresponding data field.
Mapping input elements to relevant Post fields in databaseMake sure to add an additional step to reset the relevant inputs so that the information the user enters gets cleared form the page.
Resetting the relevant inputsUsers now have the ability to create posts!
Building a HomepageOnce users have submitted posts to the platform, we’ll need to display these on our home page and relevant community group pages. We’ll start off by building a homepage.
To build this feature, we’ll need to utilize a repeating group element. Repeating groups integrate with your database to display and update a list of dynamic content.
Indie Hackers homepage with repeating groupWe’ll set the type of content for the repeating group as Post.
Let's also sort the posts in the repeating group by “Date Created” so that the most recent posts are shown at the top of the page.
Sorting posts by created dateNext, we’ll drop five elements into our repeating group:
An image that shows the current user's profile picture.Image element on homepageA text element that shows the current post’s title.Text element (for post title) on homepageAnother text element that shows the username of the user that created the post.Text element (for user name of user that created post) on homepageFinally, we’re also going to allow users to upvote posts. To do this, we’ll add one more text element......as well as an icon.To allow a user to upvote a post, we’ll need to add a workflow action. If a user clicks on the “up” icon, we’ll add that user to that post’s upvotes list.
Creating a workflow action when a user clicks on an iconWithin the workflow editor, you’ll start by making changes to a thing.
Making changes to a thing in workflowWe’ll need to make changes to the parent group’s Post. We’re going to add the current user to the upvotes list on the current post.
Adding the current user to the upvotes list on the current postThe text element will show the count of the number of users who have upvoted a particular post.
Text element showing number of upvotes a post getsSending Data to a “Post” PageAs each post card on the homepage only contains the headline of its respective post, we’ll need to display the full body of the post on a separate page.
Let's create a new page called “post.”
Indie Hackers clone post page with text elementsAs we’ll be displaying posts on this page, we need to set the type of content of the page to Post.
Setting the type of content to PostIn order to display the relevant content for each post, we’re going to create a group and put three text elements in it.
Let’s set the type of content of the group to “Post” and set the data source as “Current Page Post.”
Setting the type of content for the group to “Post” and setting a data sourceThe first text element we create will show the post’s title.
Text element showing the name of the postThe second text element shows the username of the user who created that post.
Text element showing the username of the user who created the postThe third text element shows the main content (i.e. the “body”) of the post.
Text element showing the body of the postNow let’s go back to the homepage and add the necessary functionality by creating a workflow that redirects a user to the “post” page when a post’s title is clicked on the homepage.
Creating a workflow to navigate from Indie Hackers clone homepage to post pageWe’re going to navigate to the “post” page and send the parent group’s Post data.
Selecting the data to send to “Post” pageWhen you navigate to a “post” page within your Indie Hackers clone, you should see something like this:
Example of “post” pageCreating GroupsA key feature of Indie Hackers (and many other online communities) is the ability to create and participate in groups dedicated to a specific topic.
Let’s build a “create group” page that allows users to launch their own groups. We’ll keep it simple and create three input elements that permit users to:
Name their groupGive the group a brief descriptionUpload an image for their groupIn total, we’ll drop two input elements, a file uploader and a button, onto the page.
Create group page with input elements, file uploader, and buttonWhen a user clicks the “create group” button, we need to trigger a workflow that creates a new group in our database.
Create group button and start/edit workflow actionWithin this workflow we’ll be creating a new community group: a new thing.
Creating a new thing when create group button is clickedWe’ll then need to start adding the relevant fields within our database. Map each of the on-page input elements with its corresponding database field.
Mapping input elements and file uploader values to relevant Community Group fields in databaseWe’ll also need to “Reset relevant inputs” in order to clear the values the user has put into the various input/file uploader elements.
Resetting the relevant inputsGroups PageNow that we have the ability to create groups, we need to build a page where users can browse through all the groups available.
We’re going to create a new page called “groups” and drop a repeating group on the page. Then set the type of content to “Community Group” and set the “Sort by” to “Created Date” (much like we did with the Indie Hackers clone homepage).
Setting the type of content for the repeating group to Community GroupThe “groups” page is going to have quite a similar layout to our homepage. We’ll use two text elements and an image element to display information about each group in the repeating group.
Repeating group on “groups” page with two text elements and an imageThe end result should look something like this:
“Groups” page with title, description, and imageShowing Relevant Posts on each Community Group PageWhenever users click on a specific community group link, we want to show them posts relevant to that community. We’ll again make use of Bubble’s ability to dynamically show data and create a single “community-group” page to achieve this.
Start off by setting the type of content of the new page to “Community Group.”
Setting the type of content to “Community Group”Now let’s give some basic information at the top of the page to make it clear to the user what community group page they’re on. We’ll create a group element and drop an image and two text elements into it for this.
It’s important to set the type of the group element to “Community Group” and also set its data source to “Current Page Community Group.”
Setting the type of content and data source of the group elementThe text elements and image element will use the parent group’s community group to display the relevant information.
Group element with two text elements and in imageNext, drop a repeating group onto the page and set its type of content to “posts.”
Setting the type of content of the repeating group to “Post”We’re only going to display posts in this repeating group if their “Community Group” is equal to the current page’s Community Group.
Adding a constraint to the repeating groupNext, let’s drop some text elements, an icon and an image into the repeating group to show relevant information for each post. We’re basically trying to copy the same format that we had on the homepage.
Repeating group with text elements, icon, and imageFinally, let's add a workflow action that allows users to upvote posts, much like we did on the homepage.
Creating a workflow action when a user clicks on an iconWithin the workflow editor, you’ll start by making changes to a thing.
Making changes to a thing in workflowWe’ll need to make changes to the parent group’s Post. We’re going to add the current user to the upvotes list on the current post.
The text element will show the count of the number of users who have upvoted a particular post.
Text element showing number of upvotes a post getsAdditional FeaturesOnce you’re comfortable with the basic features outlined above, you can start experimenting with additional features search as:
Comment sections for postsA product directory where users can add productsMessaging function to allow users to connect privatelyJobs section where companies can post roles they’re hiring forFurther ResourcesIf you’re interested in building an Indie Hackers clone, you might find it useful to read other “How to Build” tutorials that cover similar ground, like:
How to Build a Product Hunt CloneHow to Build a Reddit CloneHow to Build a Discord ClonePrivacy & SecurityNow that you’ve set up the basics of your app, don't forget to start setting some privacy rules and conditions 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.
LaunchHiring a developer or dev team to build this app would cost thousands, if not tens of thousands, of dollars. As you launch and grow in users, paid plans allow you to host the app on your own custom domain, and these start as low as $25 per month. Some templates and plugins may cost more, but you can build all the functionality of Indie Hackers without any additional costs.
Start buildingBubble can help you build an Indie Hackers 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 Bubble account 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. Any maker is encouraged to ask questions within the community to help empower their no-code journey.