+
+ );
+}
diff --git a/websockets/src/client/index.css b/websockets/src/client/index.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/websockets/src/client/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/websockets/src/client/index.html b/websockets/src/client/index.html
new file mode 100644
index 0000000..94d8fb7
--- /dev/null
+++ b/websockets/src/client/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+ {message}
+
+
+ );
+ }
+
+ return (
+
+
+
+ 
+
+ Join Chat Room
+Enter your name to start chatting with others
+ + setUserName(e.target.value)} + className="w-full p-3 border border-gray-300 rounded-lg mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500" + onKeyUp={(e) => e.key === 'Enter' && handleJoinChat()} + /> + + +
+
+ );
+}
diff --git a/websockets/src/client/router.ts b/websockets/src/client/router.ts
new file mode 100644
index 0000000..53650e1
--- /dev/null
+++ b/websockets/src/client/router.ts
@@ -0,0 +1,9 @@
+import { lazy } from "react";
+import { createBrowserRouter } from "react-router-dom";
+
+export const router = createBrowserRouter([
+ {
+ path: '/',
+ Component: lazy(() => import('./pages/HomePage'))
+ },
+]);
diff --git a/websockets/src/client/stores/chatStore.ts b/websockets/src/client/stores/chatStore.ts
new file mode 100644
index 0000000..aef6235
--- /dev/null
+++ b/websockets/src/client/stores/chatStore.ts
@@ -0,0 +1,22 @@
+import { create } from 'zustand';
+import { ChatMessage } from '@/shared/types/chatMessage';
+
+interface ChatState {
+ messages: ChatMessage[];
+ addMessage: (message: ChatMessage) => void;
+ clearMessages: () => void;
+}
+
+export const useChatStore = create
+
+
+
+
+
+
+ Chat Room
+
+
+ Online Users ({users.length})
+
+ {users.map((user, index) => (
+
+
+
+ {user}
+
+ ))}
+
+
+
+
+
+ General Chat
+Welcome, {userName}!
+
+ {messages.map((message) => (
+
+
+
+
+ ))}
+
+ {message.userName !== userName && message.userName !== 'System' && (
+
+ {message.userName}
+ )} +{message.message}
++ {new Date(message.timestamp).toLocaleTimeString()} +
+
+
+
+ setNewMessage(e.target.value)}
+ className="flex-1 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+ onKeyUp={(e) => e.key === 'Enter' && handleSendMessage()}
+ />
+
+
+