West Midlands | 26 March SDC | Iswat Bello | Sprint 2 | chat app

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+package-lock.json
+.env
+.DS_Store
+*.log
+dist/
+build/
+.vscode/

chat-app/README.md

@@ -1,34 +1,79 @@
-# Write and Deploy Chat Application Frontend and Backend
+## Changes Made
 
-### Link to the coursework
+### Backend Implementation (`backend/`)
 
-https://sdc.codeyourfuture.io/decomposition/sprints/2/prep/
+#### `server.js` (New)
 
-You must complete and deploy a chat application. You have two weeks to complete this.
+- Set up Express server with CORS middleware
+- Implemented **POST `/messages`** endpoint with input validation
+  - Validates sender name and message text
+  - Creates message objects with id, sender, text, likes, and dislikes
+  - Returns 201 status on success, 400 on validation error
+  - Triggers long polling callbacks to notify waiting clients
+- Implemented **GET `/messages`** endpoint with long polling
+  - Accepts `?since=` query parameter for incremental message loading
+  - Returns only messages with id > sinceId
+  - Holds client requests until new messages arrive (long polling)
+  - Handles edge case where since=0 correctly
+- Implemented **POST `/messages/:id/like`** endpoint
+  - Increments like count for specified message
+  - Notifies all waiting clients via long polling
+  - Returns 200 on success, 404 if message not found
 
-It must support at least the following requirements:
-* As a user, I can send add a message to the chat.
-* As a user, when I open the chat I see the messages that have been sent by any user.
-* As a user, when someone sends a message, it gets added to what I see.
+#### `package.json` (New)
 
-It must also support at least one additional feature.
+- Configured as ES module project (`"type": "module"`)
+- Added Express 5.2.1 dependency
+- Added CORS 2.8.6 dependency
 
-### Why are we doing this?
+### Frontend Implementation (`frontend/`)
 
-Learning about deploying multiple pieces of software that interact.
+#### `index.html` (New)
 
-Designing and implementing working software that users can use.
+- Semantic HTML structure with proper meta tags
+- Chat form with sender name and message inputs
+- Message container div for displaying chat history
+- Deferred JavaScript execution for proper DOM loading
 
-Exploring and understanding different ways of sending information between a client and server.
+#### `script.js` (New)
 
-### Maximum time in hours
+- **`getAllMessages()`** async function
+  - Fetches messages from backend with `?since=` parameter
+  - Implements incremental message loading via `lastIdSeen` tracking
+  - Updates existing message likes without re-rendering
+  - Creates DOM elements for new messages with text, like count, and like button
+  - Uses long polling with `setTimeout(getAllMessages, 0)` for real-time updates
+  - Includes error handling with automatic retry on fetch failure
 
-16
+- **Form submission handler**
+  - Validates sender name and message text
+  - Sends POST request with JSON payload
+  - Clears input fields after successful submission
+  - Includes try-catch error handling
 
-### How to submit
+- **Like button functionality**
+  - Sends POST request to `/messages/:id/like` endpoint
+  - Extracts current like count from DOM
+  - Provides immediate UI feedback (optimistic update)
+  - Updates display instantly without waiting for server response
 
