How to Create a Social Network with Friend Connections in FlutterFlow

Create a top-level `friend_requests` collection with fields: fromUserId (String), toUserId (String), status (String: pending/accepted/rejected), timestamp (Timestamp). Then, under the existing users collection, add a `friends` subcollection for each user with fields: friendUserId (String), displayName (String), photoUrl (String), connectedAt (Timestamp). Also add a friendCount integer field on the user document for quick display without querying the subcollection. Register these collections in FlutterFlow's Data section.

Create a FindFriends page with a TextField at the top for search input. Below it, add a ListView bound to a Backend Query on the users collection. Use a Search filter on the displayName field with prefix matching (Firestore: where displayName >= searchTerm and displayName < searchTerm + 'z'). Each result shows a CircleImage avatar, displayName Text, and a conditional button: if a pending friend_request exists from the current user to this user, show 'Request Sent' (disabled). If they are already friends, show 'Friends' (disabled). Otherwise, show an 'Add Friend' button. On Add Friend tap, create a friend_requests document with fromUserId as the current user, toUserId as the selected user, status 'pending', and the current timestamp.

Create a FriendRequests page or tab showing incoming requests. Add a ListView bound to a Backend Query on the friend_requests collection filtered by toUserId == currentUser.uid AND status == 'pending', ordered by timestamp descending. Each item shows the sender's CircleImage avatar, displayName, and a Row with Accept (green) and Reject (red) buttons. On Accept tap, execute a sequence of actions: (1) Update the friend_request status to 'accepted'. (2) Create a document in users/{currentUser.uid}/friends with friendUserId = fromUserId, the sender's name and photo, and connectedAt = now. (3) Create a matching document in users/{fromUserId}/friends with friendUserId = currentUser.uid. (4) Increment friendCount on both user documents using FieldValue.increment(1). On Reject tap, simply update the friend_request status to 'rejected'.

On the user's profile page or a dedicated Friends tab, add a GridView bound to a Backend Query on users/{currentUser.uid}/friends ordered by connectedAt descending. Each grid item shows a CircleImage avatar and displayName Text. Wrap each item in a GestureDetector: on tap, navigate to that friend's profile page passing their userId. Add a long-press action that shows a BottomSheet with an Unfriend button. On Unfriend tap, show a confirmation dialog, then delete the friend document from both users' subcollections and decrement friendCount on both user documents. Add a Text above the GridView showing the total friend count from the user document.

On the FindFriends page, add a section above the search results titled 'People You May Know'. To populate this, create a Cloud Function that: (1) reads the current user's friend list, (2) for each friend, reads their friend list, (3) collects users who appear in friends-of-friends but are NOT already the current user's friend and have no pending request, (4) ranks by number of mutual friends, (5) writes the top 10 suggestions to a `friend_suggestions` subcollection on the current user's document. In FlutterFlow, add a horizontal ListView bound to this subcollection. Each item shows the user's avatar, name, a mutual friends count text, and an Add Friend button.