How to Build a Social Networking Site in Bubble

Open the Data tab and create the following Data Types. First, extend the built-in User type by adding these fields: display_name (text), bio (text), avatar (image), cover_photo (image), followers_count (number, default 0), following_count (number, default 0). Next, create a 'Follow' Data Type with two fields: follower (User) and following (User). Create a 'Post' Data Type: author (User), content (text), image (image), visibility (text, default 'public'), likes_count (number, default 0), comments_count (number, default 0). Create a 'Like' Data Type: post (Post), user (User). Finally, create a 'Comment' Data Type: post (Post), author (User), content (text). Using a separate Follow Data Type instead of a list on User keeps the database fast even as your network grows.

Create a new page called 'profile' and set its Type of content to User. At the top, add a Group element with the cover_photo displayed as a background image. Inside it, place a circular Image element showing the avatar, a Text element for display_name, and a smaller Text element for bio. Below, display two counts: 'X followers' (Do a search for Follow where following = This page's User :count) and 'X following' (Do a search for Follow where follower = This page's User :count). Add an 'Edit Profile' button with a conditional: This button is visible only when Current User is This page's User. When clicked, show a Popup element containing Input fields for display_name, bio, a File Uploader for avatar, and a File Uploader for cover_photo. The Save button workflow: Make changes to Current User -- set display_name, bio, avatar, and cover_photo to the corresponding input values -- then hide the popup and reset the inputs.

On the profile page, add a Follow button visible only when This page's User is not Current User. Add two conditionals on the button. Conditional 1: When Do a search for Follow (follower = Current User, following = This page's User) :count is 0, set the button text to 'Follow' with a filled style. Conditional 2: When the same search count is greater than 0, set the button text to 'Unfollow' with an outline style. Create two workflows on this button. Workflow 1 (Follow): Only when the search count is 0, create a new Follow record (follower = Current User, following = This page's User), then Make changes to This page's User (followers_count + 1) and Make changes to Current User (following_count + 1). Workflow 2 (Unfollow): Only when the search count is greater than 0, search for the Follow record and delete it via :first item, then decrement both users' counts by 1.

Create a new page called 'feed'. At the top, add a posting form: a Multiline Input for text content, a File Uploader for an optional image, a Dropdown sourced from the PostVisibility Option Set, and a 'Post' button. The Post button workflow: Create a new Post -- author = Current User, content = Multiline Input's value, image = File Uploader's value, visibility = Dropdown's value -- then reset the form inputs. Below the form, add a Repeating Group with type Post. Set the data source to: Do a search for Post where author is in (Do a search for Follow where follower = Current User :each item's following), sorted by Created Date descending. In each cell, display the author's avatar (linked to their profile page), display_name, the post content, the image (only visible when image is not empty), a timestamp formatted as a relative date, likes_count, and comments_count. Set the Repeating Group to show 15 items per page.

In each Repeating Group cell, add a heart Icon element as the like button. Set a conditional: when Do a search for Like (post = Current cell's Post, user = Current User) :count is greater than 0, change the icon color to red and set the icon to a filled heart. Create a workflow on the icon: Step 1 (Only when not liked): Create a new Like (post = Current cell's Post, user = Current User) and Make changes to Current cell's Post (likes_count + 1). Step 2 (Only when already liked): Delete the Like record via search :first item and decrement likes_count by 1. Below the post content, add a 'View X comments' link that toggles a collapsible Group. Inside the group, place a nested Repeating Group searching for Comments where post = Current cell's Post, sorted by Created Date ascending. At the bottom of this group, add an Input and a Reply button. The Reply workflow: Create a new Comment (post = Current cell's Post, author = Current User, content = Input's value), increment the Post's comments_count by 1, then reset the input.

Go to the Data tab and click the Privacy tab. Select the Post Data Type. Create three privacy rules. Rule 1 -- Public posts: When This Post's visibility is 'Public', all fields are viewable by everyone. Rule 2 -- Friends Only: When This Post's visibility is 'Friends Only', all fields are viewable only when Do a search for Follow (follower = Current User, following = This Post's author) :count is greater than 0, or Current User is This Post's author. Rule 3 -- Only Me: When This Post's visibility is 'Only Me', all fields are viewable only when Current User is This Post's author. For the Like Data Type, allow everyone to view all fields. For the Comment Data Type, allow everyone to view all fields (the parent Post's privacy rule already prevents hidden posts from appearing). These server-side rules automatically filter search results so private posts never appear in feeds or searches for unauthorized users.