How to Create a Personalized Content Feed in FlutterFlow

Create a page called 'InterestSelectionPage'. Add a GridView with a Backend Query on a Firestore 'topics' collection (documents with fields: id, name, emoji, color). Each grid item is a Component called 'TopicChip' with a toggle state: tapped chips show a filled background in the topic's color with a checkmark; untapped chips show an outlined card. Store the selected topic IDs in a Page State List variable called 'selectedTopics'. At the bottom, add a 'Continue' button that is disabled when selectedTopics is empty. Its action flow writes the selectedTopics array to the current user's Firestore document at users/{uid}/interests, then triggers your Cloud Function to build the initial feed, then navigates to the main feed page.

Your 'content' collection needs these fields per document: title (String), body (String), image_url (String), topics (Array of Strings — topic IDs), author_id (String), created_at (Timestamp), view_count (Integer), like_count (Integer), share_count (Integer), and engagement_score (Float — updated by a Cloud Function). Create a second collection called 'user_feeds'. Each document in user_feeds uses the user's UID as the document ID. The document has a single field called 'feed' — an Array of Strings containing content document IDs in ranked order, and a last_computed Timestamp. The FlutterFlow app queries user_feeds/{uid} to get the ordered ID array, then fetches content documents by those IDs.

Create a Firebase Cloud Function called 'computeUserFeed'. It can be triggered in two ways: as an HTTP callable (called directly from FlutterFlow when interests change) and as a Firestore trigger on content document creation. The function fetches the user's interests array, fetches all published content (use a query limit — start with 200 most recent), scores each content item, sorts by score, and writes the top 50 IDs to user_feeds/{uid}. The scoring formula weighs: interest match (are any of the content's topics in the user's interests? +40 points per match), recency (+30 points if published today, +20 if this week, +10 if this month), engagement score (+20 points scaled 0-20 based on total interactions), and diversity penalty (-15 points if the last 3 feed items have the same topic as this one).

1// functions/computeUserFeed.js
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4
5// Score a content item for a user's interests
6function scoreContent(content, userInterests) {
7  let score = 0;
8  const topics = content.topics || [];
9  // Interest match: +40 per matching topic
10  const matches = topics.filter(t => userInterests.includes(t)).length;
11  score += matches * 40;
12  // Recency bonus
13  const ageMs = Date.now() - content.created_at.toMillis();
14  const ageDays = ageMs / (1000 * 60 * 60 * 24);
15  if (ageDays < 1) score += 30;
16  else if (ageDays < 7) score += 20;
17  else if (ageDays < 30) score += 10;
18  // Engagement bonus (0-20 points)
19  const engagementScore = content.engagement_score || 0;
20  score += Math.min(engagementScore, 20);
21  return score;
22}
23
24exports.computeUserFeed = functions.https.onCall(async (data, context) => {
25  if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Must be signed in');
26  const uid = context.auth.uid;
27  const db = admin.firestore();
28  // Get user interests
29  const userDoc = await db.collection('users').doc(uid).get();
30  const interests = userDoc.data()?.interests || [];
31  if (interests.length === 0) return { success: false, reason: 'No interests set' };
32  // Fetch recent content
33  const contentSnap = await db.collection('content')
34    .orderBy('created_at', 'desc')
35    .limit(200)
36    .get();
37  // Score and sort
38  const scored = contentSnap.docs.map(doc => ({
39    id: doc.id,
40    score: scoreContent(doc.data(), interests),
41    topics: doc.data().topics || []
42  }));
43  scored.sort((a, b) => b.score - a.score);
44  // Apply diversity: avoid 3+ consecutive same-topic items
45  const feed = [];
46  const recentTopics = [];
47  for (const item of scored) {
48    if (feed.length >= 50) break;
49    const topicOverlap = item.topics.filter(t => recentTopics.slice(-3).includes(t)).length;
50    if (topicOverlap > 0 && feed.length > 3) continue;
51    feed.push(item.id);
52    recentTopics.push(...item.topics);
53  }
54  await db.collection('user_feeds').doc(uid).set({
55    feed,
56    last_computed: admin.firestore.FieldValue.serverTimestamp()
57  });
58  return { success: true, count: feed.length };
59});

On your main feed page, add a Backend Query that fetches the single document from user_feeds/{current_user_uid}. Store the result in a page variable. Then add a ListView whose children are built from the feed array. Since Firestore does not support ordered-by-array-position queries, use a Custom Action called 'fetchFeedContent' that reads the feed ID array and performs multiple document fetches (using getAll in batches of 10) returning a List of content maps in the correct order. Bind this list to the ListView. Each list item is a 'ContentCard' Component showing the title, image, topic tags, author, time ago, and like/view counts.

Implicit feedback — what users actually engage with — is more reliable than explicit interest selection. Track two events: a view event (logged when a content card is visible for more than 2 seconds using a Custom Action with a Timer) and an interaction event (tap, like, share). In your ContentCard component's onVisible action, start a 2-second timer; if the card is still visible after 2 seconds, call a Cloud Function 'trackFeedEvent' with event_type: 'view', content_id, and user_id. In the like/share button actions, call the same function with event_type: 'interaction'. The Cloud Function updates the content's engagement_score and increments view_count or like_count in Firestore.