DEV Community: Gabriel Sakala

How to Build a Real-Time Chat System with Firebase Firestore and Vanilla JavaScript

Gabriel Sakala — Tue, 09 Jun 2026 08:49:09 +0000

How to Build a Real-Time Chat System with Firebase Firestore and Vanilla JavaScript

Real-time chat is one of those features that sounds complex but becomes surprisingly manageable once you understand how Firebase Firestore's live listeners work. No WebSockets to configure, no server to maintain — Firestore handles the real-time layer for you.

In this tutorial, I'll walk you through building a fully functional chat system using Firebase Firestore and vanilla JavaScript. This is the exact architecture behind the chat feature in MySocial, a social media platform I built from scratch, which includes real-time messaging, reply-to-message functionality, and emoji reactions.

By the end of this tutorial, you'll have built:

A real-time chat UI that updates instantly for all users
Message sending with Firebase Auth user identity
A reply-to-message system
Emoji reactions on messages
Auto-scroll to the latest message

Prerequisites

A Firebase project with Firestore and Authentication enabled
Basic knowledge of JavaScript and Firestore
Firebase initialized in your project (see the Firebase docs)

Firestore Data Structure

Before writing any code, let's plan the data structure. A clean structure makes querying and rendering much easier.

We'll use two collections:

/chats/{chatId}/
  participants: [uid1, uid2]
  lastMessage: "Hey!"
  lastMessageTime: timestamp

/chats/{chatId}/messages/{messageId}/
  text: "Hey!"
  senderId: "uid123"
  senderName: "Gabriel"
  timestamp: serverTimestamp()
  replyTo: {              // optional
    messageId: "abc123"
    text: "Original message"
    senderName: "Alice"
  }
  reactions: {            // optional
    "❤️": ["uid1", "uid2"],
    "😂": ["uid3"]
  }

Each chat document holds metadata, and messages live in a subcollection. This keeps queries fast and costs low.

Setting Up Firestore Security Rules

Before anything else, set up rules so users can only read and write their own chats:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /chats/{chatId} {
      allow read, write: if request.auth != null &&
        request.auth.uid in resource.data.participants;

      match /messages/{messageId} {
        allow read: if request.auth != null &&
          request.auth.uid in get(/databases/$(database)/documents/chats/$(chatId)).data.participants;
        allow create: if request.auth != null &&
          request.auth.uid in get(/databases/$(database)/documents/chats/$(chatId)).data.participants;
      }
    }
  }
}

Project Structure

/chat-app
  index.html
  chat.js
  firebase-config.js
  styles.css

Firebase Config

// firebase-config.js
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-firestore.js";
import { getAuth } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-auth.js";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);

Building the Chat UI

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Chat</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div id="chat-container">
    <div id="chat-header">
      <span id="chat-with">Chat</span>
    </div>

    <!-- Reply preview banner -->
    <div id="reply-banner" style="display:none;">
      <span id="reply-preview-text"></span>
      <button id="cancel-reply">✕</button>
    </div>

    <!-- Messages list -->
    <div id="messages-list"></div>

    <!-- Input area -->
    <div id="chat-input-area">
      <input type="text" id="message-input" placeholder="Type a message..." autocomplete="off" />
      <button id="send-btn">Send</button>
    </div>
  </div>

  <script type="module" src="chat.js"></script>
</body>
</html>

Basic Styles

/* styles.css */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: sans-serif;
  background: #f0f2f5;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#chat-container {
  width: 100%;
  max-width: 600px;
  height: 90vh;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

#chat-header {
  padding: 16px;
  background: #1a73e8;
  color: white;
  font-weight: bold;
  font-size: 16px;
}

#messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message-bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.4;
  position: relative;
  word-wrap: break-word;
}

.message-bubble.sent {
  background: #1a73e8;
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.message-bubble.received {
  background: #e8eaed;
  color: #202124;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.reply-quote {
  background: rgba(0,0,0,0.1);
  border-left: 3px solid rgba(255,255,255,0.6);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 6px;
  font-size: 12px;
  opacity: 0.85;
}

.reactions-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.reaction-pill {
  background: rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}

.reaction-pill:hover { background: rgba(0,0,0,0.15); }

#reply-banner {
  background: #e8f0fe;
  padding: 8px 16px;
  font-size: 13px;
  color: #1a73e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#cancel-reply {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #888;
}

