In this guide, you’ll learn how to create a custom leaderboard feature with Bubble. Leaderboards are a great way to drive user engagement, as well as encourage certain behaviour within your app.
Apps like Duolingo and Product Hunt are great examples of how leaderboards can create a gamified habit.
In our example today, we’ll start by creating a scoring system in a social app that awards points based on user engagement.
If a user leaves a like on a post, they’ll receive 10 points.
If they leave a comment, they’ll receive 20 points.
If they create a post, however, they’ll receive 50 points.
Once we learn how to build out a scoring system, we’ll take the time to design a custom leaderboard that ranks all of our users by the total number of points they have.
The process of creating a custom leaderboard feature includes:
- Structuring your database
- Designing the UI of the leaderboard
- Building the workflows to power a scoring system
Full Transcript of Tutorial
1. Structuring your Bubble database
Before building a scoring system, it’s important to first set up your database to support this feature.
Under your user data type, you’ll need to create a data field called ‘points’. When creating this field, set the field type to a number. This will allow you to keep a running total of a user’s points, as well as perform calculations if needed.
2. Designing the UI of the leaderboard
After setting up the database, we can now design the user-facing leaderboard inside our app.
If you open the design tab, you’ll need to add a repeating group to your page.
Within this repeating group, set the type of content to be a ‘user’. This will allow you to display and rank a list of users from your database.
For the data source of the repeating group, simply perform a search in your database for all of your users. If you’d like, it’s possible to add any additional constraints you need to this search. For the sake our our guide today, we won’t add any filters.
Within the data search, you’ll also need to sort the users in a custom format.
Under the sorting menu, select to sort users by the ‘points’ data field. If you set the descending value of this sorting to ‘yes’, it will display users with the most points at the top, and the least amount at the bottom.
Finally, within this repeating group, we’ll add the elements we wish to display for each user. In this case, we’ll display their name, profile photo, and total count of points.
When building the repeating group, it’s also possible to display a trophy icon next to the person at the top of the leader. To do this, simply add an icon element into the first cell of your repeating group.
When it comes to the style of this icon, select something like a medal and a trophy, then update the colour to a shade of gold.
Now, if you were to run a preview of your app at this point in time, you’ll notice that the icon element is currently shown in ever cell of the repeating group. So how can we ensure that it’s only displayed in the top cell?
Within your design tab, select the icon element, then open the layout tab. Here, you’ll need to unselect the option to ‘make this element visible on page load’. This will now hide the element by default.
Because the icon can no longer be seen, we’ll need to create a condition that recognises when it should be shown.
Within the condition tab, we’ll create a condition that identifies when the ‘current cell’s index, is 1’. This means that Bubble will notice when the cell of the repeating group is the very first cell.
When this condition is true, we’ll select the option to ‘make element visible’, then check that this should be the case.
Now, when you run another preview of your app, you’ll see that the icon element is only shown in the first cell.
3. Building the workflows to power the scoring system
After designing the UI of the leader, the final thing we need to do is build the workflows that will power our scoring system.
Within our example app today, we’ve created a social platform like Facebook or Instagram. As you’ll see, users can like posts, comment on posts, and even create posts of their own.
If we open the workflows that power each action, we’ll need to add a step that provides a number of points to a user.
To begin with, we’ll modify the workflow that powers the ability to like a post. By selecting the like button, we’ll open the existing workflow.
In this workflow, you’ll see that when a user likes a post, they’re added to a data field that stores a list of users. After this step in the workflow, we’ll add an additional action that ‘makes changes to a thing’.
The thing we’ll want to change is the ‘current user’. The current user would be the person who is logged in to an account, and has just liked a post.
When changing the current user, we’ll select their ‘points’ data field and add a number to the existing point value. In our example today, we’ll award 10 points for liking a post.
From here, we’ll then replicate the exact same workflow step on our comment feature.
By opening the workflow that creates a new comment, all we’re required to do is add an additional action to this sequence.
Similar to before, we’ll add an action that makes changes to the current user. The change we’ll want to make is to their total number of points. In this instance, however, we’ll award them 50 points. As commenting on a post requires more effort, a user should benefit from this additional friction.
Finally, we’ll now replicate the exact same process on the feature that enables someone to create a new post.
By opening our workflow tab, we can copy the exact same step that we’ve already used. In this workflow, we’ll once again select to ‘make changes to a thing’. The thing we’ll want to change is the current user – updating their total number of points.
Whenever a user creates a new post, we’ll award them 100 points.
4. Previewing the app
After building the leaderboard and scoring system, we can now run a preview of our app and see how this functions in a live environment.
As you can see on our leaderboard, we currently have four users who are ranked by their points:
- Sandra: 100 points
- Bill: 70 points
- Phil: 40 points
- Sarah: 20 points
If we were to now log in as Sarah and like three posts, it’ll increase her total score count by 30.
If we also comment on a post, as well as create a new post of her own, she’ll receive an extra 70 points.
This now means that Sarah has a total of 120 points. As you can see, this has moved Sarah to the top of the leader.
And just like that, you now know everything there is to build your own custom leader and scoring system in Bubble.