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.
Prerequisites
- A Bubble account with an existing app
- User authentication set up
- Basic familiarity with Repeating Groups and workflows in Bubble
Step-by-step guide
Create the Post, Follow, Like, and Comment Data Types
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.
Build the follow and unfollow system
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.
Design the content feed with posts from followed users
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.
Implement infinite scroll loading
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.
Add like functionality with optimistic updates
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.
Build the comment system under each post
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 working example
1CUSTOM CONTENT FEED — WORKFLOW SUMMARY2=======================================34DATA TYPES:5 Post: Author (User), Content (text), Image (image),6 Likes Count (number), Comments Count (number)7 Follow: Follower (User), Following (User)8 Like: User (User), Post (Post)9 Comment: User (User), Post (Post), Content (text)1011FEED DATA SOURCE:12 Search Posts where Author is in13 (Search Follows where Follower = Current User14 → each item's Following)15 Merged with: Search Posts where Author = Current User16 Sort: Created Date descending1718WORKFLOW: Follow/Unfollow19 If no Follow exists → Create Follow20 If Follow exists → Delete Follow2122WORKFLOW: Like/Unlike23 If no Like exists:24 1. Create Like (User, Post)25 2. Post's Likes Count + 126 If Like exists:27 1. Delete Like28 2. Post's Likes Count - 12930WORKFLOW: Post Comment31 1. Create Comment (User, Post, Content)32 2. Post's Comments Count + 133 3. Reset inputs3435WORKFLOW: Create Post36 1. Create Post (Author=Current User, Content, Image)37 2. Reset inputs3839INFINITE SCROLL:40 RG mode: Ext. vertical scrolling41 Initial items: 1042 Load more: 5 items per scrollCommon mistakes when creating a custom content feed in Bubble.io: Step-by-Step Guide
Why it's a problem: Running a Do a Search for inside each Repeating Group cell for likes and comments counts
How to avoid: Store Likes Count and Comments Count as fields on the Post and update them when likes or comments are added/removed
Why it's a problem: Not preventing duplicate likes
How to avoid: Always search for an existing Like before creating a new one, and add an Only when condition on the like workflow
Why it's a problem: Loading all posts at once without pagination or infinite scroll
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a social content feed in Bubble.io with a follow system, infinite scroll, likes, and comments. How should I structure the data types and build the feed query?
Create a content feed page that shows posts from users the current user follows. Each post should display the author, content, image, like button, and comment section. Use infinite scroll to load posts incrementally.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation