Firebase RTDB — Nested Data Costs 50MB Per Load

// This is what your Firebase Realtime Database actually looks like in the console.
// The critical pattern: users, posts, and postLikes are siblings at the top level.
// No nesting across different entity types.
// Users store post IDs, not post objects — reading a profile stays small.
{
  "users": {
    "uid_alice": {
      "displayName": "Alice Mbeki",
      "email": "alice@example.com",
      "joinedAt": 1718000000000,

      // Only the post KEY is stored here — not the post content.
      // Reading uid_alice's profile returns ~120 bytes.
      // If full post objects were embedded here, the same read could return megabytes.
      "postIds": {
        "-NxK8mQpostA": true,
        "-NxK8mQpostB": true
      }
    },
    "uid_bob": {
      "displayName": "Bob Okafor",
      "email": "bob@example.com",
      "joinedAt": 1718003600000,
      "postIds": {
        "-NxK8mQpostC": true
      }
    }
  },

  "posts": {
    // Firebase push() generates this key — time-ordered, so latest is always last
    // when sorted lexicographically. This makes limitToLast() pagination trivial.
    "-NxK8mQpostA": {
      "authorId": "uid_alice",         // Reference to /users/uid_alice — not the object itself
      "title": "Getting started with Firebase",
      "body": "Here is what I learned on day one...",
      "publishedAt": 1718000100000,
      "likesCount": 12                  // Denormalised counter — updated via transaction
    },
    "-NxK8mQpostB": {
      "authorId": "uid_alice",
      "title": "Firebase security rules deep dive",
      "body": "Rules are not just permissions, they are your entire server layer...",
      "publishedAt": 1718050000000,
      "likesCount": 47
    },
    "-NxK8mQpostC": {
      "authorId": "uid_bob",
      "title": "Structuring realtime data for scale",
      "body": "Flat is almost always better than nested when working with RTDB...",
      "publishedAt": 1718060000000,
      "likesCount": 8
    }
  },

  // postLikes lives separately so toggling a like does not rewrite the full post object.
  // This node has its own read pattern: 'did this user like this post?'
  // Separating it means that read stays at the exact path you need.
  "postLikes": {
    "-NxK8mQpostA": {
      "uid_bob": true,
      "uid_carol": true
    },
    "-NxK8mQpostB": {
      "uid_bob": true
    }
  },

  // Presence is its own top-level node — completely different access pattern
  // from user profiles. Online/offline status changes frequently and needs
  // its own security rules (any authenticated user can write their own presence).
  "presence": {
    "uid_alice": {
      "displayName": "Alice Mbeki",
      "onlineSince": 1718070000000,
      "status": "online"
    }
  }
}

import { initializeApp } from 'firebase/app';
import {
  getDatabase,
  ref,
  get,
  set,
  push,
  update,
  onValue,
  onChildAdded,
  serverTimestamp
} from 'firebase/database';

// ── SETUP ──────────────────────────────────────────────────────────────────
const firebaseApp = initializeApp({
  apiKey: 'YOUR_API_KEY',
  authDomain: 'your-app.firebaseapp.com',
  databaseURL: 'https://your-app-default-rtdb.firebaseio.com',
  projectId: 'your-app'
});

const database = getDatabase(firebaseApp);


// ── ONE-TIME READ ───────────────────────────────────────────────────────────
// get() is the right tool when you need data once.
// Good for: profile prefetch on login, username availability check, config load.
// The connection for this specific read closes after the response — no listener attached.
async function loadUserProfile(userId) {
  const userRef = ref(database, `users/${userId}`);

  const snapshot = await get(userRef);

  if (!snapshot.exists()) {
    console.log('No profile found for user:', userId);
    return null;
  }

  // .val() unpacks the DataSnapshot into a plain JS object.
  const profile = snapshot.val();
  console.log('Loaded profile:', profile);
  return profile;
}


// ── WRITE: set() OVERWRITES — use it for known keys ─────────────────────────
// set() replaces the ENTIRE node at the path.
// Any fields at that path not included in the new value are DELETED.
// Use it when you own the full shape of the node — like creating a user profile.
async function createUserProfile(userId, displayName, email) {
  const userRef = ref(database, `users/${userId}`);

  await set(userRef, {
    displayName,
    email,
    joinedAt: Date.now(),
    postIds: {}   // start with an empty post index
  });

  console.log(`Profile created for ${displayName}`);
}


