# How to create a newsfeed 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

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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 code example

File: `Workflow summary`

```text
NEWSFEED ARCHITECTURE
======================

DATA TYPES:
  Post: author (User), content, images, like_count, comment_count
  Following: follower (User), followed (User)
  TopicFollow (optional): user (User), topic (Option Set)

FEED QUERY:
  Do a Search for Posts where:
    author is in [Search Followings where follower = Current User]'s followed
  Sorted by: Created Date descending
  Items per page: 10 (infinite scroll adds more)

INFINITE SCROLL:
  Page state: visible_count (number, default 10)
  Repeating Group: show visible_count items
  Bottom marker visible → Set visible_count + 10
  Show loading spinner during load

NEW POST NOTIFICATION:
  Page state: last_loaded_time (date)
  Do when condition (every 30 sec):
    Check: new posts since last_loaded_time
    If found: Show banner 'X new posts'
  Banner click: Refresh feed, update last_loaded_time

POST CELL LAYOUT:
  Author avatar + name + timestamp
  Content text
  Images (horizontal gallery)
  Like button + count | Comment button + count | Share
```

## Common mistakes

- **Loading all posts at once without pagination** — A feed with hundreds of posts loads all of them simultaneously, causing extreme slowness and high workload unit consumption Fix: Paginate with infinite scroll, loading 10-20 posts at a time
- **Using client-side :filtered instead of database constraints for the feed query** — :filtered downloads ALL posts and filters in the browser. Database constraints only return matching posts from the server Fix: Use database constraints (author is in followed users list) to filter server-side
- **Not showing when new posts are available** — Without a new post indicator, users must manually refresh to see new content, leading to a stale-feeling feed Fix: 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

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

---

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