# How to create a custom content feed in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Build a social-style custom content feed in Bubble with a follow system, chronological and weighted feed algorithms, infinite scroll loading, and interaction buttons for likes, comments, and shares. This tutorial covers the data model for posts and follows, designing the feed UI, implementing feed logic, and adding engagement features.

## Overview: Creating a Custom Content Feed in Bubble

This tutorial shows you how to build a social media-style content feed in Bubble. You will create a follow system where users subscribe to content creators, build a personalized feed showing posts from followed accounts, implement infinite scroll for seamless browsing, and add interactive features like likes, comments, and shares. Ideal for community platforms, social apps, and content-driven sites.

## Before you start

- A Bubble account with an existing app
- User authentication set up
- Basic familiarity with Repeating Groups and workflows in Bubble

## Step-by-step guide

### 1. Create the Post, Follow, Like, and Comment Data Types

Go to the Data tab. Create Post with fields: Author (User), Content (text), Image (image), Created Date (date, auto), Likes Count (number, default 0), Comments Count (number, default 0). Create Follow with: Follower (User), Following (User). Create Like with: User (User), Post (Post). Create Comment with: User (User), Post (Post), Content (text), Created Date (date). This normalized structure keeps the feed performant.

**Expected result:** Four Data Types (Post, Follow, Like, Comment) appear in the Data tab.

### 2. Build the follow and unfollow system

On user profile pages, add a Follow button. Create a workflow: When Follow is clicked, check if a Follow record exists (Search for Follows where Follower equals Current User and Following equals this profile's User). If the count is 0, create a new Follow record. If the count is greater than 0, delete the existing Follow record (unfollow). Toggle the button text between Follow and Unfollow using a conditional that checks the Follow record existence.

**Expected result:** Users can follow and unfollow other users with a toggle button that reflects the current follow state.

### 3. Design the content feed with posts from followed users

Create a feed page with a Repeating Group. Set Type to Post. For the data source, use: Do a Search for Posts where Author is in (Do a Search for Follows where Follower equals Current User, get each item's Following), sorted by Created Date descending. This retrieves posts only from users the current user follows. In each cell, display the author's profile photo, name, post content, image if present, the time since posting using the since operator, and the likes and comments counts.

> Pro tip: Also include Current User's own posts in the feed by using a merged with expression: the followed users' posts merged with Current User's posts, then sorted by date.

**Expected result:** The feed shows posts from followed users sorted by most recent, with author info and engagement counts.

### 4. Implement infinite scroll loading

Set the Repeating Group to use Ext. vertical scrolling mode. Set the initial number of items to load to 10. Configure the additional items to load to 5. This loads 10 posts initially and loads 5 more as the user scrolls to the bottom. For a manual approach, add a Load More button at the bottom that increments a custom state controlling the Repeating Group's List to show count. The Repeating Group's data source stays the same but displays incrementally.

**Expected result:** The feed loads posts incrementally as the user scrolls down, avoiding a single large data load.

### 5. Add like functionality with optimistic updates

In each post cell, add a heart icon button. Create a workflow: When heart is clicked, first check if a Like already exists (Search for Likes where User equals Current User and Post equals this cell's Post). If not liked: create a new Like, then Make changes to the Post incrementing Likes Count by 1. If already liked: delete the Like, then decrement Likes Count by 1. Change the heart icon color using a conditional: when Search for Likes (User equals Current User, Post equals Current cell's Post) count is greater than 0, set color to red.

**Expected result:** Users can like and unlike posts with the heart icon toggling between filled red and outline, with the count updating instantly.

### 6. Build the comment system under each post

Below each post in the Repeating Group cell, add a collapsible Group for comments. Inside, add a nested Repeating Group (Type: Comment, source: Search for Comments where Post equals this cell's Post, sorted by Created Date ascending). Display each comment's author name, content, and time. Below the comments, add an Input and a Post Comment button. The workflow: Create a new Comment (User equals Current User, Post equals parent cell's Post, Content equals Input's value), then Make changes to the Post incrementing Comments Count by 1, then Reset relevant inputs.

**Expected result:** Users can view and post comments on each feed item, with the comment count updating in real time.

## Complete code example

File: `Workflow summary`

```text
CUSTOM CONTENT FEED — WORKFLOW SUMMARY
=======================================

DATA TYPES:
  Post: Author (User), Content (text), Image (image),
        Likes Count (number), Comments Count (number)
  Follow: Follower (User), Following (User)
  Like: User (User), Post (Post)
  Comment: User (User), Post (Post), Content (text)

FEED DATA SOURCE:
  Search Posts where Author is in
    (Search Follows where Follower = Current User
     → each item's Following)
  Merged with: Search Posts where Author = Current User
  Sort: Created Date descending

WORKFLOW: Follow/Unfollow
  If no Follow exists → Create Follow
  If Follow exists → Delete Follow

WORKFLOW: Like/Unlike
  If no Like exists:
    1. Create Like (User, Post)
    2. Post's Likes Count + 1
  If Like exists:
    1. Delete Like
    2. Post's Likes Count - 1

WORKFLOW: Post Comment
  1. Create Comment (User, Post, Content)
  2. Post's Comments Count + 1
  3. Reset inputs

WORKFLOW: Create Post
  1. Create Post (Author=Current User, Content, Image)
  2. Reset inputs

INFINITE SCROLL:
  RG mode: Ext. vertical scrolling
  Initial items: 10
  Load more: 5 items per scroll
```

## Common mistakes

- **Running a Do a Search for inside each Repeating Group cell for likes and comments counts** — This creates N+1 queries (one per post displayed), dramatically slowing the feed as post count grows Fix: Store Likes Count and Comments Count as fields on the Post and update them when likes or comments are added/removed
- **Not preventing duplicate likes** — Without a check, rapid clicking creates multiple Like records for the same user and post, inflating the count Fix: Always search for an existing Like before creating a new one, and add an Only when condition on the like workflow
- **Loading all posts at once without pagination or infinite scroll** — A feed with hundreds of posts loads slowly and consumes excessive workload units and browser memory Fix: Use Ext. vertical scrolling mode or manual Load More pagination to load posts incrementally

## Best practices

- Store engagement counts (likes, comments) directly on the Post to avoid nested searches in the feed
- Use Ext. vertical scrolling for infinite scroll behavior in the feed Repeating Group
- Limit initial feed load to 10-15 posts for fast page rendering
- Add Privacy Rules so users only see posts from public profiles or users they follow
- Include the current user's own posts in their feed for a complete experience
- Use optimistic UI updates for likes so the icon changes instantly before the database write completes
- Pre-compute popular or trending posts in a Backend Workflow for a weighted feed algorithm

## Frequently asked questions

### How do I show a 'No posts yet' message when the feed is empty?

Add a Group below the Repeating Group with a conditional: when the Repeating Group's List of Posts count is 0, show this element. Include a message like 'Follow some users to see posts here' with a link to discover users.

### Can I add a trending or recommended feed tab?

Yes. Create a second data source that searches all Posts sorted by Likes Count descending or filtered to the last 24 hours. Use a tab system to switch the Repeating Group's data source between Following and Trending.

### How do I handle posts with images and posts without images?

Add a conditional on the Image element in the cell: when Current cell's Post's Image is empty, collapse this element. This hides the image area for text-only posts.

### Can I add a share feature?

Yes. Add a Share button that copies the post URL to the clipboard using a JavaScript workflow action. For social sharing, construct share URLs for Twitter, Facebook, and LinkedIn with the post link as a parameter.

### Can RapidDev help build a full social platform?

Yes. RapidDev can help you build comprehensive social features including algorithmic feeds, real-time messaging, stories, push notifications, content moderation, and performance optimization for high-traffic social apps.

### How do I prevent spam posts in the feed?

Add rate limiting by checking how many posts the Current User has created in the last hour. Block creation if the count exceeds a threshold. For content moderation, add a Status field with values like Published and Flagged, and review flagged posts in an admin panel.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-a-custom-content-feed-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-a-custom-content-feed-in-bubble