#chat-input-area {
  display: flex;
  padding: 12px 16px;
  gap: 8px;
  border-top: 1px solid #e0e0e0;
}

#message-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  outline: none;
  font-size: 14px;
}

#message-input:focus { border-color: #1a73e8; }

#send-btn {
  padding: 10px 20px;
  background: #1a73e8;
  color: white;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  font-size: 14px;
}

Core Chat Logic

Now for chat.js — this is where everything comes together.

Imports and State

import { db, auth } from "./firebase-config.js";
import {
  collection, addDoc, onSnapshot, query,
  orderBy, serverTimestamp, doc, updateDoc
} from "https://www.gstatic.com/firebasejs/10.7.0/firebase-firestore.js";
import { onAuthStateChanged } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-auth.js";

// State
let currentUser = null;
let chatId = null;        // Set this to your actual chat document ID
let replyingTo = null;    // Holds message being replied to

const messagesList = document.getElementById("messages-list");
const messageInput = document.getElementById("message-input");
const sendBtn = document.getElementById("send-btn");
const replyBanner = document.getElementById("reply-banner");
const replyPreviewText = document.getElementById("reply-preview-text");
const cancelReplyBtn = document.getElementById("cancel-reply");

// For demo purposes — in production, get this from your routing/URL
chatId = "your_chat_id_here";

Auth State

onAuthStateChanged(auth, (user) => {
  if (user) {
    currentUser = user;
    listenToMessages();
  } else {
    // Redirect to login
    window.location.href = "/login.html";
  }
});

Listening to Messages in Real Time

This is the heart of the chat. Firestore's onSnapshot fires every time the messages subcollection changes — new messages appear instantly without any polling.

function listenToMessages() {
  const messagesRef = collection(db, "chats", chatId, "messages");
  const q = query(messagesRef, orderBy("timestamp", "asc"));

  onSnapshot(q, (snapshot) => {
    // On first load, render all messages
    // On subsequent updates, only new messages are added
    snapshot.docChanges().forEach((change) => {
      if (change.type === "added") {
        renderMessage(change.doc.id, change.doc.data());
      }

      if (change.type === "modified") {
        // Update existing message (e.g. new reaction)
        updateMessageElement(change.doc.id, change.doc.data());
      }
    });

    scrollToBottom();
  });
}

Using docChanges() instead of looping through all documents is important — it means we only process what actually changed, not the entire message history every time.

Rendering Messages

function renderMessage(messageId, data) {
  const isSent = data.senderId === currentUser.uid;
  const wrapper = document.createElement("div");
  wrapper.dataset.messageId = messageId;
  wrapper.style.display = "flex";
  wrapper.style.flexDirection = "column";
  wrapper.style.alignItems = isSent ? "flex-end" : "flex-start";

  const bubble = document.createElement("div");
  bubble.className = `message-bubble ${isSent ? "sent" : "received"}`;

  // Reply quote
  if (data.replyTo) {
    const quote = document.createElement("div");
    quote.className = "reply-quote";
    quote.textContent = `${data.replyTo.senderName}: ${data.replyTo.text}`;
    bubble.appendChild(quote);
  }

  // Message text
  const text = document.createElement("p");
  text.textContent = data.text;
  bubble.appendChild(text);

  // Sender name (for received messages)
  if (!isSent) {
    const name = document.createElement("small");
    name.style.cssText = "font-size:11px;color:#888;margin-bottom:2px;";
    name.textContent = data.senderName;
    wrapper.appendChild(name);
  }

  // Reactions row
  const reactionsRow = document.createElement("div");
  reactionsRow.className = "reactions-row";
  reactionsRow.dataset.messageId = messageId;
  renderReactions(reactionsRow, messageId, data.reactions || {});

  // Long press to reply (mobile-friendly)
  let pressTimer;
  bubble.addEventListener("touchstart", () => {
    pressTimer = setTimeout(() => showReplyOption(messageId, data), 500);
  });
  bubble.addEventListener("touchend", () => clearTimeout(pressTimer));

  // Right-click to reply (desktop)
  bubble.addEventListener("contextmenu", (e) => {
    e.preventDefault();
    showReplyOption(messageId, data);
  });

  wrapper.appendChild(bubble);
  wrapper.appendChild(reactionsRow);
  messagesList.appendChild(wrapper);
}

