How to build a comment section

Hi all!

I am trying to build a comment functionality in my Bubble app. A user searches a Player XYZ in the database, then clicks on the name. Now they will review the player (what playing attributes they are good and bad at). Next they will write a strategy. The question asks, “did your strategy work?” and the person selects “yes” or “no.” Once they select one of these options, a multiline input box appears, where they will comment a strategy. Then when they click submit, the comment will need to be saved.

Now, another user comes to the site and searches Player XYZ to look at all their good and bad playing attributes, as well as all the strategies that people commented on Player XYZ. They should be able to see the strategies that were commented in “worked” and “didn’t work” columns and should be able to like and downlike the strategies.

I am unsure of how to add the comment section functionality and how to save the comments that were submitted on the “enter data page” and send them over to a “review player data” page.

Any replies are appreciated!

1 Like

Hi there,

I’ve built a demo for your reference. You can access the editor with the link below. It outlines the database structure along with the ability to add comments. The front-end has a simple design on which you can see how it works.

3 Likes

Thank you for the demo! I will give it a try and see how I can implement things you did.

I want to add a “like” and “dislike” capability to comments, how would I do that?

I’ll update it soon.

I’ve updated on how to add Likes and remove the Like. You can apply the same logic for Dislikes.

1 Like

THANK YOU SO MUCH!!

I was working on it the past couple hours (understanding the flow of information in the database, how to set it up, actually setting it up, etc.) and it is working! It means a lot that you were able to help me so much!

Another question since one can always improve this: If I wanted to create uplikes and downlikes for replies, I would need to create another set of datatypes called “Comment: Reply: Like” and “Comment: Reply: Dislike” and basically follow the exact same steps for that as was done in your demo for the like and dislike capabilities for Comments?
And, if I wanted to create it to where only users that are signed in can make a comment and a reply, is there any demo you could point me to so that I can implement that on my Bubble App?

Thank you again!

One thing I noticed is that the like and dislike is not a number. I am thinking I will just add them as “fields” underneath the “Comment” and “Comment:Reply” Datatypes. Therefore, the likes and dislikes will still be attached to that comment, but I increasing and decreasing the likes and dislikes will be easier to do when there are more users adding to those counts (and when they click the button to remove their like and instead change it to a dislike, and vice versa). Does that sound like it would work? Or is the way you have it set up make it to where the user can only like or dislike a comment one time?

You do want to know who liked it right? The reason for me doing it as is will make it easier to extract the data.

Having a clean structure is important, it will keep your web app much faster and easier to maintain. You can now add anything related to comment replies inside their own data type.

p.s. I will look into your other points later today mate.

Mido is correct however, and to make things super fast you can truncate the likes and dislikes into comments as these are triggered by a user (User type) so in theory they don’t need there own data-source. In Comments > Likes (List of Users) / Dislikes (List of Users) - ‘simples’

1 Like

So the way it will work is that I will import 10,000 players into my database from the Tennis Ranking Website called USTA. Let’s say one of them is named John Doe. John Doe finds out about my website and decides to join. When he signs up, he will be asked to “claim” an account, where he will search for his name in the database and select it. So, yes the users and players will be connected, but maybe not in the way you were thinking. Regardless, they will be connected.

I think you’re way of setting it up to see who liked it will be the better option, and having a good data structure is definitely important. I guess once I launch my app, and have a user sign-in integrated, then and only then will I see the like and dislike counts on a comment increase, correct?

Correction: If people aren’t a player in the database, they can still sign-up in a different account type (parent, coach, and player in database will be the three account types), so not everyone will be able to link to a player in the database (i.e. not all users will be linked to players).

Update #2: the other reason I wanted to possibly have the likes and dislikes as numbers was so I could sort the comments by most uplikes and most dislikes. I suppose I could do it your way AND this way (likes and dislikes under the Comment datatype) in order to track who is liking what comments as well as to sort the comments by most likes and most dislikes?

To address some of your points. You can do a count of the Player Likes/Dislikes, it’s already there on the demo environment. You can connect a Player account with new Users or an existing account based on the Player ID, which should be a unique ID.

Comments are already restricted to one-time on the demo.

I don’t have time to go over all your points because of time constraints. You can use the same logic for the database to connect Data Types. As for the restrictions based on a User’s account, if you don’t know how to do that I would suggest you to take the basic Bubble courses to learn how to apply this.

Good luck with your project!

Great thank you so much for the guidance thus far!!

Hey! I have gotten really far with the comment section and liking capability. However, I have an issue that seems to be the last one really. User ABC likes a comment, then user XYZ likes that comment, then 10 other people like it, then user XYZ clicks the like button again to remove their like. The current setup just removes the like from the top of the list, but it doesn’t delete the like from user XYZ, which is now 11th in the list. How can I fix this and make it to where it deletes the like from user XYZ?

I think you went ahead and put the like as a number in your database. You should add Users to it and then count it.

Look again at the editor link and you’ll see what I mean with that.

Yes this worked, thank you!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.