How to Create a Follower System

I am having the darnedest time understanding how to create a follower system. I have been researching for days, have tried all of the advice I’ve previously found on google on the forum and have yet to be able to successfully create a follower system for my site. I have several issues I need to address, but this one is one of the most important at this particular time for the building of my site.
I also plan to split the followers up into 2 separate lists, if that is possible, so that is something I need assistance with as well.

Hey there @hannah.svihus,

Depending on how your data is setup and how you want your follower system to work it’ll vary. If you want something like Instagram and having a followers list, you can simply add a new field within the User data type called Followers, type = user and make it a list.

I’m so sorry, I’m just now seeing this. I actually got it figured out, but thank you so much for the reply. :slight_smile:

Hey @hannah.svihus, I’m having the same issue and I’ve been attempting different approaches in the forum. I’m really curious as to how you got the follower system figured out. Please help.

@edengaitor17 I’d probably create a data type called “Follows” and give the data type 2 fields, both type=user. I’d have one field called “Follower” and another called “Followee” or “Followed”. I think this approach is better than maintaining two long lists per user.

2 Likes

In doing that I get confused and stuck trying to do 3 things:

  1. Display all the user’s followers in a repeating group

  2. Display all the user’s following in a repeating group

  3. Create conditionals to hide and show follow and unfollow buttons based on whether the current user is already following the current page user or not.

I’m also unsure as to whether I have to create an association between the user data type and the followed details data type as they seem to be separate data types.

Below are some images that outlines what I’ve done so far, and perhaps you can let me know if I’ve done everything correctly or whether I need to make some changes.

Also where I am stuck now is with creating a notification that notifies users when someone follows them.

IMAGE #1 Create a Followed List Data Type
followed list data type

IMAGE #2 Create a Follow Button Workflow

IMAGE #3 Create an Unfollow Button Workflow
unfollow button workflow

IMAGE #4 Create a Condition to make Follow Button visible

IMAGE #5 Create a Condition to make Unfollow Button visible

IMAGE #6 Create a page to display a list of Followers in a Repeating Group

IMAGE #7 Create a page to display a list of Following in a Repeating Group

IMAGE #8 Display Number (Count) of Followers

IMAGE #9 Display Number (Count) of Following

UPDATE:
I just tested the follow system from two test users login accounts, and I noticed that when test user 1 is logged in and follows test user 2, everything is fine.

But when test user 2 is logged in and follows test user 1, test user 1 is displayed in both its own followers list and following list when it is logged in

Also, again, I am trying to figure out how to create a notification system that notifies users when someone follows them.

Any suggestions would be greatly appreciated.

And specifically as it relates to the challenge that I have with creating notification alerts:
The outcome I would like is for the color of the notifications button to be yellow when there are new notifications. And when a user clicks on the notifications button, I want the **seen field in the notificication data type ** to change to yes so that the notifications button can turn to white when there are no new unseen notifications.

@edengaitor17 ok, there’s a lot going on here so let’s tackle this in pieces.

First, let’s tackle the DB design and some of your initial questions and then we can talk about the notification system.

Let’s start by adding a field to the DB type you created. This is what I was I was suggesting in my earlier post:

image

You mention there was some confusion about whether you need to create an association between this data type and the user data type. The answer is yes, but it’s a one way association. The above data type points to the User data type but the User Data Type does not point back to the above data type. I hope that makes sense.

Now let’s get to those three items you posted:

1. Display all the user’s followers in a repeating group
(I’m assuming you a have page user and you want to display all the followers of the page user)
Data Type = User
Data Source = Do a search for Follow Records, conditions (person being Followed = current page user) Person who is following

2. Display all the user’s following in a repeating group
(I’m assuming you a have page user and you want to display a list of all the users the page user is following)
Data Type = User
Data Source = Do a search for Follow Records, condition(person who is following = current page user) Person being Followed

3. Create conditionals to hide and show follow and unfollow buttons based on whether the current user is already following the current page user or not.

Follow Button
I’d make the default state of the button unclickable. Then, I’d add these two conditions:

1 - When Do a search for Follow Records, conditions(Person being Followed = current page user | Person who is following = Current User) count = 0

This element is clickable (checked)

2 - When Do a search for Follow Records, conditions(Person being Followed = current page user | Person who is following is Current User) First Item is not empty

Text = Following

(Or hide the button if that’s what you prefer)

Based on this information see if you’re able to handle the unfollow button as well. If you get stuck, I can help you out. Let me know how this goes then we can tackle notifications

2 Likes

Hello @alex.esposito.1108, so far everthing seems to be working. Thank you very much! :grinning_face_with_smiling_eyes:

Here is a display of how I carried out your suggestions. Maybe you can let me know if I truly did as was intended.

IMAGE A: Follow Record Data Type
follow records data type image

IMAGE B: Follow Button Workflow

IMAGE C: Unfollow Button Workflow

IMAGE D: Page to list Followers in a Repeating Group

IMAGE E: Page to list Following in a Repeating Group

IMAGE F: Follow Button Condition

IMAGE G: Unfollow Button Condition

@edengaitor17 that looks good. The first image doesn’t show the data type (it’s just a repeat of the second image) but it seems like you’ve got it set up properly.

Regarding the notifications, can you post an image of the data type and some of the UI you’re using? Do you have a dedicated page to display notifications? Is it a dropdown repeating group in the header? A video of the user flow would be helpful.

