feat: Updated frontend to include socket.io-client and established co…

backend/package.json

@@ -21,7 +21,8 @@
     "dotenv": "^17.4.2",
     "express": "^5.2.1",
     "jsonwebtoken": "^9.0.3",
-    "mongoose": "^9.9.1"
+    "mongoose": "^9.9.1",
+    "socket.io": "^4.8.3"
   },
   "devDependencies": {
     "nodemon": "^3.1.14"

backend/src/server.js

@@ -6,11 +6,17 @@ import connectDB from "./config/db.js";
 import authRoutes from "./routes/auth.routes.js";
 import meetingRoutes from "./routes/meeting.routes.js";
 import cors from "cors";
+import http from "http";
+import { initializeSocket } from "./socket/socket.js";
 
 const app = express();
+const server = http.createServer(app);
 
 const PORT = ENV.PORT;
 
+// Initialize Socket.IO
+initializeSocket(server);
+
 app.use(cors({ origin: "http://localhost:5173", credentials: true }));
 app.use(cookieParser());
 
@@ -28,7 +34,7 @@ app.get("/", (req, res) => {
 const startServer = async () => {
   try {
     await connectDB();
-    app.listen(PORT, () => {
+    server.listen(PORT, () => {
       console.log(`Server is running on port ${PORT}`);
     });
   } catch (error) {

backend/src/socket/socket.js

@@ -0,0 +1,32 @@
+import { Server } from "socket.io";
+
+let io;
+
+// Initialize Socket.IO
+export const initializeSocket = (server) => {
+  io = new Server(server, {
+    cors: {
+      origin: "http://localhost:5173",
+      credentials: true,
+    },
+  });
+
+  io.on("connection", (socket) => {
+    console.log(`A User Connected: ${socket.id}`);
+
+    socket.on("disconnect", () => {
+      console.log(`A User Disconnected: ${socket.id}`);
+    });
+  });
+};
+
+// Access io instance from anywhere
+export const getIO = () => {
+  if (!io) {
+    throw new Error(
+      "Socket.io not initialized. Call initializeSocket(server) first."
+    );
+  }
+
+  return io;
+};

frontend/package.json

@@ -13,8 +13,10 @@
     "axios": "^1.19.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
+    "react-hot-toast": "^2.6.0",
     "react-router-dom": "^7.18.2",
-    "socket.io-client": "^4.8.3"
+    "socket.io-client": "^4.8.3",
+    "zustand": "^5.0.14"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",

frontend/src/App.jsx

@@ -1,15 +1,55 @@
-import { useState } from 'react'
+import { Routes, Route, Navigate } from "react-router-dom";
+import { useEffect } from "react";
+import { useAuthStore } from "./store/useAuthStore";
+import LoginPage from "./pages/LoginPage";
+import SignupPage from "./pages/SignupPage";
+import DashboardPage from "./pages/DashboardPage";
+import ProtectedRoute from "./components/ProtectedRoute";
+import { Toaster } from "react-hot-toast"; 
 
 function App() {
-  const [count, setCount] = useState(0)
+
+  const { checkAuth, isCheckingAuth, authUser } = useAuthStore();
+
+  useEffect(() => {
+    checkAuth();
+  }, [checkAuth]);
+
+  if (isCheckingAuth) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p>Loading...</p> 
+      </div>
+    );
+  }
 
   return (
-    <div className="min-h-screen bg-slate-950 flex items-center justify-center">
-      <h1 className="text-5xl font-bold text-blue-500">
-        MeetFlow
-      </h1>
-    </div>
-  )
+
+    <>
+    <Toaster position="top-right" reverseOrder={false} />
+
+    <Routes>
+      <Route 
+        path="/login" 
+        element={!authUser ? <LoginPage /> : <Navigate to="/" />} 
+      />
+      <Route 
+        path="/signup" 
+        element={!authUser ? <SignupPage /> : <Navigate to="/" />} 
+      />
+
+
+      <Route
+        path="/"
+        element={
+          <ProtectedRoute>
+            <DashboardPage />
+          </ProtectedRoute>
+        }
+      />
+      </Routes>
+    </>
+  );
 }
 
-export default App
+export default App;

frontend/src/components/Navbar.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Navbar() {
+  return (
+    <div>Navbar</div>
+  )
+}

frontend/src/components/ProtectedRoute.jsx

@@ -0,0 +1,14 @@
+import { Navigate } from "react-router-dom";
+import { useAuthStore } from "../store/useAuthStore";
+
+const ProtectedRoute = ({ children }) => {
+  const { authUser } = useAuthStore();
+
+  if (!authUser) {
+    return <Navigate to="/login" />;
+  }
+
+  return children;
+};
+
+export default ProtectedRoute;

frontend/src/components/Sidebar.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function Sidebar() {
+  return (
+    <div>Sidebar</div>
+  )
+}

frontend/src/lib/axios.js

@@ -0,0 +1,6 @@
+import axios from "axios";
+
+export const axiosInstance = axios.create({
+  baseURL: "http://localhost:5000/api",
+  withCredentials: true,
+});

frontend/src/lib/socket.js

@@ -0,0 +1,9 @@
+import { io } from "socket.io-client";
+
+
+const baseURL = "http://localhost:5000";
+
+export const socket = io( baseURL, {
+  withCredentials: true,
+  autoConnect: false,
+});

frontend/src/main.jsx

@@ -1,10 +1,12 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.jsx'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
+import App from "./App";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <BrowserRouter>
     <App />
-  </StrictMode>,
-)
+  </BrowserRouter>
+);

frontend/src/pages/DashboardPage.jsx

@@ -0,0 +1,34 @@
+import { useAuthStore } from "../store/useAuthStore";
+
+const DashboardPage = () => {
+  const { authUser, logout } = useAuthStore();
+
+  return (
+    <div className="min-h-screen p-10 text-white bg-slate-950">
+      <h1 className="mb-8 text-4xl font-bold">
+        Welcome {authUser?.fullName}
+      </h1>
+
+      <div className="space-y-3">
+
+        <p>Email: {authUser?.email}</p>
+
+        <p>
+          Personal Room:
+          {" "}
+          {authUser?.personalRoomId}
+        </p>
+
+        <button
+          onClick={logout}
+          className="px-5 py-2 bg-red-600 rounded-lg"
+        >
+          Logout
+        </button>
+
+      </div>
+    </div>
+  );
+};
+
+export default DashboardPage;