feat:socket.io implementation done

Author: ADARSHsri2004

client/package-lock.json

@@ -18,6 +18,7 @@
     "lucide-react": "^0.545.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "socket.io-client": "^4.8.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14"

client/package.json

@@ -1,11 +1,44 @@
+import { useState } from "react";
 import { Canvas } from "./components/Canvas";
 
 function App() {
+    const [roomId, setRoomId] = useState("");
+    const [joined, setJoined] = useState(false);
+
+    const handleJoin = () => {
+        if (!roomId.trim()) {
+            alert("Please enter a valid Room ID");
+            return;
+        }
+        setJoined(true);
+    };
+
     return (
-        <main className="w-full h-screen">
-            <Canvas />
+        <main className="w-full h-screen flex items-center justify-center bg-gray-100">
+            {!joined ? (
+                <div className="flex flex-col items-center gap-4 p-6 bg-white rounded-xl shadow-md">
+                    <h1 className="text-2xl font-bold text-gray-800">
+                        Join a Drawing Room
+                    </h1>
+                    <input
+                        type="text"
+                        placeholder="Enter Room ID"
+                        value={roomId}
+                        onChange={(e) => setRoomId(e.target.value)}
+                        className="border border-gray-300 rounded-lg px-4 py-2 text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                    <button
+                        onClick={handleJoin}
+                        className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-all"
+                    >
+                        Join Room
+                    </button>
+                </div>
+            ) : (
+                <Canvas roomId={roomId} />
+            )}
         </main>
-    )
+    );
 }
 
 export default App;