Help me improve my terrible Firebase Skills - a simple leaderboard

[grant.mccallum]

Hi all,

I have recently made the decision to move away from google sheets due to the wait time to read and load so my next project is to learn firebase and I’ll be honest with you, the struggle is real. I’ve tried searching around and following various tutorials but I’m struggling to find something that aligns with my goal.

Goal: Create a leaderboard from user scores in the below database using labels to display the score and the corresponding name of the top three in the leaderboard.

I have made a test database with the following structure:

Any solution will need to be able to efficiently:

1. Pull a list of names alongside scores, filtering out any noise (Likes, hates etc.)
2. Sort that list by their scores.
3. Populate the labels provided with only the top 3 scorers (this user base will continually grow).

I have been playing around with this problem for a day now and I can now proudly display a list of all participants names alongside their scores, but I can’t find an effective way of sorting and displaying these lists and quite frankly the blocks I have created to achieve this effect are so over-engineered that I would be embarrassed to show them to you.

Thanks in advance for your help!

Edit: Screw it, here’s where I got to before throwing in the towel and asking you guys:
Blocks:

Result:

[tatiang]

Firebase has taken me countless hours to learn. It often feels like one step forward, three steps back.

This sounds like a job for ChatGPT. Have you asked it how to best organize this data and sort it? It doesn’t know a ton about Thunkable but you can incorporate that into the prompt if you want.

I have a thought about how to do this with lists of objects but I would see what ChatGPT can suggest first because it’s fairly complicated.

[grant.mccallum]

Glad to know I have finally found a problem that even has Tatiang reaching for Chat GPT. Here’s the answer from our AI overlord. I’ll start working through it now and let you know if I come across any issues.

Great clarification! Since you’re using Thunkable with Firebase’s Realtime Database, let’s provide you with an efficient and easy-to-follow approach tailored specifically for Thunkable’s blocks environment.

Recommended Database Structure (as per your image):

Users
│
├── August
│   ├── Name: "August"
│   ├── Score: 12
│   ├── Likes: "Summer"
│   └── Hates: "Rain"
│
├── Mary
│   ├── Name: "Mary"
│   ├── Score: 7
│   ├── Likes: "Contrarianism"
│   └── Hates: "Spiders"
│
├── Tom
    ├── Name: "Tom"
    ├── Score: 26
    ├── Likes: "Thumbs"
    └── Hates: "Large People"

---

Recommended Approach in Thunkable (Firebase + Lists):

Here’s a clear and simple step-by-step strategy that will efficiently give you the top three scorers and populate your leaderboard:

Step 1: Fetch the Data from Firebase

• Use the Firebase Realtime DB component in Thunkable to get the value of Users.
• This returns an object containing all user information.

Step 2: Extract Names and Scores Only

• Initialize two empty lists: one for Names (nameList) and one for Scores (scoreList).
• Iterate through the user keys to get the names and scores.
• Add each Name and Score pair to their respective lists.

Step 3: Combine and Sort Data

• Combine Names and Scores into a single structured list (like a list of objects or pairs).
• Sort the combined list by score (descending).

Step 4: Populate Leaderboard Labels

• Pick only the first three pairs from the sorted list (these are the top three scorers).
• Set your three leaderboard labels in Thunkable accordingly.

---

Thunkable Implementation (Easy Block Approach):

Below is a straightforward block logic outline you can implement directly in Thunkable (no complex loops required):

When Screen Opens:
  → Call Firebase Realtime DB Get "Users"
      ↓
      If value ≠ null:
          set "allUsers" to value (object)
          initialize empty "leaderboardList" (empty list)
          
          for each item "userID" in keys of object "allUsers":
              set "currentUser" to get property "userID" of object "allUsers"
              set "userName" to get property "Name" of object "currentUser"
              set "userScore" to get property "Score" of object "currentUser"
              
              add to "leaderboardList" the object:
                  {name: userName, score: userScore}
                  
          sort "leaderboardList" by property "score" descending
          
          If length of "leaderboardList" ≥ 1:
              Set label1.Text to join:
                  "#1: " + leaderboardList[1].name + " (" + leaderboardList[1].score + ")"
          If length of "leaderboardList" ≥ 2:
              Set label2.Text to join:
                  "#2: " + leaderboardList[2].name + " (" + leaderboardList[2].score + ")"
          If length of "leaderboardList" ≥ 3:
              Set label3.Text to join:
                  "#3: " + leaderboardList[3].name + " (" + leaderboardList[3].score + ")"

---

Why this Approach?

• Simple & Clear: Uses Thunkable’s built-in Firebase DB component effectively.
• Efficient: Avoids unnecessary looping or complexity.
• Flexible & Scalable: Handles a growing user base effortlessly.

---

Common Pitfalls to Avoid:

• Make sure you’re correctly handling data objects from Firebase.
• Check if the scores retrieved are numerical before sorting.
• Ensure the Name and Score fields exist for each user.

---

In Summary:

The method outlined above will:

• Pull Names and Scores from Firebase.
• Filter out unnecessary data.
• Efficiently sort to determine the top three scorers.
• Populate the leaderboard labels neatly in your Thunkable app.

Try implementing this, and feel free to ask for additional clarification or blocks help!

[tatiang]

@grant.mccallum

Glad to know I have finally found a problem that even has Tatiang reaching for Chat GPT.

Haha! Cheers to that! ChatGPT is great for database design and parsing.