London | 26-SDC-MAR | Jamal Laqdiem | Sprint 2 | Chat App by jamallaqdiem · Pull Request #92 · CodeYourFuture/Module-Decomposition

jamallaqdiem · 2026-06-05T09:42:00Z

Self checklist

I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
My changes meet the requirements of the task
I have tested my changes
My changes follow the style guide

Changelist

Implementing the chat app using react typescript.

The app support additional features like:

added likes button
Added dislike button
Storing the likes and dislikes count
Persistent username

Urls to Coolify:
Client Url
Server Url

feat: init full-stack typescript workspace with tailwind v4

Feat: Implement initial message fetching API and layout UI.

feat: implement ChatInput component with POST fetch and auto-scroll UX

feat: implement real-time message sync using WebSocket protocol

…nd fix auto rendering bugs

feat: implement real-time likes and dislikes logic using websockets a…

…ayout badge

jamallaqdiem · 2026-06-05T09:43:32Z

Client Url
Server Url

cjyuan · 2026-06-06T10:28:26Z

The spec has this requirement:

It must also support at least one additional feature.

The Changelist section in the PR description would be the best place to include this info.

The PR description is also a better place to include the frontend and backend links because it would make finding all info in one place easier.

Can you also fix the Markdown syntax of the checkboxes in the PR description?

jamallaqdiem · 2026-06-06T14:11:55Z

@cjyuan Thanks for reviewing, I addressed the issues in the PR, could you have a look please?

cjyuan

Code could use some documentation (comments).

A useful rule of thumb is to ask yourself whether you could still explain or figure out how the code works few months from now. If the answer is uncertain, consider adding a comment to help future readers understand the intent and reasoning behind it.

I will review this PR in several rounds. Can you addressed the current feedback first?

cjyuan · 2026-06-06T11:08:38Z

+  const { username, text } = req.body;
+  if (!username || !text) {
+    return res.status(400).json({
+      message: "Expected body to be a JSON object",
+    });
+  }


It's good practice to validate all request inputs.

Note: A more robust implementation

Should also handle the case where req.body is null, which would cause const { text, sender } = req.body; to throw.

Should not assume text and sender are strings (if they existed)

In this exercise, let's assume the request is always coming from your client-side code. So no change needed.

cjyuan · 2026-06-06T11:24:57Z

+  const messageId = Date.now();
+  const timestamp = new Date().toISOString();
+  const createMessages = {
+    id: messageId,


Relying on Date.now() for IDs can lead to collisions if multiple messages are processed within the same millisecond. A UUID-based approach is safer and ensures uniqueness.

cjyuan · 2026-06-06T13:23:19Z

+  isNameSaved: boolean;
+}
+
+const FormInput = ({


Why not name the file FormInput.tsx or name this ChatInput? Using the same name makes locating the component by its file name easier.

cjyuan · 2026-06-06T13:30:31Z

+  const handleFormChat = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!formChat.username.trim() || !formChat.text.trim()) {
+      showNotification("Username and message cannot be empty!", "text-red-500");


When I entered an empty string in any of the two input fields and clicked "SUBMIT", I expected to see this notification message, but I didn't see any message show up on the UI. Why?

cjyuan · 2026-06-06T14:54:55Z

+    <main className="min-h-screen bg-slate-900 text-slate-100 flex flex-col items-center justify-center p-4 antialiased">
+      <div className="w-full max-w-4xl bg-slate-800 rounded-2xl shadow-2xl border border-slate-700/50 overflow-hidden flex flex-col h-[800px]">
+        {/* Header Section */}
+        <div className="bg-slate-800/80 backdrop-blur-md px-6 py-4 border-b border-slate-700 flex items-center justify-between">
+          <div className="flex items-center space-x-3">
+            <div className="w-3 h-3 bg-emerald-400 rounded-full animate-pulse" />
+            <h1 className="text-xl font-bold tracking-wide bg-gradient-to-r content-box from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
+              Jamal's Community Chat
+            </h1>
+          </div>
+          <span className="text-xs font-semibold px-2.5 py-1 bg-slate-700 text-slate-300 rounded-full border border-slate-600">
+            {chat.length} messages
+          </span>
+        </div>
+
+        {/* Chat Container */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-4 custom-scrollbar">
+          {chat.map((message) => (


Could consider separate presentation logic from the application logic.

Cloud also consider implement the Chat container as a separate component.

cjyuan · 2026-06-06T15:06:05Z

+        <div className="p-4 bg-slate-800/50 border-t border-slate-700/60 flex justify-end">
+          <button
+            onClick={arrayMessages}
+            className="px-5 py-2.5 text-sm font-medium text-slate-900 bg-gradient-to-r from-emerald-400 to-cyan-400 hover:from-emerald-500 hover:to-cyan-500 rounded-xl shadow-lg shadow-emerald-500/10 hover:shadow-emerald-500/20 active:scale-[0.98] transition-all duration-150"


These long lists of class names, similar to inline CSS, make the code harder to read and maintain. Could you find a way to separate the styling from the JSX/HTML markup?

Note: This comment applies to all elements with lengthy class list.

jamallaqdiem · 2026-06-06T16:53:53Z

Code could use some documentation (comments).

A useful rule of thumb is to ask yourself whether you could still explain or figure out how the code works few months from now. If the answer is uncertain, consider adding a comment to help future readers understand the intent and reasoning behind it.

I will review this PR in several rounds. Can you addressed the current feedback first?

Thanks for reviewing, I will add the comments and address the feedbacks.

jamallaqdiem added 15 commits May 15, 2026 21:28

feat: init full-stack typescript workspace with tailwind v4

9cb7064

Merge pull request #1 from jamallaqdiem/feat-setup-client-server

535c924

feat: init full-stack typescript workspace with tailwind v4

Feat: Implement initial message fetching API and layout UI.

0a8adf5

Merge pull request #3 from jamallaqdiem/feat-fetch-messages

4085d76

Feat: Implement initial message fetching API and layout UI.

feat: implement ChatInput component with POST fetch and auto-scroll UX

f7264da

Merge pull request #5 from jamallaqdiem/feat-create-roundtrip-messages

97779a6

feat: implement ChatInput component with POST fetch and auto-scroll UX

feat: implement real-time message sync using WebSocket protocol

51b64a9

Merge pull request #7 from jamallaqdiem/feat-websocket-realtime-sync

721357f

feat: implement real-time message sync using WebSocket protocol

feat: implement real-time likes and dislikes logic using websockets a…

c5959f1

…nd fix auto rendering bugs

Merge pull request #9 from jamallaqdiem/feat-real-time-reactions

bf24c91

feat: implement real-time likes and dislikes logic using websockets a…

persist username via localStorage and implement conditional profile l…

3f2804c

…ayout badge

Update the HTTP URL

a97a4a6

update the node version.

52e3fce

adding the missing comma

7df471a

Update API endpoints for chat application

9601f26

jamallaqdiem added Module-Decomposition The name of the module. 📅 Sprint 2 Assigned during Sprint 2 of this module Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jun 5, 2026

jamallaqdiem mentioned this pull request Jun 5, 2026

London | 26-SDC-MAR | Jamal Laqdiem| Sprint 2 | Chat App #88

Closed

cjyuan reviewed Jun 6, 2026

View reviewed changes

cjyuan added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jun 6, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

London | 26-SDC-MAR | Jamal Laqdiem | Sprint 2 | Chat App #92

London | 26-SDC-MAR | Jamal Laqdiem | Sprint 2 | Chat App #92
jamallaqdiem wants to merge 15 commits into
CodeYourFuture:mainfrom
jamallaqdiem:feat-complete-chat-app

jamallaqdiem commented Jun 5, 2026 •

edited

Loading

Uh oh!

jamallaqdiem commented Jun 5, 2026

Uh oh!

cjyuan commented Jun 6, 2026

Uh oh!

jamallaqdiem commented Jun 6, 2026

Uh oh!

cjyuan left a comment

Uh oh!

cjyuan Jun 6, 2026 •

edited

Loading

Uh oh!

cjyuan Jun 6, 2026

Uh oh!

cjyuan Jun 6, 2026 •

edited

Loading

Uh oh!

cjyuan Jun 6, 2026

Uh oh!

cjyuan Jun 6, 2026

Uh oh!

cjyuan Jun 6, 2026

Uh oh!

jamallaqdiem commented Jun 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

jamallaqdiem commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelist

Uh oh!

jamallaqdiem commented Jun 5, 2026

Uh oh!

cjyuan commented Jun 6, 2026

Uh oh!

jamallaqdiem commented Jun 6, 2026

Uh oh!

cjyuan left a comment

Choose a reason for hiding this comment

Uh oh!

cjyuan Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cjyuan Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

cjyuan Jun 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cjyuan Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

cjyuan Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

cjyuan Jun 6, 2026

Choose a reason for hiding this comment

Uh oh!

jamallaqdiem commented Jun 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jamallaqdiem commented Jun 5, 2026 •

edited

Loading

cjyuan Jun 6, 2026 •

edited

Loading

cjyuan Jun 6, 2026 •

edited

Loading