Sending Messages

sendBtn.addEventListener("click", sendMessage);
messageInput.addEventListener("keydown", (e) => {
  if (e.key === "Enter" && !e.shiftKey) {
    e.preventDefault();
    sendMessage();
  }
});

async function sendMessage() {
  const text = messageInput.value.trim();
  if (!text || !currentUser) return;

  messageInput.value = "";

  const messageData = {
    text,
    senderId: currentUser.uid,
    senderName: currentUser.displayName || "User",
    timestamp: serverTimestamp(),
    reactions: {}
  };

  // Attach reply data if replying
  if (replyingTo) {
    messageData.replyTo = {
      messageId: replyingTo.id,
      text: replyingTo.text,
      senderName: replyingTo.senderName
    };
    clearReply();
  }

  try {
    await addDoc(collection(db, "chats", chatId, "messages"), messageData);

    // Update last message on the chat document
    await updateDoc(doc(db, "chats", chatId), {
      lastMessage: text,
      lastMessageTime: serverTimestamp()
    });
  } catch (error) {
    console.error("Failed to send message:", error);
  }
}

Reply-to-Message System

function showReplyOption(messageId, data) {
  replyingTo = { id: messageId, text: data.text, senderName: data.senderName };
  replyPreviewText.textContent = `Replying to ${data.senderName}: "${data.text.substring(0, 40)}${data.text.length > 40 ? "..." : ""}"`;
  replyBanner.style.display = "flex";
  messageInput.focus();
}

cancelReplyBtn.addEventListener("click", clearReply);

function clearReply() {
  replyingTo = null;
  replyBanner.style.display = "none";
  replyPreviewText.textContent = "";
}

When a user long-presses (mobile) or right-clicks (desktop) a message, showReplyOption is called. The reply banner appears showing a preview of the message being replied to. When the next message is sent, the replyTo object is attached to it.

Emoji Reactions

Reactions are stored as a map on each message document — the key is the emoji, and the value is an array of user IDs who reacted with it. This prevents duplicate reactions and makes it easy to toggle.

const EMOJI_OPTIONS = ["❤️", "😂", "😮", "👍", "🔥"];

function renderReactions(container, messageId, reactions) {
  container.innerHTML = "";

  // Render existing reactions
  Object.entries(reactions).forEach(([emoji, uids]) => {
    if (uids.length === 0) return;
    const pill = document.createElement("span");
    pill.className = "reaction-pill";
    pill.textContent = `${emoji} ${uids.length}`;
    pill.addEventListener("click", () => toggleReaction(messageId, emoji, reactions));
    container.appendChild(pill);
  });

  // Add reaction button
  const addBtn = document.createElement("span");
  addBtn.className = "reaction-pill";
  addBtn.textContent = "＋";
  addBtn.style.opacity = "0.5";
  addBtn.addEventListener("click", () => showEmojiPicker(messageId, reactions, container));
  container.appendChild(addBtn);
}

function showEmojiPicker(messageId, reactions, container) {
  // Remove existing picker if open
  document.querySelectorAll(".emoji-picker").forEach(p => p.remove());

  const picker = document.createElement("div");
  picker.className = "emoji-picker";
  picker.style.cssText = `
    position: absolute; background: white; border-radius: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); padding: 6px 10px;
    display: flex; gap: 8px; z-index: 100; font-size: 20px;
  `;

  EMOJI_OPTIONS.forEach((emoji) => {
    const btn = document.createElement("span");
    btn.textContent = emoji;
    btn.style.cursor = "pointer";
    btn.addEventListener("click", () => {
      toggleReaction(messageId, emoji, reactions);
      picker.remove();
    });
    picker.appendChild(btn);
  });

  container.style.position = "relative";
  container.appendChild(picker);

  // Close picker on outside click
  setTimeout(() => {
    document.addEventListener("click", () => picker.remove(), { once: true });
  }, 0);
}

async function toggleReaction(messageId, emoji, currentReactions) {
  const uid = currentUser.uid;
  const updatedReactions = { ...currentReactions };

  if (!updatedReactions[emoji]) {
    updatedReactions[emoji] = [];
  }

  const index = updatedReactions[emoji].indexOf(uid);
  if (index === -1) {
    // Add reaction
    updatedReactions[emoji] = [...updatedReactions[emoji], uid];
  } else {
    // Remove reaction (toggle off)
    updatedReactions[emoji] = updatedReactions[emoji].filter(id => id !== uid);
  }

  const messageRef = doc(db, "chats", chatId, "messages", messageId);
  await updateDoc(messageRef, { reactions: updatedReactions });
}