-* Fork the Module-Decomposition repository
-* Develop and deploy your chat app
-* Create a pull request back into the original Module-Decomposition repo, including:
-    * A link to the deployed frontend on the CYF hosting environment
-    * A link to the deployed backend on the CYF hosting environment
+#### `styles.css` (New)
+
+- Styled message containers with border, padding, and rounded corners
+- Light gray background (#f9f9f9) for message boxes
+- Styled like buttons with blue background (#007bff) and white text
+- Proper spacing and cursor pointer for better UX
+
+## Testing Instructions
+
+### Setup
+
+```bash
+# Install backend dependencies
+cd backend
+npm install
+
+# Start backend server
+node server.js
+
+```

chat-app/backend/package.json

@@ -0,0 +1,9 @@
+{
+  "type": "module",
+  "dependencies": {
+    "cors": "^2.8.6",
+    "express": "^5.2.1",
+    "http": "^0.0.1-security",
+    "websocket": "^1.0.35"
+  }
+}

chat-app/backend/server.js

@@ -0,0 +1,216 @@
+import express from "express";
+import cors from "cors";
+import { server as WebSocketServer } from "websocket";
+import http from "http";
+
+const app = express();
+const server = http.createServer(app);
+const webSocketServer = new WebSocketServer({ httpServer: server });
+
+const port = process.env.PORT || 3000;
+
+const messages = [];
+const callBacksForNewMessages = [];
+let activeConnections = [];
+
+// Enable CORS for all routes
+app.use(cors());
+
+// Middleware to parse JSON request body
+app.use(express.json());
+
+webSocketServer.on("request", (request) => {
+  const connection = request.accept(null, request.origin);
+
+  activeConnections.push(connection);
+
+  console.log("A user connected");
+
+  const sinceId = Number(request.resourceURL.query.since);
+
+  if (!isNaN(sinceId)) {
+    const messagesSineId = messages.filter((message) => message.id > sinceId);
+
+    messagesSineId.forEach((message) => {
+      const messageSinceIdObject = {
+        command: "new-message",
+        payload: message,
+      };
+      connection.sendUTF(JSON.stringify(messageSinceIdObject));
+    });
+  }
+
+  connection.on("close", () => {
+    activeConnections = activeConnections.filter(
+      (connectionToRemove) => connection !== connectionToRemove,
+    );
+  });
+});
+
+function isValidMessage(req, res) {
+  // Check if request body exists at all
+  if (!req.body) {
+    res.status(400).send("No body provided");
+    return false;
+  }
+
+  const { text, sender } = req.body;
+
+  // Check if the inputs are strings
+  if (typeof text !== "string" || typeof sender !== "string") {
+    res.status(400).send("Inputs must be strings");
+    return false;
+  }
+
+  // Check if the inputs are not a falsy value
+  if (!text.trim() || !sender.trim()) {
+    res.status(400).send("Please provide both text and a sender name.");
+    return false;
+  }
+
+  return {
+    text: text.trim(),
+    sender: sender.trim(),
+  };
+}
+
+app.post("/messages", (req, res) => {
+  const requestBody = isValidMessage(req, res);
+
+  if (!requestBody) {
+    return;
+  }
+
+  // Create the message object
+  const newMessage = {
+    id: messages.length,
+    sender: requestBody.sender,
+    text: requestBody.text,
+    likes: 0,
+    dislikes: 0,
+  };
+
+  // Add the new message to the messages array (the storage)
+  messages.push(newMessage);
+
+  // Websocket Broadcast
+  activeConnections.forEach((connection) => {
+    // Turn new message object to a string
+    const newMessageString = {
+      command: "new-message",
+      payload: newMessage,
+    };
+
+    // Send the string message to the connection
+    connection.sendUTF(JSON.stringify(newMessageString));
+  });
+
+  // long polling Broadcast
+  while (callBacksForNewMessages.length > 0) {
+    const callBack = callBacksForNewMessages.pop();
+
+    callBack([newMessage]);
+  }
+
+  // Finally, respond to the person who actually sent the POST request
+  res.status(201).send(newMessage);
+});
+
+app.get("/messages", (req, res) => {
+  const sinceValue = req.query.since;
+
+  let sinceId;
+  // We check if the value exists at all.
+  // If it's "0", this check is true, and we use 0.
+  if (sinceValue !== undefined) {
+    sinceId = Number(sinceValue);
+  } else {
+    sinceId = -1;
+  }
+
+  const messagesSinceId = messages.filter((message) => message.id > sinceId);
+
+  if (messagesSinceId.length === 0) {
+    callBacksForNewMessages.push((value) => res.send(value));
+  } else {
+    res.send(messagesSinceId);
+  }
+});
+
+function broadcastCounterUpdate(data) {
+  activeConnections.forEach((connection) => {
+    // Turn new message object to a string
+    const updateMessageString = {
+      command: "update-counter",
+      payload: data,
+    };
+
+    // Send the string message to the connection
+    connection.sendUTF(JSON.stringify(updateMessageString));
+  });
+
+  while (callBacksForNewMessages.length > 0) {
+    const callBack = callBacksForNewMessages.pop();
+
+    callBack([data]);
+  }
+}
+
+function findMessageOrError(req, res) {
+  // Get the id from the URL
+  const idFromUrl = req.params.id;
+
+  //convert to number
+  const idAsNumber = Number(idFromUrl);
+
+  const messageWithIdAsNumber = messages[idAsNumber];
+
+  if (!messageWithIdAsNumber) {
+    res.status(404).send("Message not found");
+    return null;
+  }
+
+  return messageWithIdAsNumber;
+}
+app.post("/messages/:id/like", (req, res) => {
+  const messageWithIdAsNumber = findMessageOrError(req, res);
+
+  if (!messageWithIdAsNumber) {
+    return;
+  }
+  messageWithIdAsNumber.likes += 1;
+
+  const dataToSendToClient = {
+    id: messageWithIdAsNumber.id,
+    likes: messageWithIdAsNumber.likes,
+    dislikes: messageWithIdAsNumber.dislikes,
+  };
+
+  broadcastCounterUpdate(dataToSendToClient);
+
+  res.status(200).send(dataToSendToClient);
+});
+
+app.post("/messages/:id/dislike", (req, res) => {
+  const messageWithIdAsNumber = findMessageOrError(req, res);
+
+  if (!messageWithIdAsNumber) {
+    return;
+  }
+  messageWithIdAsNumber.dislikes += 1;
+
+  const dataToSendToClient = {
+    id: messageWithIdAsNumber.id,
+    likes: messageWithIdAsNumber.likes,
+    dislikes: messageWithIdAsNumber.dislikes,
+  };
+
+  broadcastCounterUpdate(dataToSendToClient);
+
+  res.status(200).send(dataToSendToClient);
+});
+
+// Start the server
+server.listen(port, () => {
+  console.log(`Chat app listening on port ${port}`);
+});

chat-app/frontend/index-websocket.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script-websocket.js" defer></script>
+    <title>Chat App</title>
+  </head>
+  <body>
+    <h1>Chat App</h1>
+
+    <form id="chat-form">
+      <label for="chat-sender">Name</label>
+      <input type="text" id="chat-sender" />
+      <label for="chat-message">Message</label>
+      <input id="chat-message" />
+      <button type="submit">Send</button>
+    </form>
+
+    <div id="all-messages"></div>
+  </body>
+</html>

chat-app/frontend/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles.css" />
+    <script src="script.js" defer></script>
+    <title>Chat App</title>
+  </head>
+  <body>
+    <h1>Chat App</h1>
+
+    <form id="chat-form">
+      <label for="chat-sender">Name</label>
+      <input type="text" id="chat-sender" />
+      <label for="chat-message">Message</label>
+      <input id="chat-message" />
+      <button type="submit">Send</button>
+    </form>
+
+    <div id="all-messages"></div>
+  </body>
+</html>