@alex.esposito.1108 thanks for pointing out that I put the wrong image to show the Follow Records Data Type. I just edited to insert the correct image.

As it relates to Notifications, here’s an outline portraying what I’ve done so far and where I’m stuck:

IMAGE #1 Notification Data Type
Notification Data Type

IMAGE #2 Follow Button Workflow that creates a new notification in step 2

IMAGE #3 Repeating Group to display list of Notification (Yes, I do have a dedicated page to display notifications)

IMAGE #4 Notification Button Condition to turn blue when there are new notifications that are not yet seen
(This is where I get stuck…)

IMAGE #5 Notification Button Workflow to change ‘seen’ status to ‘no’ when clicked and to navigate to the notifications page
(This is also where I get stuck)

USERFLOW:
I was having difficulty uploading a video of user flow in the right format, however I’ll do my best with images to demonstrate the user flow.

IMAGE A: Current User following Current Page User (Third Test User) to trigger notification

IMAGE B: I run the application as the Third Test User

IMAGE C: I had clicked on notification button to go to notification page and see followed notification

@edengaitor17 there are two different general approaches you can take with this. You can either track the seen/unseen status on a per notification basis (as you’re trying to do now), or you can just track it on the user record.

For example, on the user record you can have a yes/no field to track if the user has new notifications. Every time you create a new notification you can update that field on the user record and every time the user visits the notification page you can uncheck that field. On the notification page you can also have a workflow run every 5 seconds to uncheck the field on the user record in case a new notification comes in while they’re already viewing the page. The downside to this is you won’t be able to inform the user of how many new notifications they have, and if you want to highlight each row of the notification RG depending on it’s seen/unseen status (the way fb does) that won’t be possible either. What are your thought on this?

If you want to keep with the current approach you have, in image 4 the expression you’re looking for is Search for Notifications (same constraints as you have now):first item is not empty

For Image 5, the function of the button should be only to navigate to the page. Don’t do anything to the notifications. Then, on the notifications page you can have a workflow to update the notifications when the page is loaded and also run another workflow every 5 seconds in case a new notification comes in while the user is already viewing the page.

BTW, if you want to track info per notification, you could also think about creating an option set to track the type of notification it is…for example, follow, message, like, post, etc.

1 Like

@alex.esposito.1108 Thank You! :pray:

Both the Follow System and Notifications seems to be working well now, without any issues, thanks to your help.

I preferred to continue the second option (my current approach) to create the notifications functionality.

Again, here’s a display of how I carried out your suggestions. (Just to be certain I did everything correctly :wink:)

IMAGE A: Update Notification Seen Status When Page is Loaded

IMAGE B: Update Notification Seen Status Every 5 seconds in case a notification comes in while the user is already viewing notifications page

IMAGE C: Notification Button Condition to change the button’s color, indicating new unseen notifications

Finally, thank you for your suggestion to create an Option Set to keep track of notification types, because that would have been the next task for me to tackle for notifications. So I appreciate you very much for pointing me in the right direction.

I created an option set called ‘Notification Types’ that consists of 2 types ‘Followed’ and ‘Liked Post’.

I added the ‘Notification Types’ Option Set to a field in the Notifications Data Type and called it ‘Notification Type’.

IMAGE D: In my Follow Button Workflow I set the Notification type to be ‘Followed’ when creating a new notification

Thanks again for all your help, and if you think I missed out anything or need to change something please let me know.

@edengaitor17 for the expression in image C, the reason I suggested “:first item” is because when searching for the list, rather than wait for the entire search to be finished, as soon as there’s an item that matches the criteria the search is done. The results are the same as doing “:count > 0” but we don’t have to wait to complete the entire search of records. This was only suggested to change the color of the button as all we need to know for that feature is whether or not there is at least one unseen notification.

Can you tell me what’s happening with this expression in images a and b? (I already know, just trying to encourage additional learning along the way :wink:)

3 Likes

@alex.esposito.1108 Ahhh…I see…I think I understand what you want me to understand

I wasn’t completely sure what first item meant, so thank you very much for clarifying. Because I see now that the expression in Image A and B will only update the seen status of the first item notifications in the database, not all of the notifications with the constraints as I want.

And now I have a question: What is the proper way to end the expression? The expression seems to always want ‘more’ no matter what other alternative expressions I’ve tried that I think will work.

I also tried seeking help from this video How to Build Expressions | Bubble in the bubble academy to help me learn to build expressions, but I still can’t seem to build the right expression.

@edengaitor17 believe me, I know the Bubble language can be difficult to understand at first. The problem here is actually not with the expression, but rather the action you selected. Take a look at the various options you have for making changes to data and think about what it is that you want to do. Try to write it out if you get stuck and see if that helps.

1 Like

@alex.esposito.1108 Okay, so I changed the action to Make changes to a list of Notifications

IMAGE #1 Notification Page Load Workflow

IMAGE #2 Do Every 5 Seconds Workflow

It seems to be working now…
Please let me know your thoughts.

I didn’t try the ‘Make changes to a list of things’ action before because I thought that it could only be used for fields or maybe even data types that contained a field where the multiple entry checkbox was ticked.

@edengaitor17 that looks good! And yes that action can also be used on lists contained in a single data field

1 Like

Hooray! Thanks for all your help :grinning_face_with_smiling_eyes:

Now I’m feeling more confident to tackle other areas in my application.

1 Like