// ── MULTI-PATH WRITE: Atomic updates across separate nodes ──────────────────
// This is how you write to two unrelated paths in one network round-trip.
// Both writes land together — if the user goes offline between two sequential
// set() calls, you'd get a partial state. Multi-path updates prevent that.
async function publishPost(authorId, title, body) {
  const postsRef = ref(database, 'posts');

  // push() generates a unique time-ordered key BEFORE the write completes.
  // You get the key immediately to use in the multi-path update.
  const newPostRef = push(postsRef);
  const newPostKey = newPostRef.key; // e.g. "-NxK8mQpostD"

  // Build the multi-path update object.
  // Keys are paths relative to root, values are what to write there.
  const updates = {};

  updates[`posts/${newPostKey}`] = {
    authorId,
    title,
    body,
    publishedAt: Date.now(),
    likesCount: 0
  };

  // Also record the post ID under the author's profile.
  // Both writes happen atomically in one round-trip.
  updates[`users/${authorId}/postIds/${newPostKey}`] = true;

  // Pass updates to the ROOT ref — this is what makes multi-path work.
  await update(ref(database), updates);

  console.log('Post published with key:', newPostKey);
  return newPostKey;
}


// ── LIVE LISTENER: onChildAdded for a growing list ──────────────────────────
// Use this pattern for: chat messages, activity feeds, notification lists.
// Fires once per existing item on initial attach, then once per new addition.
// NEVER re-downloads old items when a new one arrives — critical for performance.
function subscribeToChatMessages(roomId, onNewMessage) {
  const messagesRef = ref(database, `chats/${roomId}/messages`);

  // The return value IS the unsubscribe function.
  // Store it. Call it when the component unmounts. This is not optional.
  const unsubscribe = onChildAdded(messagesRef, (snapshot) => {
    const message    = snapshot.val();
    const messageKey = snapshot.key;

    console.log(`[${messageKey}] ${message.senderName}: ${message.text}`);
    onNewMessage({ key: messageKey, ...message });
  });

  // Return the cleanup function to the caller.
  return unsubscribe;
}


// ── LIVE LISTENER: onValue for a single value or small node ────────────────
// Use for: live counters, status indicators, feature flags, small config objects.
// Not for lists — every change re-delivers the entire node.
function watchOnlineUserCount(onCountChange) {
  const onlineCountRef = ref(database, 'meta/onlineUserCount');

  const unsubscribe = onValue(onlineCountRef, (snapshot) => {
    const count = snapshot.val() ?? 0;
    console.log('Online users right now:', count);
    onCountChange(count);
  });

  return unsubscribe;
}


// ── CLEANUP PATTERN (React hooks) ──────────────────────────────────────────
// This is the correct lifecycle for any Firebase listener in a React component.
//
// useEffect(() => {
//   const stopListening = subscribeToChatMessages(roomId, appendMessage);
//   return () => stopListening();  // Runs on unmount OR when roomId changes
// }, [roomId]);
//
// Missing the return cleanup causes listeners to stack up across navigations.
// If the user visits 10 different chat rooms, you end up with 10 active listeners
// on 9 rooms they've already left — each one consuming bandwidth and triggering re-renders.


// ── DELETE via multi-path null write ─────────────────────────────────────────
// Setting a path to null is how you delete in Firebase.
// Using multi-path means all three deletions happen together.
async function deletePost(postKey, authorId) {
  const updates = {};
  updates[`posts/${postKey}`]                        = null;  // delete the post
  updates[`users/${authorId}/postIds/${postKey}`]    = null;  // clean up the index entry
  updates[`postLikes/${postKey}`]                    = null;  // remove orphaned likes data

  await update(ref(database), updates);
  console.log('Post and all references deleted:', postKey);
}

