Remix

Make your own version of Pulse Chat

Edit the prompt below and generate a customized version in seconds.

Original by Mohamed Mm

Describe your app

<!DOCTYPE html>
<html>
<head>
  <title>Chat App</title>
  <style>
    body { font-family: Arial; background:#f2f2f2; }
    #chat { height: 400px; overflow-y: scroll; border:1px solid #ccc; padding:10px; background:white; }
    input { padding:10px; width:80%; }
    button { padding:10px; }
    .msg { margin:5px 0; }
  </style>
</head>
<body>

<h2>🔥 Simple Chat App</h2>

<script type="module">
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
  import { getAuth, signInAnonymously } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
  import {
    getFirestore,
    collection,
    addDoc,
    onSnapshot,
    orderBy,
    query,
    serverTimestamp
  } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";

// 🔥 YOUR FIREBASE CONFIG
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };

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

let userId = null;

// Login anonymously
  signInAnonymously(auth).then(user => {
    userId = user.user.uid;
  });

const chatBox = document.getElementById("chat");

// Listen for messages in real-time
  const q = query(collection(db, "messages"), orderBy("time"));

onSnapshot(q, (snapshot) => {
    chatBox.innerHTML = "";
    snapshot.forEach(doc => {
      const data = doc.data();
      const div = document.createElement("div");
      div.className = "msg";
      div.textContent = (data.user === userId ? "Me: " : "User: ") + data.text;
      chatBox.appendChild(div);
    });
    chatBox.scrollTop = chatBox.scrollHeight;
  });

// Send message
  window.sendMessage = async function () {
    const input = document.getElementById("msgInput");
    if (!input.value) return;

await addDoc(collection(db, "messages"), {
      text: input.value,
      user: userId,
      time: serverTimestamp()
    });

input.value = "";
  };
</script>

</body>
</html>

Free to use. No credit card required.