Add like button and counter

Author: craig-dsilva

chat-app/client/src/components/Chat/Chat.jsx

@@ -15,7 +15,12 @@ const Chat = ({ messages, sendMessage }) => {
     <div className="container">
       <ul className="messages">
         {messages.map((message) => (
-          <Message message={message.text} messageTime={message.time} />
+          <Message
+            message={message.text}
+            messageTime={message.time}
+            likes={message.likes}
+            dislikes={message.dislikes}
+          />
         ))}
       </ul>
       <div className="chat-box">

chat-app/client/src/components/Message/Message.css

@@ -6,14 +6,26 @@
 }
 
 .message-text,
-.message-time {
+.message-info {
   margin: 0;
 }
 
 .message-text {
   font-size: large;
 }
 
-.message-time {
+.message-info {
   font-size: small;
+  display: flex;
+  justify-content: space-around;
+}
+
+.message-like {
+  display: flex;
+}
+
+.like-button {
+  border: none;
+  background-color: #fff;
+  font-size: 1.5rem;
 }

chat-app/client/src/components/Message/Message.jsx

@@ -1,13 +1,23 @@
 import formatTime from "../../utils/formatTime";
 import "./Message.css";
 
-const Message = ({ message, messageTime }) => {
+const Message = ({ message, messageTime, likes, dislikes }) => {
   const { date, time } = formatTime(messageTime);
 
   return (
     <div className="message">
       <p className="message-text">{message}</p>
-      <p className="message-time">{`${date} ${time}`}</p>
+      <div className="message-info">
+        <p>{`${date} ${time}`}</p>
+        <div className="message-like">
+          <button className="like-button">&#128077;</button>
+          <p>Likes: {likes}</p>
+        </div>
+        <div className="message-like">
+          <button className="like-button">&#128078;</button>
+          <p>Dislikes: {dislikes}</p>
+        </div>
+      </div>
     </div>
   );
 };

chat-app/server/data/chat.json

@@ -1,18 +1,26 @@
 [
   {
     "text": "Hello",
-    "time": "2026-05-22T14:53:00.281Z"
+    "time": "2026-05-22T14:53:00.281Z",
+    "likes": 0,
+    "dislikes": 0
   },
   {
     "text": "How are you?",
-    "time": "2026-05-22T14:54:49.729Z"
+    "time": "2026-05-22T14:54:49.729Z",
+    "likes": 0,
+    "dislikes": 0
   },
   {
     "text": "I'm good. How are you?",
-    "time": "2026-05-22T14:55:22.839Z"
+    "time": "2026-05-22T14:55:22.839Z",
+    "likes": 0,
+    "dislikes": 0
   },
   {
     "text": "I'm not too bad",
-    "time": "2026-05-22T14:55:54.424Z"
+    "time": "2026-05-22T14:55:54.424Z",
+    "likes": 0,
+    "dislikes": 0
   }
 ]