Updating Messages in Place

When a reaction is added or removed, Firestore triggers the modified event in our onSnapshot listener. We update just the reactions row rather than re-rendering the whole message:

function updateMessageElement(messageId, data) {
  const reactionsRow = document.querySelector(`.reactions-row[data-message-id="${messageId}"]`);
  if (reactionsRow) {
    renderReactions(reactionsRow, messageId, data.reactions || {});
  }
}

Auto-Scroll

function scrollToBottom() {
  messagesList.scrollTop = messagesList.scrollHeight;
}

This is called after every new message renders, keeping the view pinned to the latest message — the standard behavior users expect from any chat app.

Performance Considerations

Paginate old messages: Loading thousands of messages at once is expensive. In production, use limit() to load the last 30–50 messages and add a "Load more" button for history:

import { limit } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-firestore.js";

const q = query(messagesRef, orderBy("timestamp", "asc"), limit(50));

Detach listeners on page leave: Always unsubscribe from onSnapshot when the user navigates away to avoid memory leaks:

const unsubscribe = onSnapshot(q, (snapshot) => { /* ... */ });

window.addEventListener("beforeunload", () => unsubscribe());

Index your queries: If Firestore warns about missing indexes in the console, follow the link it provides to create them. Queries with orderBy on subcollections often need a composite index.

Conclusion

With Firestore's onSnapshot, building a real-time chat system doesn't require WebSockets, a custom server, or any complex infrastructure. The key concepts covered in this tutorial are:

Using subcollections to structure chat data cleanly
Listening to docChanges() for efficient real-time updates
Storing replies as embedded objects on each message
Using a reactions map with user ID arrays for toggle behavior
Updating message elements in place instead of re-rendering

This is the same architecture powering the chat in MySocial, and it handles real users and real-time updates reliably without any backend beyond Firestore.

From here, you can extend the system with:

Typing indicators using a typing field on the chat document
Read receipts by storing readBy: [uid1, uid2] on each message
Media messages by combining this system with Cloudinary uploads (see my previous tutorial)
Push notifications via Firebase Cloud Messaging

How to Integrate Cloudinary Media Uploads into a Firebase Web App

Gabriel Sakala — Tue, 09 Jun 2026 08:38:58 +0000

How to Integrate Cloudinary Media Uploads into a Firebase Web App

Media uploads are one of the trickiest parts of building a web app. Firebase Storage is the obvious choice when you're already in the Firebase ecosystem — but it gets expensive fast, and it doesn't give you image transformations out of the box.

Cloudinary solves both problems. It's built specifically for media: it handles uploads, stores files on a CDN, and lets you resize, crop, and optimize images on the fly via URL parameters. Combined with Firebase for your database and auth, it's a powerful and cost-effective stack.

In this tutorial, I'll show you how to integrate Cloudinary media uploads into a Firebase web app using vanilla JavaScript — no React, no Node.js backend required. This is the exact setup I use in MySocial, a social media platform I built from scratch.

By the end, you'll be able to:

Upload images and videos to Cloudinary directly from the browser
Show upload progress to the user
Store the returned Cloudinary URL in Firestore
Display uploaded media in your app

Prerequisites

A Firebase project with Firestore enabled
A free Cloudinary account
Basic knowledge of JavaScript and Firebase

Setting Up Cloudinary

First, sign up at cloudinary.com if you haven't already. The free tier is generous — 25GB storage and 25GB bandwidth per month.

Once logged in, head to your Dashboard. You'll need:

Cloud Name — a unique identifier for your account
An Upload Preset — this controls upload permissions

Creating an Unsigned Upload Preset

By default, Cloudinary requires a server-side signature for uploads. Since we're uploading directly from the browser (no backend), we'll use an unsigned upload preset.

Go to Settings → Upload
Scroll to Upload Presets and click Add upload preset
Set Signing Mode to Unsigned
Give it a name, e.g. mysocial_uploads
Save

Note: Unsigned presets are fine for user-generated content like profile photos and post media. For sensitive uploads, use a signed preset with a server-side function.

Project Structure

