mate-academy · aakash1sadhu · Apr 28, 2026
diff --git a/src/client/index.html b/src/client/index.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Node Chat</title>
+  </head>
+
+  <body>
+    <div id="app">
+      <h1>Node Chat</h1>
+
+      <div id="user-block">
+        <input id="username-input" placeholder="Enter username" />
+        <button id="save-btn">Save</button>
+      </div>
+
+      <p id="current-user"></p>
+      <p id="status">Connecting...</p>
+
+      <hr />
+
+      <section id="rooms-section">
+        <h2>Rooms</h2>
+
+        <div id="room-form">
+          <input id="room-input" placeholder="New room name" />
+          <button id="create-room-btn">Create room</button>
+        </div>
+
+        <ul id="rooms-list"></ul>
+        <p id="current-room">Current room: none</p>
+      </section>
+
+      <hr />
+
+      <section id="chat-section">
+        <h2>Messages</h2>
+        <ul id="messages-list"></ul>
+
+        <div id="message-form">
+          <input id="message-input" placeholder="Type a message" />
+          <button id="send-btn">Send</button>
+        </div>
+      </section>
+    </div>
+
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/src/client/main.js b/src/client/main.js
@@ -0,0 +1,234 @@
+/* eslint-env browser */
+
+import { io } from 'socket.io-client';
+import './style.css';
+
+const connectionStatusEl = document.querySelector('#status');
+const usernameInputEl = document.querySelector('#username-input');
+const saveBtnEl = document.querySelector('#save-btn');
+const currentUserEl = document.querySelector('#current-user');
+
+const roomInputEl = document.querySelector('#room-input');
+const createRoomBtnEl = document.querySelector('#create-room-btn');
+const roomsListEl = document.querySelector('#rooms-list');
+const currentRoomEl = document.querySelector('#current-room');
+
+const messagesListEl = document.querySelector('#messages-list');
+const messageInputEl = document.querySelector('#message-input');
+const sendBtnEl = document.querySelector('#send-btn');
+
+const socket = io('http://localhost:3000');
+
+let currentUsername = localStorage.getItem('username') || '';
+let currentRoomId = null;
+let rooms = [];
+
+function renderRooms() {
+  roomsListEl.innerHTML = '';
+
+  rooms.forEach((room) => {
+    const li = document.createElement('li');
+
+    li.className = 'room-item';
+
+    const joinButton = document.createElement('button');
+
+    joinButton.textContent = room.name;
+    joinButton.type = 'button';
+    joinButton.className = 'room-join-btn';
+
+    if (room.id === currentRoomId) {
+      joinButton.disabled = true;
+    }
+
+    joinButton.addEventListener('click', () => {
+      socket.emit('room:join', { roomId: room.id });
+    });
+
+    const renameButton = document.createElement('button');
+
+    renameButton.textContent = 'Rename';
+    renameButton.type = 'button';
+    renameButton.className = 'room-action-btn';
+
+    renameButton.addEventListener('click', () => {
+      const newName = prompt('Enter new room name', room.name);
+
+      if (!newName) {
+        return;
+      }
+
+      socket.emit('room:rename', {
+        roomId: room.id,
+        name: newName.trim(),
+      });
+    });
+
+    li.append(joinButton, renameButton);
+
+    if (room.id !== 'general') {
+      const deleteButton = document.createElement('button');
+
+      deleteButton.textContent = 'Delete';
+      deleteButton.type = 'button';
+      deleteButton.className = 'room-action-btn';
+
+      deleteButton.addEventListener('click', () => {
+        const shouldDelete = confirm(`Delete room "${room.name}"?`);
+
+        if (!shouldDelete) {
+          return;
+        }
+
+        socket.emit('room:delete', { roomId: room.id });
+      });
+
+      li.append(deleteButton);
+    }
+
+    roomsListEl.append(li);
+  });
+}
+
+function updateCurrentRoomText() {
+  const activeRoom = rooms.find((room) => room.id === currentRoomId);
+
+  currentRoomEl.textContent = activeRoom
+    ? `Current room: ${activeRoom.name}`
+    : 'Current room: none';
+}
+
+function renderMessage(message) {
+  const li = document.createElement('li');
+
+  li.className = 'message-item';
+  li.textContent = `[${message.time}] ${message.author}: ${message.text}`;
+
+  messagesListEl.append(li);
+}
+
+function renderMessages(messages) {
+  messagesListEl.innerHTML = '';
+  messages.forEach(renderMessage);
+}
+
+function setUser(username) {
+  currentUsername = username;
+  localStorage.setItem('username', username);
+
+  currentUserEl.textContent = `You are: ${username}`;
+
+  usernameInputEl.style.display = 'none';
+  saveBtnEl.style.display = 'none';
+
+  socket.emit('user:set', { username });
+}
+
+const savedUsername = localStorage.getItem('username');
+
+if (savedUsername) {
+  setUser(savedUsername);
+}
+
+socket.on('connect', () => {
+  connectionStatusEl.textContent = `Connected: ${socket.id}`;
+
+  if (currentUsername) {
+    socket.emit('user:set', { username: currentUsername });
+  }
+
+  socket.emit('rooms:get');
+});
+
+socket.on('disconnect', () => {
+  connectionStatusEl.textContent = 'Disconnected';
+});
+
+socket.on('rooms:list', (serverRooms) => {
+  rooms = serverRooms;
+
+  const roomStillExists = rooms.some((room) => room.id === currentRoomId);
+
+  if (!roomStillExists) {
+    currentRoomId = null;
+    messagesListEl.innerHTML = '';
+  }
+
+  renderRooms();
+  updateCurrentRoomText();
+});
+
+socket.on('room:joined', ({ roomId }) => {
+  currentRoomId = roomId;
+  renderRooms();
+  updateCurrentRoomText();
+});
+
+socket.on('room:history', ({ roomId, messages }) => {
+  if (roomId !== currentRoomId) {
+    return;
+  }
+
+  renderMessages(messages);
+});
+
+socket.on('message:new', ({ roomId, message }) => {
+  if (roomId !== currentRoomId) {
+    return;
+  }
+
+  renderMessage(message);
+});
+
+socket.on('error:message', ({ message }) => {
+  alert(message);
+});
+
+saveBtnEl.addEventListener('click', () => {
+  const username = usernameInputEl.value.trim();
+
+  if (!username) {
+    return;
+  }
+
+  setUser(username);
+});
+
+createRoomBtnEl.addEventListener('click', () => {
+  const roomName = roomInputEl.value.trim();
+
+  if (!roomName) {
+    return;
+  }
+
+  socket.emit('room:create', { name: roomName });
+  roomInputEl.value = '';
+});
+
+roomInputEl.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') {
+    createRoomBtnEl.click();
+  }
+});
+
+sendBtnEl.addEventListener('click', () => {
+  const text = messageInputEl.value.trim();
+
+  if (!text || !currentUsername || !currentRoomId) {
+    return;
+  }
+
+  socket.emit('message:send', {
+    roomId: currentRoomId,
+    author: currentUsername,
+    text,
+  });
+
+  messageInputEl.value = '';
+});
+
+messageInputEl.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') {
+    sendBtnEl.click();
+  }
+});
diff --git a/src/client/style.css b/src/client/style.css
@@ -0,0 +1,64 @@
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  background: #f4f4f4;
+}
+
+#app {
+  max-width: 700px;
+  margin: 40px auto;
+  padding: 24px;
+  background: #fff;
+  border-radius: 12px;
+}
+
+#user-block,
+#room-form,
+#message-form {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+input,
+button {
+  padding: 8px 12px;
+  font-size: 16px;
+}
+
+#rooms-list,
+#messages-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+#messages-list li {
+  margin-bottom: 8px;
+}
+
+#room-input,
+#message-input {
+  flex: 1;
+}
+
+.room-item {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.room-join-btn {
+  flex: 1;
+  text-align: left;
+}
+
+.room-action-btn {
+  white-space: nowrap;
+}
+
+.message-item {
+  padding: 10px 12px;
+  background: #f1f1f1;
+  border-radius: 8px;
+}
diff --git a/src/index.js b/src/index.js