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.

About 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 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 product together.

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 users
Homepage of Indie Hackers clone with posts submitted by users

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 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 database

Once 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:

  • Username
  • Profile Photo
User data type and associated fields
User data type and associated fields

Data type: Posts

Fields:

  • body
  • community group
  • content
  • title
  • upvotes
  • user
Posts data type and associated fields
Posts data type and associated fields

Data type: Community Group

  • Description
  • Image
  • Name
Community Group data type and associated fields

Building workflows

Now 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 posts

The 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” page
Dropdown on “new-post” page

Once 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 button

Using 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 workflow
Creating a new thing (post) via a workflow

We’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 database
Mapping input elements to relevant Post fields in database

Make 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 inputs
Resetting the relevant inputs

Users now have the ability to create posts!

Building a Homepage

Once 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 group
Indie Hackers homepage with repeating group

We’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 date
Sorting posts by created date

Next, we’ll drop five elements into our repeating group:

  • An image that shows the current user's profile picture.
Image element on homepage
Image element on homepage
  • A text element that shows the current post’s title.
Text element (for post title) on homepage
Text element (for post title) on homepage
  • Another text element that shows the username of the user that created the post.
Text element (for user name of user that created post) on homepage
Text element (for user name of user that created post) on homepage
  • Finally, 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 icon

Within the workflow editor, you’ll start by making changes to a thing.

Making changes to a thing in workflow
Making changes to a thing in workflow

We’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 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 gets
Text element showing number of upvotes a post gets

Sending Data to a “Post” Page

As 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 elements
Indie Hackers clone post page with text elements

As 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 Post

In 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 source
Setting the type of content for the group to “Post” and setting a data source

The first text element we create will show the post’s title.

Text element showing the name of the post
Text element showing the name of the post

The second text element shows the username of the user who created that post.

Text element showing the username of the user who created the post
Text element showing the username of the user who created the post

The third text element shows the main content (i.e. the “body”) of the post.

Text element showing the body of the post
Text element showing the body of the post

Now 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 page

We’re going to navigate to the “post” page and send the parent group’s Post data.

Selecting the data to send to “Post” page
Selecting the data to send to “Post” page

When you navigate to a “post” page within your Indie Hackers clone, you should see something like this:

Example of “post” page
Example of “post” page

Creating Groups

A 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 group
  • Give the group a brief description
  • Upload an image for their group

In 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 button
Create group page with input elements, file uploader, and button

When 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 action

Within this workflow we’ll be creating a new community group: a new thing.

Creating a new thing when create group button is clicked
Creating a new thing when create group button is clicked

We’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 database
Mapping input elements and file uploader values to relevant Community Group fields in database

We’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 inputs
Resetting the relevant inputs

Groups Page

Now 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 Group
Setting the type of content for the repeating group to Community Group

The “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 image
Repeating group on “groups” page with two text elements and an image

The end result should look something like this:

“Groups” page with title, description, and image
“Groups” page with title, description, and image

Showing Relevant Posts on each Community Group Page

Whenever 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 element
Setting the type of content and data source of the group element

The 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 image
Group element with two text elements and in image

Next, 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 group

Next, 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 image

Finally, 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 icon
Creating a workflow action when a user clicks on an icon

Within the workflow editor, you’ll start by making changes to a thing.

Making changes to a thing in workflow
Making changes to a thing in workflow

We’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 gets
Text element showing number of upvotes a post gets

Additional Features

Once you’re comfortable with the basic features outlined above, you can start experimenting with additional features search as:

  • Comment sections for posts
  • A product directory where users can add products
  • Messaging function to allow users to connect privately
  • Jobs section where companies can post roles they’re hiring for

Further Resources

If 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:

Privacy & Security

Now 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.

Launch

Hiring 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 building

Bubble 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.