We'll keep this simple. Here's what our file structure looks like:

/project
  index.html
  app.js
  firebase-config.js

Firebase Setup

In firebase-config.js, initialize Firebase and export Firestore:

import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-firestore.js";
import { getAuth } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-auth.js";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);

Building the Upload UI

In index.html, add a simple file input and progress bar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Upload Demo</title>
  <style>
    body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
    #preview { max-width: 100%; margin-top: 16px; border-radius: 8px; display: none; }
    #progress-bar { width: 0%; height: 6px; background: #00c853; border-radius: 4px; transition: width 0.3s; }
    #progress-wrap { background: #eee; border-radius: 4px; margin-top: 12px; display: none; }
    button { padding: 10px 20px; background: #1a73e8; color: white; border: none; border-radius: 6px; cursor: pointer; margin-top: 12px; }
    #status { margin-top: 12px; font-size: 14px; color: #555; }
  </style>
</head>
<body>
  <h2>Upload a Photo</h2>

  <input type="file" id="fileInput" accept="image/*,video/*" />

  <div id="progress-wrap">
    <div id="progress-bar"></div>
  </div>

  <img id="preview" alt="Preview" />
  <p id="status"></p>
  <button id="uploadBtn">Upload</button>

  <script type="module" src="app.js"></script>
</body>
</html>

The Upload Function

Now for the core logic in app.js. Cloudinary accepts uploads via a simple POST request to their API — no SDK required.

import { db, auth } from "./firebase-config.js";
import { collection, addDoc, serverTimestamp } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-firestore.js";

const CLOUD_NAME = "your_cloud_name";       // from Cloudinary dashboard
const UPLOAD_PRESET = "mysocial_uploads";   // the preset you created

const fileInput = document.getElementById("fileInput");
const uploadBtn = document.getElementById("uploadBtn");
const progressBar = document.getElementById("progress-bar");
const progressWrap = document.getElementById("progress-wrap");
const preview = document.getElementById("preview");
const status = document.getElementById("status");

uploadBtn.addEventListener("click", async () => {
  const file = fileInput.files[0];
  if (!file) {
    status.textContent = "Please select a file first.";
    return;
  }

  const url = await uploadToCloudinary(file);
  if (url) {
    await saveToFirestore(url, file.type);
  }
});

Uploading to Cloudinary with Progress Tracking

We use XMLHttpRequest instead of fetch here because fetch doesn't natively support upload progress events.

function uploadToCloudinary(file) {
  return new Promise((resolve, reject) => {
    const formData = new FormData();
    formData.append("file", file);
    formData.append("upload_preset", UPLOAD_PRESET);

    // Optional: organize uploads into folders
    formData.append("folder", "posts");

    const xhr = new XMLHttpRequest();
    const endpoint = `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/auto/upload`;

    xhr.open("POST", endpoint);

    // Track upload progress
    xhr.upload.addEventListener("progress", (e) => {
      if (e.lengthComputable) {
        const percent = Math.round((e.loaded / e.total) * 100);
        progressWrap.style.display = "block";
        progressBar.style.width = percent + "%";
        status.textContent = `Uploading... ${percent}%`;
      }
    });

    xhr.addEventListener("load", () => {
      if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        status.textContent = "Upload complete!";
        progressBar.style.width = "100%";

        // Show preview for images
        if (file.type.startsWith("image/")) {
          preview.src = data.secure_url;
          preview.style.display = "block";
        }

        resolve(data.secure_url);
      } else {
        status.textContent = "Upload failed. Please try again.";
        reject(new Error("Upload failed"));
      }
    });

    xhr.addEventListener("error", () => {
      status.textContent = "Network error during upload.";
      reject(new Error("Network error"));
    });

    xhr.send(formData);
  });
}

The /auto/upload endpoint in the URL automatically detects whether the file is an image or video — no need to hardcode the resource type.

The response from Cloudinary includes several useful fields. The most important one is secure_url, which is the HTTPS link to your uploaded file. You also get public_id (useful for deletions), width, height, format, and more.

Saving the URL to Firestore

Once we have the Cloudinary URL, we save it to a Firestore posts collection alongside the current user's ID and a timestamp:

