Ordering data in Firebase - Mini Project: Build & Apply

Ordering Data in Firebase Realtime Database

📖 Scenario: You are building a simple leaderboard for a game using Firebase Realtime Database. Players have scores stored in the database, and you want to display the players ordered by their scores from highest to lowest.

🎯 Goal: Learn how to order data in Firebase Realtime Database by a child key to retrieve players sorted by their scores.

📋 What You'll Learn

Create a Firebase Realtime Database reference with sample player data

Add a configuration variable to specify the child key to order by

Query the database ordering players by their scores

Complete the query with a limit to get the top 3 players

💡 Why This Matters

🌍 Real World

Ordering data is essential in leaderboards, product listings, and any app that needs sorted data from a database.

💼 Career

Knowing how to order and limit data queries in Firebase is a key skill for frontend and backend developers working with real-time apps.

1

Create Firebase data with players and scores

Create a Firebase Realtime Database reference called playersRef that contains these exact player entries with their scores: 'player1': 150, 'player2': 300, 'player3': 250, 'player4': 100.

Firebase

# Your code here

Need a hint?

Use ref to create a reference to 'players' in the database and set to add the player data with scores.

2

Add ordering configuration variable

Create a constant called orderByKey and set it to the string 'score' to specify the child key to order players by.

Firebase

import { getDatabase, ref, set } from "firebase/database";

const db = getDatabase();
const playersRef = ref(db, 'players');

set(playersRef, {
  player1: { score: 150 },
  player2: { score: 300 },
  player3: { score: 250 },
  player4: { score: 100 }
});

// Your code here

Need a hint?

Define a constant with the exact name orderByKey and assign it the string 'score'.

3

Query players ordered by score

Create a query called orderedPlayersQuery using query(playersRef, orderByChild(orderByKey)) to order players by their scores.

Firebase

import { getDatabase, ref, set, query, orderByChild } from "firebase/database";

const db = getDatabase();
const playersRef = ref(db, 'players');

set(playersRef, {
  player1: { score: 150 },
  player2: { score: 300 },
  player3: { score: 250 },
  player4: { score: 100 }
});

const orderByKey = 'score';

// Your code here

Need a hint?

Import query and orderByChild from Firebase and create the query using the orderByKey variable.

4

Limit query to top 3 players

Update orderedPlayersQuery to include limitToLast(3) so it retrieves only the top 3 players with the highest scores.

Firebase

import { getDatabase, ref, set, query, orderByChild, limitToLast } from "firebase/database";

const db = getDatabase();
const playersRef = ref(db, 'players');

set(playersRef, {
  player1: { score: 150 },
  player2: { score: 300 },
  player3: { score: 250 },
  player4: { score: 100 }
});

const orderByKey = 'score';

// Your code here

Need a hint?

Import limitToLast and add it as a parameter to the query call to get the top 3 players.