Add Collaboration Features

client/package.json

@@ -19,6 +19,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@google/generative-ai": "^0.21.0",
+    "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.16.7",
     "@splinetool/react-spline": "^2.2.6",
@@ -36,6 +37,7 @@
     "lucide-react": "^0.447.0",
     "match-sorter": "^6.3.4",
     "mdb-react-ui-kit": "^7.2.0",
+    "monaco-editor": "^0.52.0",
     "open-source": "file:",
     "otp-input-react": "^0.3.0",
     "prop-types": "^15.8.1",
@@ -53,7 +55,7 @@
     "react-toggle": "^4.1.3",
     "react-top-loading-bar": "^2.3.1",
     "socket.io": "^4.7.5",
-    "socket.io-client": "^4.7.5",
+    "socket.io-client": "^4.8.1",
     "sort-by": "^0.0.2",
     "yup": "^1.4.0"
   },

client/src/App.jsx

@@ -43,6 +43,7 @@ import Cursor from './component/Cursor';
 
 import AOS from 'aos';
 import 'aos/dist/aos.css';
+import Collab from "./component/Collab";
 import Ai from "./component/AI";
 import FAQ from "./component/FAQ"; // Import the FAQ component
 
@@ -144,6 +145,8 @@ function App() {
                 <Route exact path="/community" element={<Community mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 <Route exact path="/about" element={<About mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 <Route exact path='/blog' element={<BlogPage mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
+                <Route exact path='/collab' element={<Collab mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
+                {/* <Route exact path='/myprofile' element={<ProtectedRoute loggedin={islogged}><MyProfile mode={mode} setProgress={setProgress} showAlert={showAlert} /></ProtectedRoute>} /> */}
                 <Route exact path='/ai' element={<Ai mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
                 {/* <Route exact path='/myprofile' element={<ProtectedRoute loggedin={islogged}><MyProfile mode={mode} setProgress={setProgress} showAlert={showAlert} /></ProtectedRoute>} /> */}
                 <Route exact path='/myprofile' element={<MyProfile mode={mode} setProgress={setProgress} showAlert={showAlert} />} />

client/src/component/Collab.jsx

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from "react";
+import { io } from "socket.io-client";
+import MonacoEditor from "@monaco-editor/react";
+
+// Adjust this to your Socket.IO server URL
+const SOCKET_SERVER_URL = "http://localhost:5000";
+
+const Collab = () => {
+  const [code, setCode] = useState("// Start coding collaboratively!\n");
+  const [socket, setSocket] = useState(null);
+  const editorRef = useRef(null);
+
+  // Initialize the Socket.IO client
+  useEffect(() => {
+    const newSocket = io(SOCKET_SERVER_URL);
+    setSocket(newSocket);
+
+    newSocket.on("code_update", (newCode) => {
+      setCode(newCode);
+    });
+
+    return () => {
+      newSocket.disconnect();
+    };
+  }, []);
+
+  // Handle code change in the editor
+  const handleCodeChange = (newCode) => {
+    setCode(newCode);
+    if (socket) {
+      socket.emit("code_change", newCode);
+    }
+  };
+
+  // Attach the editor instance to ref for further usage
+  const handleEditorDidMount = (editor) => {
+    editorRef.current = editor;
+  };
+
+  return (
+    <div style={{ height: "100vh", paddingTop: "60px"  }}>
+      <MonacoEditor
+        height="100vh"
+        defaultLanguage="javascript"
+        value={code}
+        onChange={handleCodeChange}
+        onMount={handleEditorDidMount}
+        theme="vs-dark"
+      />
+    </div>
+  );
+};
+
+export default Collab;

server/index.js

@@ -50,19 +50,30 @@ app.use("/api/contact", require("./routes/contact"));
 // Socket.io connection handling
 const users = {};
 
+let currentCode = '// Start coding collaboratively!\n';
+
 io.on("connection", (socket) => {
   socket.on("new-user-joined", (name) => {
     users[socket.id] = name;
     socket.broadcast.emit("user-joined", name);
   });
 
+  // Send the current code to the newly connected user
+  socket.emit('code_update', currentCode);
+
   socket.on("send", (message) => {
     socket.broadcast.emit("receive", {
       message: message,
       name: users[socket.id],
     });
   });
 
+  // Listen for code changes and broadcast them
+  socket.on('code_change', (newCode) => {
+    currentCode = newCode;
+    socket.broadcast.emit('code_update', newCode);
+  });
+
   socket.on("disconnect", () => {
     if (users[socket.id]) {
       socket.broadcast.emit("left", users[socket.id]);