// Deploy with: firebase deploy --only database
// Or paste into Firebase Console > Realtime Database > Rules tab
// Test every change in the Rules Playground before deploying to production
{
  "rules": {

    // ── PUBLIC READ, ADMIN-ONLY WRITE ─────────────────────────────────────
    "products": {
      // Unauthenticated visitors (product catalogue browsers) can read.
      ".read": true,

      // Only authenticated users whose uid appears in /admins can write.
      // We store admin status as /admins/{uid}: true — a simple boolean flag.
      // root.child() lets you cross-reference another path from within a rule.
      ".write": "auth !== null && root.child('admins').child(auth.uid).val() === true"
    },

    // ── OWNER-ONLY WRITE WITH DATA VALIDATION ─────────────────────────────
    "users": {
      "$userId": {
        // $userId is a wildcard — it matches any key under /users/
        // and its value is available in the rule expression.

        // Any logged-in user can read profiles — e.g. to show names in a chat.
        ".read": "auth !== null",

        // Only the profile's owner can write to it.
        ".write": "auth !== null && auth.uid === $userId",

        // Structural validation — these fields must exist after the write.
        ".validate": "newData.hasChildren(['displayName', 'email', 'joinedAt'])",

        "displayName": {
          // Must be a non-empty string, max 50 characters.
          ".validate": "newData.isString() && newData.val().length >= 2 && newData.val().length <= 50"
        },
        "email": {
          // Must be a string — Firebase Auth already validated the format before creating the account.
          ".validate": "newData.isString() && newData.val().length > 0"
        },
        "joinedAt": {
          // Must be a number (Unix ms timestamp).
          // !data.exists() prevents modification after creation — joinedAt is immutable.
          ".validate": "newData.isNumber() && !data.exists()"
        },
        "postIds": {
          // Allow any valid post ID mapping — keys are post IDs, values are booleans.
          "$postId": {
            ".validate": "newData.isBoolean()"
          }
        }
      }
    },

    // ── POSTS — AUTHENTICATED CREATE, OWNER EDIT/DELETE ───────────────────
    "posts": {
      // Any logged-in user can read all posts.
      ".read": "auth !== null",

      "$postId": {
        // Two conditions, depending on whether the post exists:
        // Creating (data does not exist): authorId in new data must match the writer's uid.
        // Editing/deleting (data exists): the existing authorId must match the writer's uid.
        // This prevents both impersonation on create and editing someone else's post.
        ".write": "auth !== null && (
                    !data.exists() && newData.child('authorId').val() === auth.uid ||
                     data.exists() && data.child('authorId').val() === auth.uid
                  )",

        ".validate": "newData.hasChildren(['authorId', 'title', 'body', 'publishedAt'])",

        "title": {
          ".validate": "newData.isString() && newData.val().length > 0 && newData.val().length <= 200"
        },
        "body": {
          ".validate": "newData.isString() && newData.val().length > 0"
        },
        "publishedAt": {
          // Must be a number and cannot be changed after creation.
          ".validate": "newData.isNumber() && !data.exists()"
        },
        "likesCount": {
          // Must be a non-negative integer — prevents someone writing -1000 to destroy the count.
          ".validate": "newData.isNumber() && newData.val() >= 0 && newData.val() % 1 === 0"
        }
      }
    },

    // ── PRESENCE — USER CAN WRITE ONLY THEIR OWN PRESENCE ─────────────────
    "presence": {
      // Any logged-in user can read the full presence map (to show who's online).
      ".read": "auth !== null",

      "$userId": {
        // Each user can only write their own presence node.
        ".write": "auth !== null && auth.uid === $userId"
      }
    },

    // ── DENY ALL UNSPECIFIED PATHS ─────────────────────────────────────────
    // Firebase's default is already to deny. Being explicit here documents intent
    // and protects against accidental new top-level nodes having no rules.
    "$other": {
      ".read": false,
      ".write": false
    }
  }
}

import {
  getDatabase,
  ref,
  get,
  set,
  runTransaction,
  onDisconnect,
  onValue,
  serverTimestamp
} from 'firebase/database';

const database = getDatabase();


