How to Build a Behavior-Based Product Recommendation System in FlutterFlow

Create a user_events collection with fields: userId (String), productId (String), eventType (String: 'view', 'addToCart', 'purchase', 'wishlist'), category (String, denormalized from product), timestamp (Timestamp). Create a subcollection users/{uid}/product_recommendations with fields: productId (String), score (double), reason (String, e.g., 'Customers who viewed X also bought this'), updatedAt (Timestamp). The events collection captures raw behavior data. The recommendations subcollection stores pre-computed results for instant reads. Keep the event weights different: purchase = 10 points, addToCart = 5, wishlist = 3, view = 1.

Add event logging at key interaction points using Action Flows. On product detail page load: create a user_events document with eventType 'view'. On Add to Cart button tap: create an event with 'addToCart'. On successful order completion: create events with 'purchase' for each item in the order. On wishlist toggle: create an event with 'wishlist'. Each event includes the userId, productId, product category (for category-level recommendations), and the current timestamp. Keep event logging as a non-blocking action: do not await the Firestore write so it does not slow down the user's interaction.

Deploy a scheduled Cloud Function called computeRecommendations that runs every 6 hours. For each active user (has events in the last 30 days), the function: (1) Gets the user's recent product interactions weighted by event type. (2) For each product the user interacted with, finds other users who also interacted with that product. (3) Gets products those other users interacted with that the current user has NOT seen. (4) Scores each candidate product by how many co-users interacted with it, weighted by their event types. (5) Writes the top 10 scored products to the user's product_recommendations subcollection with the score and a reason string explaining the connection.

1// Cloud Function: computeRecommendations (simplified)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6const WEIGHTS = { purchase: 10, addToCart: 5, wishlist: 3, view: 1 };
7
8exports.computeRecommendations = functions.pubsub
9  .schedule('every 6 hours').onRun(async () => {
10    const db = admin.firestore();
11    const thirtyDaysAgo = new Date(Date.now() - 30 * 86400000);
12    
13    // Get active users
14    const activeEvents = await db.collection('user_events')
15      .where('timestamp', '>', thirtyDaysAgo)
16      .get();
17    
18    const userProducts = {}; // userId -> [{productId, weight}]
19    activeEvents.forEach(doc => {
20      const e = doc.data();
21      if (!userProducts[e.userId]) userProducts[e.userId] = {};
22      const w = WEIGHTS[e.eventType] || 1;
23      userProducts[e.userId][e.productId] =
24        (userProducts[e.userId][e.productId] || 0) + w;
25    });
26    
27    for (const [userId, products] of Object.entries(userProducts)) {
28      const userProductIds = Object.keys(products);
29      const candidates = {};
30      
31      // Find co-users and their products
32      for (const pid of userProductIds.slice(0, 20)) {
33        const coEvents = await db.collection('user_events')
34          .where('productId', '==', pid)
35          .where('userId', '!=', userId)
36          .limit(50).get();
37        
38        for (const doc of coEvents.docs) {
39          const ce = doc.data();
40          if (!userProductIds.includes(ce.productId)) {
41            // This is unseen by our user — not in their products
42          }
43          // Get co-user's other products
44          const coUserEvents = await db.collection('user_events')
45            .where('userId', '==', ce.userId)
46            .limit(20).get();
47          coUserEvents.forEach(d => {
48            const oe = d.data();
49            if (!userProductIds.includes(oe.productId)) {
50              if (!candidates[oe.productId]) {
51                candidates[oe.productId] = { score: 0, reason: pid };
52              }
53              candidates[oe.productId].score += WEIGHTS[oe.eventType] || 1;
54            }
55          });
56        }
57      }
58      
59      // Write top 10
60      const top10 = Object.entries(candidates)
61        .sort((a, b) => b[1].score - a[1].score)
62        .slice(0, 10);
63      
64      const batch = db.batch();
65      // Clear old recommendations
66      const oldRecs = await db.collection('users').doc(userId)
67        .collection('product_recommendations').get();
68      oldRecs.forEach(d => batch.delete(d.ref));
69      
70      for (const [prodId, data] of top10) {
71        const ref = db.collection('users').doc(userId)
72          .collection('product_recommendations').doc(prodId);
73        batch.set(ref, {
74          productId: prodId,
75          score: data.score,
76          reason: `Because you viewed a related product`,
77          updatedAt: admin.firestore.FieldValue.serverTimestamp(),
78        });
79      }
80      await batch.commit();
81    }
82  });

On the home page, add a section titled Recommended for You. Add a horizontal ListView bound to a Backend Query on the current user's product_recommendations subcollection, ordered by score descending, limited to 10. For each recommendation, fetch the product document using the productId to get the product image, name, and price. Display each as a card in the horizontal list: product image (using the CachedImage or thumbnail URL), product name, price, and a small Text showing the reason (e.g., 'Because you viewed Wireless Headphones'). Tapping a card navigates to the product detail page. If the user has no recommendations yet (new user), show a Popular Products section as a fallback.

On the product detail page, add a section below the product information titled Customers Also Bought. This uses a different approach than the personalized recommendations: query user_events where productId equals the current product and eventType equals 'purchase'. Collect the userIds of those buyers. Then query their other purchase events to find the most commonly co-purchased products. This can be pre-computed by a Cloud Function that maintains a co_purchases map on each product document: a map of productId to co-purchase count. Display the top 5 co-purchased products as a horizontal ListView with product cards. This section is the same for all users viewing this product, unlike the personalized home page carousel.