How to Build a Custom Social Feed with User Interactions in FlutterFlow

Extend your posts collection with fields: likeCount (Integer), commentCount (Integer), shareCount (Integer), saveCount (Integer). Create subcollections under each post: likes (userId, timestamp), comments (userId, body, timestamp, parentCommentId nullable for threading, upvotes Integer), saves (userId, timestamp), and reports (userId, reason, timestamp). Create a user-level saved_posts subcollection under users/{uid} with fields: postId (String), savedAt (Timestamp) for a personal bookmark collection. Add Firestore indexes on comments for parentCommentId and timestamp ordering.

Wrap each post card in a GestureDetector Custom Widget configured for onDoubleTap. On double-tap, check if a like document already exists for the current user in the post's likes subcollection. If not, create the like document and increment likeCount using FieldValue.increment(1). Display a heart animation overlay: use a Stack containing the post content and an AnimatedOpacity heart Icon that appears on double-tap, scales up, then fades out over 800 milliseconds. Also add a heart IconButton below the post that toggles the like on single tap. The icon should be filled (red) if the user has liked the post and outlined if not, determined by querying the likes subcollection.

Add a comment IconButton below each post. On tap, open a BottomSheet displaying the comments panel. The panel has a ListView at the top querying the post's comments subcollection where parentCommentId is null, ordered by timestamp descending. These are top-level comments. Under each top-level comment, add a nested ListView querying comments where parentCommentId equals the parent comment ID, ordered by timestamp ascending. Indent reply comments by adding 32 pixels of left padding. Each comment shows the user avatar, name, body text, timestamp, and a Reply button. Cap nesting at 2 levels: replies to replies show as flat within the second level with an '@username' prefix. Pin a TextField with a Send button at the bottom of the BottomSheet for composing new comments.

For bookmarks, add a bookmark IconButton on each post. On tap, check if a save document exists in the post's saves subcollection for the current user. If not, create it and also create a document in the user's saved_posts subcollection with the postId. Toggle the icon between filled bookmark (saved) and outlined bookmark (not saved). For a Saved Posts page, query the user's saved_posts subcollection and display the corresponding posts. For reporting, add a three-dot menu IconButton that opens a PopupMenuButton with a Report option. Tapping Report opens a BottomSheet with a reason selection: DropDown with options like Spam, Harassment, Inappropriate Content, Misinformation, and Other. Add a TextField for additional details. Submit creates a report document under the post and shows a SnackBar confirmation.

Create Cloud Functions triggered by writes to the interaction subcollections. On new like: increment likeCount on the post document. On like delete: decrement likeCount. Apply the same pattern for commentCount and saveCount. A Cloud Function also calculates an engagement rate for each post: (likeCount + commentCount + shareCount) divided by impression count. Store this as an engagementRate field on the post document. Use this rate for ranking posts in the feed — query posts ordered by a composite of recency and engagementRate. Add a notification trigger: when a post receives a new like or comment, create a notification document for the post author.

Create the FeedPage with a ListView querying posts ordered by timestamp descending with real-time listening enabled. Each post card is a Component containing: the author avatar and name row at the top, the post content and image in the middle, an interaction row at the bottom with like IconButton (with count), comment IconButton (with count), share IconButton, and bookmark IconButton. Wrap the entire post card in the GestureDetector for double-tap like. Add a Stack for the heart animation overlay. Below the interaction row, show a Text widget with 'Liked by {count} people' that taps to show a list of likers. Add pull-to-refresh on the ListView to reload the feed.