// ── TRANSACTION: Race-condition-free like counter ────────────────────────────
// Without runTransaction(), two simultaneous likes both read 10 and both write 11.
// The final count is 11 instead of 12 — data corruption with no error thrown.
// runTransaction() serialises concurrent writes on the server and retries on conflict.
async function togglePostLike(postId, currentUserId) {
  const likesCountRef  = ref(database, `posts/${postId}/likesCount`);
  const userLikeRef    = ref(database, `postLikes/${postId}/${currentUserId}`);

  // Check current like state with a one-time read.
  const alreadyLiked = (await get(userLikeRef)).exists();

  // runTransaction receives the current server value and returns the new value to write.
  // If a concurrent write changes the value between the server's read and Firebase's write,
  // the function re-runs with the updated current value automatically.
  const { committed, snapshot } = await runTransaction(likesCountRef, (currentCount) => {
    if (currentCount === null) return alreadyLiked ? 0 : 1;  // handle uninitialised node
    return alreadyLiked ? Math.max(0, currentCount - 1) : currentCount + 1;
  });

  if (committed) {
    // Update the per-user like index outside the transaction.
    // This is acceptable here because the counter is the contested resource.
    await set(userLikeRef, alreadyLiked ? null : true);
    console.log(`Like ${alreadyLiked ? 'removed' : 'added'}. New total: ${snapshot.val()}`);
  } else {
    // This rarely fires — it means the transaction was aborted (too many retries).
    console.warn('Transaction did not commit — try again.');
  }
}


// ── PRESENCE: Knowing who is online right now ────────────────────────────────
// onDisconnect is registered on the SERVER before we write the 'I am online' marker.
// This is the key ordering: register the cleanup FIRST, then mark as online.
// If the network drops between these two lines, the cleanup is already registered
// and will still fire.
async function registerUserPresence(userId, displayName) {
  const userPresenceRef = ref(database, `presence/${userId}`);

  // 1. Register the cleanup handler on the server FIRST.
  //    The server will execute this when it stops receiving heartbeats from this client.
  //    This fires on: browser close, tab crash, network failure, power cut.
  //    No client code runs when it fires — it's entirely server-side.
  await onDisconnect(userPresenceRef).remove();

  // 2. Now write the online marker.
  //    If the client crashes between these two lines, step 1 has already registered
  //    the cleanup — the server will eventually remove the presence entry anyway.
  await set(userPresenceRef, {
    displayName,
    onlineSince: serverTimestamp(),  // server fills this in — not the client clock
    status: 'online'
  });

  console.log(`${displayName} is now marked as online.`);
}


// ── WATCHING THE LIVE PRESENCE MAP ──────────────────────────────────────────
// onValue on the entire presence node — this works well because presence objects
// are small and the total number of concurrent users is bounded.
// If you had millions of potential users, you'd want a different structure.
function watchOnlineUsers(onUpdate) {
  const presenceRef = ref(database, 'presence');

  const unsubscribe = onValue(presenceRef, (snapshot) => {
    const presenceData = snapshot.val() ?? {};

    const onlineUsers = Object.entries(presenceData).map(([uid, info]) => ({
      uid,
      displayName: info.displayName,
      onlineSince: new Date(info.onlineSince).toLocaleTimeString(),
      status: info.status
    }));

    console.log(`${onlineUsers.length} user(s) online:`);
    onlineUsers.forEach(u => console.log(`  - ${u.displayName} (since ${u.onlineSince})`));

    onUpdate(onlineUsers);
  });

  return unsubscribe;
}


// ── OFFLINE AWARENESS: Show connection state to users ───────────────────────
// .info/connected is a special Firebase path that reflects this client's
// connection state. Use it to show an offline banner rather than letting
// the user think their actions are live when they're actually queued locally.
function watchConnectionState(onConnectionChange) {
  const connectedRef = ref(database, '.info/connected');

  const unsubscribe = onValue(connectedRef, (snapshot) => {
    const isConnected = snapshot.val();
    console.log(isConnected ? 'Connected to Firebase' : 'Offline — writes are queued');
    onConnectionChange(isConnected);
  });

  return unsubscribe;
}


// ── SIMULATED USAGE ─────────────────────────────────────────────────────────
await registerUserPresence('uid_alice', 'Alice Mbeki');
await registerUserPresence('uid_bob', 'Bob Okafor');

const stopWatching = watchOnlineUsers((users) => { /* update UI */ });
watchConnectionState((connected) => { /* show/hide offline banner */ });

await togglePostLike('-NxK8mQpostA', 'uid_bob');   // Bob likes Alice's post
await togglePostLike('-NxK8mQpostA', 'uid_bob');   // Bob un-likes it