update code review feedback

Author: Abubakar-Meigag

README.md

@@ -1,50 +1,3 @@
 # Coursework
 
 Exercises to practice and solidify your understanding of the Decomposition module of the Software Development Course.
-
----
-
-# Beeko Chat App
-
-A real-time chat application where users can send and receive messages instantly without refreshing the page.
-
-## Project Structure
-
-```
-chat-app/
-  client/   - Vite + React + TypeScript frontend
-  server/   - Node.js + Express backend
-```
-
-## Features
-
-- Send a message to the chat
-- See all messages when opening the chat
-- New messages appear instantly for all connected users
-- Message count display
-- Username persisted across sessions
-
-## How It Works
-
-The frontend loads existing messages from the server on page load via a REST API. When a user sends a message, it is posted to the server which saves it and broadcasts it to all connected clients over a WebSocket channel. Every connected user receives the new message instantly without needing to refresh.
-
-## Getting Started
-
-**Backend**
-```bash
-cd server
-npm install
-node index.js
-```
-
-**Frontend**
-```bash
-cd client
-npm install
-npm run dev
-```
-
-## Deployment
-
-- Backend is deployed as a Docker container
-- Frontend is deployed as a static site via Nixpacks

chat-app/README.md

@@ -32,3 +32,53 @@ Exploring and understanding different ways of sending information between a clie
 * 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
+
+
+---
+## Implementation
+
+
+# Beeko Chat App
+
+A real-time chat application where users can send and receive messages instantly without refreshing the page.
+
+## Project Structure
+
+```
+chat-app/
+  client/   - Vite + React + TypeScript frontend
+  server/   - Node.js + Express backend
+```
+
+## Features
+
+- Send a message to the chat
+- See all messages when opening the chat
+- New messages appear instantly for all connected users
+- Message count display
+- Username persisted across sessions
+
+## How It Works
+
+The frontend loads existing messages from the server on page load via a REST API. When a user sends a message, it is posted to the server which saves it and broadcasts it to all connected clients over a WebSocket channel. Every connected user receives the new message instantly without needing to refresh.
+
+## Getting Started
+
+**Backend**
+```bash
+cd server
+npm install
+node index.js
+```
+
+**Frontend**
+```bash
+cd client
+npm install
+npm run dev
+```
+
+## Deployment
+
+- Backend is deployed as a Docker container
+- Frontend is deployed as a static site via Nixpacks

chat-app/client/src/App.css

@@ -40,4 +40,10 @@ body {
   border-radius: 12px;
   padding: 1rem;
   background-color: #16213e;
+}
+
+.error {
+  color: #f87171;
+  text-align: center;
+  font-size: 0.9rem;
 }

chat-app/client/src/App.tsx

@@ -1,14 +1,16 @@
-import { useState, useEffect }  from "react";
-import MessageList              from "./components/MessageList";
-import MessageForm              from "./components/MessageForm";
-import type { Message }         from "./types";
+import { useState, useEffect } from "react";
+import MessageList from "./components/MessageList";
+import MessageForm from "./components/MessageForm";
+import type { Message } from "./types";
 import "./App.css";
 
-const SERVER_URL  = "https://ggjpdb4d0e0lrtcdbxpdpsrk.hosting.codeyourfuture.io";
-const WS_URL      = "wss://ggjpdb4d0e0lrtcdbxpdpsrk.hosting.codeyourfuture.io";
+const SERVER_URL = "https://ggjpdb4d0e0lrtcdbxpdpsrk.hosting.codeyourfuture.io";
+const WS_URL = "wss://ggjpdb4d0e0lrtcdbxpdpsrk.hosting.codeyourfuture.io";
 
 function App() {
   const [messages, setMessages] = useState<Message[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
   const [name, setName] = useState<string>(() => {
     return localStorage.getItem("chatNameKey") ?? "";
   });
@@ -38,13 +40,16 @@ function App() {
   }, [name]);
 
   const handleSend = async (text: string) => {
+
     try {
       await fetch(`${SERVER_URL}/messages`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ name, text }),
       });
+
     } catch (err) {
+      setError("Failed to send message. Please try again.");
       console.error("failed to send message", err);
     }
   };
@@ -54,6 +59,7 @@ function App() {
       <h1 className="app_title">Beeko Chat App</h1>
       <div className="app_container">
         <MessageList messages={messages} />
+        {error && <p className="error">{error}</p>}
         <MessageForm name={name} onNameChange={setName} onSend={handleSend} messageCount={messages.length} />
       </div>
     </div>

chat-app/server/endPoints/postMessage.js

@@ -12,10 +12,7 @@ const postMessage = (req, res, wss) => {
     id: uuidv4(),
     name,
     text,
-    timestamp: new Date().toLocaleTimeString([], {
-      hour: "2-digit",
-      minute: "2-digit",
-    }),
+    timestamp: new Date().toISOString(),
   };
 
   messages.push(newMessage);
@@ -26,7 +23,7 @@ const postMessage = (req, res, wss) => {
     }
   });
 
-  res.status(201).json(newMessage);
+  res.status(201).end();
 };
 
 module.exports = postMessage;