feat: Updated frontend to include socket.io-client and established co… - #5
Merged
Conversation
…nnection to the server.Implemented authentication state management using Zustand in useAuthStore.
There was a problem hiding this comment.
Pull request overview
This PR updates the MeetFlow app to support authenticated frontend routing/state via Zustand and introduces initial Socket.IO client/server scaffolding to enable realtime features.
Changes:
- Added a Zustand
useAuthStorewithcheckAuth,signup,login, andlogout, and wired protected routing for the dashboard. - Added new auth-related pages/components (Login/Signup/Dashboard/ProtectedRoute) and integrated
react-hot-toast. - Added Socket.IO server initialization on the backend and a frontend socket client helper, plus dependency updates.
Reviewed changes
Copilot reviewed 17 out of 19 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/store/useAuthStore.js | Adds auth state management and auth API calls via Axios + toast notifications. |
| frontend/src/pages/SignupPage.jsx | Adds signup UI and calls into useAuthStore.signup. |
| frontend/src/pages/LoginPage.jsx | Adds login UI and calls into useAuthStore.login. |
| frontend/src/pages/DashboardPage.jsx | Adds a basic authenticated dashboard showing user info and logout button. |
| frontend/src/components/ProtectedRoute.jsx | Guards routes by redirecting unauthenticated users to /login. |
| frontend/src/App.jsx | Wires routes, calls checkAuth on startup, and mounts the toaster. |
| frontend/src/main.jsx | Wraps the app with BrowserRouter. |
| frontend/src/lib/axios.js | Adds a shared Axios instance for API calls. |
| frontend/src/lib/socket.js | Adds a Socket.IO client instance helper. |
| frontend/src/pages/PersonalRoomPage.jsx | Adds placeholder page component. |
| frontend/src/pages/MeetingRoomPage.jsx | Adds placeholder page component. |
| frontend/src/components/Navbar.jsx | Adds placeholder component. |
| frontend/src/components/Sidebar.jsx | Adds placeholder component. |
| frontend/package.json | Adds zustand and react-hot-toast dependencies. |
| frontend/package-lock.json | Locks dependency changes for the frontend. |
| backend/src/socket/socket.js | Adds Socket.IO server initialization and a getIO() accessor. |
| backend/src/server.js | Creates an HTTP server and initializes Socket.IO; switches to server.listen. |
| backend/package.json | Adds socket.io dependency. |
| backend/package-lock.json | Locks dependency changes for the backend. |
Files not reviewed (2)
- backend/package-lock.json: Generated file
- frontend/package-lock.json: Generated file
Suppressed comments (3)
frontend/src/pages/SignupPage.jsx:54
- The "Email" input relies on placeholder text only, which is not an accessible label for screen readers. Add an
aria-label(or a visible<label>).
<input
type="email"
placeholder="Email"
className="w-full p-3 text-white rounded-lg bg-slate-800"
value={formData.email}
frontend/src/pages/SignupPage.jsx:67
- The "Password" input relies on placeholder text only, which is not an accessible label for screen readers. Add an
aria-label(or a visible<label>).
<input
type="password"
placeholder="Password"
className="w-full p-3 text-white rounded-lg bg-slate-800"
value={formData.password}
frontend/src/pages/LoginPage.jsx:54
- The "Password" input relies on placeholder text only, which is not an accessible label for screen readers. Add an
aria-label(or a visible<label>).
<input
type="password"
placeholder="Password"
className="w-full p-3 text-white rounded-lg bg-slate-800"
value={formData.password}
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+20
to
+24
| } catch (error) { | ||
| set({ | ||
| authUser: null, | ||
| }); | ||
| toast.error("Session expired. Please log in again."); |
Comment on lines
+1
to
+6
| import axios from "axios"; | ||
|
|
||
| export const axiosInstance = axios.create({ | ||
| baseURL: "http://localhost:5000/api", | ||
| withCredentials: true, | ||
| }); No newline at end of file |
Comment on lines
+1
to
+9
| import { io } from "socket.io-client"; | ||
|
|
||
|
|
||
| const baseURL = "http://localhost:5000"; | ||
|
|
||
| export const socket = io( baseURL, { | ||
| withCredentials: true, | ||
| autoConnect: false, | ||
| }); No newline at end of file |
Comment on lines
+21
to
+25
| if (result.success) { | ||
| navigate("/"); | ||
| } else { | ||
| alert(result.message); | ||
| } |
Comment on lines
+37
to
+41
| <input | ||
| type="text" | ||
| placeholder="Full Name" | ||
| className="w-full p-3 text-white rounded-lg bg-slate-800" | ||
| value={formData.fullName} |
Comment on lines
+1
to
+7
| import React from 'react' | ||
|
|
||
| export default function Navbar() { | ||
| return ( | ||
| <div>Navbar</div> | ||
| ) | ||
| } |
Comment on lines
+1
to
+7
| import React from 'react' | ||
|
|
||
| export default function Sidebar() { | ||
| return ( | ||
| <div>Sidebar</div> | ||
| ) | ||
| } |
Comment on lines
+17
to
21
| // Initialize Socket.IO | ||
| initializeSocket(server); | ||
|
|
||
| app.use(cors({ origin: "http://localhost:5173", credentials: true })); | ||
| app.use(cookieParser()); |
Comment on lines
+6
to
+12
| export const initializeSocket = (server) => { | ||
| io = new Server(server, { | ||
| cors: { | ||
| origin: "http://localhost:5173", | ||
| credentials: true, | ||
| }, | ||
| }); |
Comment on lines
+6
to
+9
| export const socket = io( baseURL, { | ||
| withCredentials: true, | ||
| autoConnect: false, | ||
| }); No newline at end of file |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…nnection to the server.Implemented authentication state management using Zustand in useAuthStore.