async function saveToFirestore(mediaUrl, fileType) {
  try {
    const user = auth.currentUser;
    if (!user) {
      status.textContent = "You must be logged in to post.";
      return;
    }

    const resourceType = fileType.startsWith("video/") ? "video" : "image";

    await addDoc(collection(db, "posts"), {
      mediaUrl,
      resourceType,
      userId: user.uid,
      createdAt: serverTimestamp()
    });

    status.textContent = "Post saved successfully!";
  } catch (error) {
    console.error("Firestore error:", error);
    status.textContent = "Failed to save post.";
  }
}

Displaying Uploaded Media

To render posts from Firestore, query the collection and build DOM elements dynamically:

import { getDocs, orderBy, query } from "https://www.gstatic.com/firebasejs/10.7.0/firebase-firestore.js";

async function loadPosts() {
  const feed = document.getElementById("feed");
  const q = query(collection(db, "posts"), orderBy("createdAt", "desc"));
  const snapshot = await getDocs(q);

  snapshot.forEach((doc) => {
    const post = doc.data();
    const item = document.createElement("div");
    item.className = "post";

    if (post.resourceType === "video") {
      item.innerHTML = `
        <video src="${post.mediaUrl}" controls style="max-width:100%;border-radius:8px;"></video>
      `;
    } else {
      item.innerHTML = `
        <img src="${post.mediaUrl}" alt="Post" style="max-width:100%;border-radius:8px;" />
      `;
    }

    feed.appendChild(item);
  });
}

loadPosts();

Bonus: On-the-Fly Image Transformations

One of Cloudinary's best features is URL-based transformations. You can resize, crop, and optimize images just by modifying the URL — no extra code needed.

For example, if your uploaded image URL is:

https://res.cloudinary.com/your_cloud/image/upload/v123/posts/photo.jpg

You can serve a 400px-wide, auto-quality version like this:

https://res.cloudinary.com/your_cloud/image/upload/w_400,q_auto,f_auto/v123/posts/photo.jpg

Common transformation parameters:

Parameter	Description
`w_400`	Resize width to 400px
`h_300`	Resize height to 300px
`c_fill`	Crop to fill dimensions
`q_auto`	Auto-optimize quality
`f_auto`	Auto-select best format (WebP, AVIF, etc.)
`r_max`	Circular crop

A simple helper function to apply transformations:

function cloudinaryUrl(baseUrl, transformations) {
  return baseUrl.replace("/upload/", `/upload/${transformations}/`);
}

// Usage
const thumbnail = cloudinaryUrl(post.mediaUrl, "w_400,h_400,c_fill,q_auto,f_auto");

This is especially useful for feed thumbnails — serve a small optimized version in the feed, and the full image only when the user opens the post.

Handling Errors Gracefully

A few edge cases to handle in production:

File size limits: Cloudinary's free tier allows up to 10MB per upload. Add a client-side check:

const MAX_SIZE_MB = 10;

if (file.size > MAX_SIZE_MB * 1024 * 1024) {
  status.textContent = `File too large. Maximum size is ${MAX_SIZE_MB}MB.`;
  return;
}

File type validation: Even with accept on the input, users can bypass it programmatically. Validate on the JS side too:

const allowedTypes = ["image/jpeg", "image/png", "image/webp", "video/mp4", "video/webm"];

if (!allowedTypes.includes(file.type)) {
  status.textContent = "Unsupported file type.";
  return;
}

Upload cancellation: You can cancel an in-progress upload by calling xhr.abort(). Useful for a "Cancel" button:

let activeXhr = null;

cancelBtn.addEventListener("click", () => {
  if (activeXhr) {
    activeXhr.abort();
    status.textContent = "Upload cancelled.";
    progressBar.style.width = "0%";
  }
});

// Inside uploadToCloudinary, store the xhr reference
activeXhr = xhr;

Conclusion

With just a few dozen lines of vanilla JavaScript, you now have a fully functional media upload system that:

Sends files directly to Cloudinary from the browser
Tracks upload progress in real time
Stores the media URL in Firestore
Displays uploaded content dynamically
Supports on-the-fly image transformations via URL

This approach avoids Firebase Storage costs and gives you powerful media handling that scales well. It's the same architecture behind MySocial's profile photos, feed posts, and chat attachments — and it's held up well in production.

If you want to go further, look into:

Signed uploads for added security using Firebase Cloud Functions
Cloudinary webhooks for post-processing notifications
Real-time Firestore listeners (onSnapshot) for a live-updating feed.