Creating a newsfeed in Bubble involves aggregating posts from followed users and topics, displaying them chronologically with timestamps, implementing pull-to-refresh and infinite scroll, and adding real-time notifications for new content. This tutorial covers the database design for a follow-based feed, efficient querying strategies, pagination with infinite scroll, and a notification banner for newly available posts.
Overview: Creating a Newsfeed in Bubble
This tutorial shows how to build a social-style newsfeed that aggregates posts from users and topics the current user follows, with chronological display, infinite scroll, and real-time new content notifications.
Prerequisites
- A Bubble app with user authentication
- A Post Data Type (or similar content type)
- Understanding of Bubble Repeating Groups and workflows
- Basic understanding of custom states
Step-by-step guide
Design the newsfeed database schema
Design the newsfeed database schema
Create or update these Data Types: Post — fields: author (User), content (text), images (list of images), like_count (number), comment_count (number). Following — fields: follower (User), followed (User). Optionally, TopicFollow — fields: user (User), topic (Option Set: Topic). The Following junction table tracks who follows whom. The newsfeed query will use this to filter posts to only those from followed users.
Expected result: Your database supports posts, user following relationships, and optional topic follows.
Build the newsfeed Repeating Group query
Build the newsfeed Repeating Group query
Add a Repeating Group to your feed page. The data source query: Do a Search for Posts where author is in (Do a Search for Followings where follower = Current User's followed users list), sorted by Created Date descending. This finds all posts by users the current person follows. For better performance with large followings, consider a FeedItem Data Type that pre-computes which posts appear in each user's feed (fan-out-on-write pattern). Set the Repeating Group to display 10 items per page initially.
Pro tip: The nested search pattern (posts where author is in followed users list) works for small-to-medium apps. For apps with 1000+ followers per user, pre-compute the feed using backend workflows.
Expected result: The Repeating Group displays posts from followed users in reverse chronological order.
Add infinite scroll pagination
Add infinite scroll pagination
Set the Repeating Group to show 10 items initially. To implement infinite scroll, detect when the user scrolls to the bottom using a visible marker element at the end of the list. When the marker becomes visible (using a 'Do when condition is true' event watching the marker's visibility), increase a page custom state for item count by 10 and update the Repeating Group's item count. Alternatively, use a Load More button at the bottom that increments the count. Show a loading spinner during data fetching.
Expected result: Users can scroll continuously through their feed with new posts loading automatically.
Show a notification for new posts
Show a notification for new posts
Create a custom state 'last_loaded_time' (date) set to Current date/time when the feed first loads. Add a 'Do when condition is true' event with an interval that checks: Do a Search for Posts where author is in followed users AND Created Date > last_loaded_time :count > 0. When new posts exist, show a banner at the top of the feed: 'X new posts — click to refresh.' Clicking the banner scrolls to the top, resets the Repeating Group data source, and updates last_loaded_time.
Expected result: Users see a notification banner when new posts are available without losing their scroll position.
Complete working example
1NEWSFEED ARCHITECTURE2======================34DATA TYPES:5 Post: author (User), content, images, like_count, comment_count6 Following: follower (User), followed (User)7 TopicFollow (optional): user (User), topic (Option Set)89FEED QUERY:10 Do a Search for Posts where:11 author is in [Search Followings where follower = Current User]'s followed12 Sorted by: Created Date descending13 Items per page: 10 (infinite scroll adds more)1415INFINITE SCROLL:16 Page state: visible_count (number, default 10)17 Repeating Group: show visible_count items18 Bottom marker visible → Set visible_count + 1019 Show loading spinner during load2021NEW POST NOTIFICATION:22 Page state: last_loaded_time (date)23 Do when condition (every 30 sec):24 Check: new posts since last_loaded_time25 If found: Show banner 'X new posts'26 Banner click: Refresh feed, update last_loaded_time2728POST CELL LAYOUT:29 Author avatar + name + timestamp30 Content text31 Images (horizontal gallery)32 Like button + count | Comment button + count | ShareCommon mistakes when creating a newsfeed in Bubble.io: Step-by-Step Guide
Why it's a problem: Loading all posts at once without pagination
How to avoid: Paginate with infinite scroll, loading 10-20 posts at a time
Why it's a problem: Using client-side :filtered instead of database constraints for the feed query
How to avoid: Use database constraints (author is in followed users list) to filter server-side
Why it's a problem: Not showing when new posts are available
How to avoid: Periodically check for posts newer than the last loaded time and show a notification banner
Best practices
- Paginate the feed with infinite scroll (10-20 posts per batch)
- Use database constraints for filtering, not client-side :filtered
- Show a new posts notification banner instead of auto-refreshing
- Pre-compute feed items for users with large followings (fan-out pattern)
- Cache the followed users list in a custom state to avoid re-searching
- Display relative timestamps (2 hours ago) for recent posts
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build a Twitter-style newsfeed in Bubble.io that shows posts from people I follow in chronological order. I need infinite scroll and a notification when new posts are available. How do I design the database and feed query?
Create a newsfeed page with a Repeating Group showing posts from followed users sorted by newest first. Add infinite scroll that loads 10 more posts when scrolling to the bottom. Add a banner at the top that appears when new posts are available since the page loaded.
Frequently asked questions
How do I handle feeds for users following thousands of people?
For large followings, pre-compute the feed: when a user creates a post, a backend workflow creates a FeedItem record for each of the author's followers. The feed query then simply searches FeedItem where user = Current User.
Can I mix posts from followed users and topics?
Yes. Expand the feed query to include posts where the topic matches any of the user's followed topics. Use the :merged with operator to combine both result sets.
How do I show trending posts alongside the chronological feed?
Add a sidebar or tab showing posts sorted by like_count or engagement from the past 24 hours, regardless of follow relationships.
Does Bubble auto-update the feed in real time?
Yes. Repeating Groups with database searches auto-update via WebSocket when records change. However, this can cause layout jumps. A new post notification banner gives users more control.
Can RapidDev help build a social newsfeed in Bubble?
Yes. RapidDev can build optimized newsfeeds with follow-based filtering, infinite scroll, real-time notifications, engagement features, and performance optimization for your Bubble app.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation