Add Frontend UI

Author: trngdothuy

chat-app/frontend/src/App.jsx

@@ -4,20 +4,48 @@ function App() {
   const [username, setUsername] = useState("");
   const [savedUsername, setSavedUsername] = useState("");
 
-  function handleSubmit(e) {
+  const [messageInput, setMessageInput] = useState("");
+
+  const [messages, setMessages] = useState([
+    {
+      id: 1,
+      username: "System",
+      text: "Welcome to the chat",
+      createdAt: new Date().toLocaleTimeString(),
+    },
+  ]);
+
+  function handleUserNameSubmit(e) {
     e.preventDefault();
 
     if (!username.trim()) return;
 
     setSavedUsername(username);
   }
 
+  function handleMessageSubmit(e) {
+    e.preventDefault();
+
+    if (!messageInput.trim()) return;
+
+    const newMessage = {
+      id: Date.now(),
+      userName: savedUsername,
+      text: messageInput,
+      createdAt: new Date().toLocaleTimeString(),
+    };
+
+    setMessages([...messages, newMessage]);
+
+    setMessageInput("");
+  }
+
   if (!savedUsername) {
     return (
       <div>
         <h1>Join Chat</h1>
 
-        <form onSubmit={handleSubmit}>
+        <form onSubmit={handleUserNameSubmit}>
           <input
             type="text"
             placeholder="Enter username"
@@ -35,6 +63,29 @@ function App() {
     <div>
       <h1>Chat App</h1>
       <p>Welcome {savedUsername}!</p>
+
+      <div className="message-container">
+        {messages.map((message) => (
+          <div key={message.id} className="message">
+            <strong>{message.username}</strong>
+
+            <p>{message.text}</p>
+
+            <small>{message.createdAt}</small>
+          </div>
+        ))}
+      </div>
+
+      <form onSubmit={handleMessageSubmit}>
+        <input
+          type="text"
+          placeholder="Type a message"
+          value={messageInput}
+          onChange={(e) => setMessageInput(e.target.value)}
+        />
+
+        <button type="submit">Send</button>
+      </form>
     </div>
   );
 }

chat-app/frontend/src/index.css

@@ -1,6 +1,11 @@
 body {
   font-family: Arial, sans-serif;
   padding: 2rem;
+  background: #f4f4f4;
+}
+
+h1 {
+  margin-bottom: 1rem;
 }
 
 input {
@@ -10,4 +15,18 @@ input {
 
 button {
   padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.messages-container {
+   margin: 2rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.message {
+  background: white;
+  padding: 1rem;
+  border-radius: 8px;
 }