How to Build a Social Networking App with FlutterFlow

Create a users collection with fields: displayName (String), avatarUrl (String), bio (String), followerCount (Integer, default 0), followingCount (Integer, default 0), and followingIds (List of Strings, default empty). Create a posts collection with: authorId (String), content (String), imageUrl (String, optional), likeCount (Integer, default 0), commentCount (Integer, default 0), timestamp (Timestamp). Under each post, create two subcollections: likes with fields userId (String) and timestamp (Timestamp), and comments with fields userId (String), text (String), and timestamp (Timestamp). Under each user, create a following subcollection with a document per followed user containing followedUserId (String) and followedAt (Timestamp). The followingIds array on the user doc is a denormalized list of user IDs they follow, used for feed queries.

Create a HomePage with a ListView bound to a Backend Query on the posts collection, filtered with whereIn on authorId using the current user's followingIds array, ordered by timestamp descending, limit 20 with infinite scroll ON. Each item uses a PostCard Component containing: a Row with CircleImage (author avatar queried from users doc) and Text (author displayName), the post content Text, an optional Image (Conditional Visibility: imageUrl is not empty), and an action Row with IconButton for like (heart icon), Text for likeCount, IconButton for comment, and Text for commentCount. Add a FloatingActionButton for creating new posts. If followingIds is empty, show an empty state with a message suggesting users to find people to follow.

Create a UserProfilePage that receives a userId parameter. Display the user's avatar, displayName, bio, followerCount, and followingCount in a header section. Add a Follow/Unfollow button with Conditional Visibility: show Follow when the current user's followingIds array does not contain this userId, show Unfollow when it does. Follow button On Tap Action Flow: create a document in users/{currentUser.uid}/following with followedUserId, then Update Document on the current user to add the userId to followingIds using FieldValue.arrayUnion and increment followingCount by 1, then Update Document on the target user to increment followerCount by 1. Unfollow reverses this: delete the following doc, FieldValue.arrayRemove on followingIds, decrement both counts with FieldValue.increment(-1). Below the header, add a ListView of this user's posts filtered by authorId.

Create a CreatePostPage or a BottomSheet triggered by the FAB on the home feed. Include a multiline TextField for post content (maxLines 5, hint text 'What is on your mind?') and a FlutterFlowUploadButton for optional image attachment. The Upload button stores the image in Firebase Storage under posts/{userId}/{timestamp}.jpg and returns the download URL. Add a Post button at the bottom. On Tap Action Flow: validate that content is not empty, then Create Document in posts with authorId set to the current user's UID, content from the TextField, imageUrl from the upload result (or empty string if no image), likeCount 0, commentCount 0, and timestamp as server timestamp. After creation, navigate back to the home feed. The real-time feed query picks up the new post automatically.

On the PostCard Component, wire the heart IconButton's On Tap Action Flow: first query posts/{postId}/likes where userId equals currentUser.uid. If a like doc exists, delete it and decrement the post's likeCount by 1 (unlike). If no like doc exists, create one with userId and timestamp, and increment likeCount by 1 (like). Toggle the heart icon between outlined (unliked) and filled red (liked) using Conditional Styling based on the like query result. For comments, tapping the comment IconButton navigates to a CommentsPage showing a ListView of posts/{postId}/comments ordered by timestamp ascending. At the bottom, a TextField with a Send IconButton creates a new comment doc and increments the post's commentCount by 1.