Distributed counters pattern in Firebase - Mini Project: Build & Apply

Distributed Counters Pattern with Firebase

📖 Scenario: You are building a simple app that counts how many times users click a button. To handle many users clicking at the same time without slowing down, you will use the distributed counters pattern in Firebase.

🎯 Goal: Create a Firebase Firestore structure to store distributed counters, configure the number of shards, write code to increment the counter safely, and finalize the counter document with the total count.

📋 What You'll Learn

Create a Firestore collection with a document for the counter

Add a configuration for the number of shards

Write a function to increment a random shard's count

Add a field to store the total count in the main counter document

💡 Why This Matters

🌍 Real World

Distributed counters help apps handle many users updating the same count without conflicts or slowdowns.

💼 Career

Understanding distributed counters is important for building scalable cloud applications that handle high traffic.

1

Create the main counter document

Create a Firestore collection called counters and add a document with ID clicks that has a field totalCount set to 0.

Firebase

// Your code here to create the counters collection and clicks document with totalCount 0

Need a hint?

Use firestore.collection('counters').doc('clicks').set({ totalCount: 0 }) to create the document.

2

Add shard count configuration

Create a constant called NUM_SHARDS and set it to 5 to define how many shards the counter will use.

Firebase

const countersRef = firestore.collection('counters').doc('clicks');
await countersRef.set({ totalCount: 0 });
// Define the number of shards
// Your code here

Need a hint?

Use const NUM_SHARDS = 5; to set the shard count.

3

Write function to increment a random shard

Write a function called incrementCounter that picks a random shard number from 0 to NUM_SHARDS - 1 and increments the count field in that shard document inside counters/clicks/shards collection using a transaction.

Firebase

const countersRef = firestore.collection('counters').doc('clicks');
await countersRef.set({ totalCount: 0 });
const NUM_SHARDS = 5;

// Write incrementCounter function
// Your code here

Need a hint?

Use Math.floor(Math.random() * NUM_SHARDS) to pick a shard. Use a transaction to safely update the shard's count.

4

Add total count field update

Add a field totalCount to the clicks document that will store the total count of all shards. Update the incrementCounter function to increment this totalCount field inside the same transaction.

Firebase

const countersRef = firestore.collection('counters').doc('clicks');
await countersRef.set({ totalCount: 0 });
const NUM_SHARDS = 5;

async function incrementCounter() {
  const shardId = Math.floor(Math.random() * NUM_SHARDS).toString();
  const shardRef = countersRef.collection('shards').doc(shardId);
  await firestore.runTransaction(async (transaction) => {
    const shardDoc = await transaction.get(shardRef);
    if (!shardDoc.exists) {
      transaction.set(shardRef, { count: 1 });
    } else {
      const newCount = (shardDoc.data().count || 0) + 1;
      transaction.update(shardRef, { count: newCount });
    }
    // Update totalCount field here
    // Your code here
  });
}

Need a hint?

Inside the transaction, get the main counter document and update its totalCount by adding 1.