How to Build a Personalized Shopping Experience in FlutterFlow

Create a `user_behavior` collection where each document ID matches the user's UID. Add fields: recentViews (Array of Maps, each with productId, category, and viewedAt), purchaseCategories (Array of Strings — categories the user has bought from), searchTerms (Array of Strings — recent search queries), topCategory (String — most frequent category from views and purchases), and interactionCount (int — total tracked interactions). On every product detail page load, add a Custom Action that appends to the recentViews array using FieldValue.arrayUnion with the product details. Cap the array at 20 items by using a Cloud Function that trims older entries.

On the homepage, add a 'Recently Viewed' section header with a horizontal ListView. Read the current user's user_behavior document and extract the recentViews array. For each entry, query the products collection by productId to get the full product details. Display each product in a compact Container card within the horizontal list showing the product image, name, and price. If recentViews is empty (new user), hide the entire section using Conditional Visibility that checks recentViews length > 0. Order items by viewedAt descending so the most recently viewed product appears first.

Create a Cloud Function named generateRecommendations triggered on a schedule (hourly) or on user_behavior document update. The function reads the user's purchaseCategories and topCategory fields. It queries the products collection for items in those categories that the user has NOT already viewed (exclude productIds from recentViews). Rank by popularity score descending and write the top 10 product IDs to a `users/{uid}/recommendations` document. In FlutterFlow, add a 'Recommended For You' section on the homepage with a horizontal ListView bound to a Backend Query that fetches products by IDs from the recommendations document. The section title can be personalized: 'Because You Bought [category]'.

1// Cloud Function: generateRecommendations
2exports.generateRecommendations = functions.firestore
3  .document('user_behavior/{userId}')
4  .onWrite(async (change, context) => {
5    const userId = context.params.userId;
6    const behavior = change.after.data();
7    if (!behavior) return;
8
9    const viewedIds = (behavior.recentViews || [])
10      .map(v => v.productId);
11    const categories = behavior.purchaseCategories || [];
12    const topCat = behavior.topCategory;
13
14    const targetCats = topCat
15      ? [topCat, ...categories] : categories;
16    const uniqueCats = [...new Set(targetCats)]
17      .slice(0, 3);
18
19    if (uniqueCats.length === 0) return;
20
21    const products = await db
22      .collection('products')
23      .where('category', 'in', uniqueCats)
24      .orderBy('popularity', 'desc')
25      .limit(20)
26      .get();
27
28    const recommended = products.docs
29      .filter(d => !viewedIds.includes(d.id))
30      .slice(0, 10)
31      .map(d => d.id);
32
33    await db.doc(`users/${userId}/recommendations/main`)
34      .set({
35        productIds: recommended,
36        category: uniqueCats[0],
37        updatedAt: admin.firestore.FieldValue
38          .serverTimestamp(),
39      });
40  });

Create a `banners` collection with documents for each promotional banner containing: imageUrl (String), title (String), targetCategory (String), linkProductId or linkCategory (String), and priority (int). On the homepage, query banners ordered by priority descending. Filter the results using a Custom Function that prioritizes banners matching the user's topCategory from user_behavior. If the user's top category is 'Electronics', show the Electronics sale banner first. For new users with no topCategory, show the default highest-priority banner. Display the banner as a full-width Container with the image, overlaid title text, and a tap action that navigates to the linked product or category page.

Add a third homepage section titled 'Trending in [category]' where [category] is the user's topCategory. Query products where category equals the user's topCategory, ordered by a trendingScore or recentSalesCount descending, limited to 10. Display in a horizontal ListView like the other sections. For new users (interactionCount < 5 or topCategory is null), show a 'Popular Right Now' fallback section instead. This queries products ordered by popularity descending across all categories. Use Conditional Visibility to switch between the personalized and fallback sections based on the interactionCount threshold.

Create a scheduled Cloud Function named checkAbandonedCarts that runs every 6 hours. The function queries users with non-empty cart App State (stored in a `carts` collection with userId, items array, and lastUpdatedAt). For carts not updated in 24 hours where no matching order exists, compose and send a reminder email using SendGrid or Firebase Extensions with a personalized message listing the cart items, their images, and a deep link back to the checkout page. Record the reminder in a `cart_reminders` collection to avoid sending duplicate emails. Limit to one reminder per abandoned cart.

1// Cloud Function: checkAbandonedCarts
2exports.checkAbandonedCarts = functions.pubsub
3  .schedule('every 6 hours')
4  .onRun(async () => {
5    const cutoff = new Date();
6    cutoff.setHours(cutoff.getHours() - 24);
7
8    const carts = await db.collection('carts')
9      .where('lastUpdatedAt', '<',
10        admin.firestore.Timestamp.fromDate(cutoff))
11      .where('itemCount', '>', 0)
12      .get();
13
14    for (const cartDoc of carts.docs) {
15      const cart = cartDoc.data();
16      // Check if reminder already sent
17      const existing = await db
18        .collection('cart_reminders')
19        .where('cartId', '==', cartDoc.id)
20        .limit(1).get();
21      if (!existing.empty) continue;
22
23      // Send email via SendGrid
24      // ... email sending logic with cart items
25
26      await db.collection('cart_reminders').add({
27        cartId: cartDoc.id,
28        userId: cart.userId,
29        sentAt: admin.firestore.FieldValue
30          .serverTimestamp(),
31      });
32    }
33  });