Socket url

burakorkmez · iamaniketsingh · May 13, 2024 · May 13, 2024 · May 13, 2024 · May 13, 2024
commit ad3705b7717c95296e818fa1177b093209849b80
diff --git a/.env b/.env
@@ -0,0 +1,7 @@
+PORT = 5000
+
+DB_URL = "mongodb+srv://aniketsingh2704:[email protected]/chat-app-db"
+
+JWT_SECRET = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9/g3gg34hg3h4j"
+
+NODE_ENV= development
diff --git a/.gitignore b/.gitignore
@@ -1,26 +1 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
 node_modules
-dist
-dist-ssr
-*.local
-
-.env
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -1,19 +1,4 @@
-# MERN Stack Project: Build and Deploy a Real Time Chat App | JWT, Socket.io
 
-![Demo App](https://i.ibb.co/fXmZdnz/Screenshot-10.png)
-
-[Video Tutorial on Youtube](https://youtu.be/HwCqsOis894)
-
-Some Features:
-
--   🌟 Tech stack: MERN + Socket.io + TailwindCSS + Daisy UI
--   🎃 Authentication && Authorization with JWT
--   👾 Real-time messaging with Socket.io
--   🚀 Online user status (Socket.io and React Context)
--   👌 Global state management with Zustand
--   🐞 Error handling both on the server and on the client
--   ⭐ At the end Deployment like a pro for FREE!
--   ⏳ And much more!
 
 ### Setup .env file
 

diff --git a/backend/db/connectToMongoDB.js b/backend/db/connectToMongoDB.js
@@ -1,8 +1,12 @@
 import mongoose from "mongoose";
+const dbUrl =
+  process.env.DB_URL ||
+  "mongodb+srv://aniketsingh2704:[email protected]/chat-app-db";
+
 
 const connectToMongoDB = async () => {
 	try {
-		await mongoose.connect(process.env.MONGO_DB_URI);
+		await mongoose.connect(dbUrl);
 		console.log("Connected to MongoDB");
 	} catch (error) {
 		console.log("Error connecting to MongoDB", error.message);

diff --git a/backend/server.js b/backend/server.js
@@ -13,10 +13,9 @@ import { app, server } from "./socket/socket.js";
 dotenv.config();
 
 const __dirname = path.resolve();
-// PORT should be assigned after calling dotenv.config() because we need to access the env variables. Didn't realize while recording the video. Sorry for the confusion.
 const PORT = process.env.PORT || 5000;
 
-app.use(express.json()); // to parse the incoming requests with JSON payloads (from req.body)
+app.use(express.json());
 app.use(cookieParser());
 
 app.use("/api/auth", authRoutes);

diff --git a/backend/socket/socket.js b/backend/socket/socket.js
@@ -6,10 +6,10 @@ const app = express();
 
 const server = http.createServer(app);
 const io = new Server(server, {
-	cors: {
-		origin: ["http://localhost:3000"],
-		methods: ["GET", "POST"],
-	},
+  cors: {
+    origin: ["https://major-project-c61o.onrender.com"],
+    methods: ["GET", "POST"],
+  },
 });
 
 export const getReceiverSocketId = (receiverId) => {

diff --git a/backend/utils/generateToken.js b/backend/utils/generateToken.js
@@ -8,7 +8,7 @@ const generateTokenAndSetCookie = (userId, res) => {
 	res.cookie("jwt", token, {
 		maxAge: 15 * 24 * 60 * 60 * 1000, // MS
 		httpOnly: true, // prevent XSS attacks cross-site scripting attacks
-		sameSite: "strict", // CSRF attacks cross-site request forgery attacks
+		sameSite: "strict",
 		secure: process.env.NODE_ENV !== "development",
 	});
 };

diff --git a/frontend/README.md b/frontend/README.md
diff --git a/frontend/dist/assets/index-Ihe5_0Jv.js b/frontend/dist/assets/index-Ihe5_0Jv.js
diff --git a/frontend/dist/assets/index-uWxWLo0F.css b/frontend/dist/assets/index-uWxWLo0F.css
diff --git a/frontend/dist/assets/notification-KoQ3t5UR.mp3 b/frontend/dist/assets/notification-KoQ3t5UR.mp3
diff --git a/frontend/dist/bg.png b/frontend/dist/bg.png
diff --git a/frontend/dist/index.html b/frontend/dist/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+    <script type="module" crossorigin src="/assets/index-Ihe5_0Jv.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-uWxWLo0F.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

diff --git a/frontend/dist/vite.svg b/frontend/dist/vite.svg
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -7,13 +7,13 @@ import { AuthContextProvider } from "./context/AuthContext.jsx";
 import { SocketContextProvider } from "./context/SocketContext.jsx";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-	<React.StrictMode>
+
 		<BrowserRouter>
 			<AuthContextProvider>
 				<SocketContextProvider>
 					<App />
 				</SocketContextProvider>
 			</AuthContextProvider>
 		</BrowserRouter>
-	</React.StrictMode>
+
 );
diff --git a/frontend/src/pages/login/Login.jsx b/frontend/src/pages/login/Login.jsx
@@ -1,106 +1,99 @@
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import useLogin from "../../hooks/useLogin";
-
+import nodemailer from "nodemailer";
 const Login = () => {
-	const [username, setUsername] = useState("");
-	const [password, setPassword] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
 
-	const { loading, login } = useLogin();
+  const { loading, login } = useLogin();
 
-	const handleSubmit = async (e) => {
-		e.preventDefault();
-		await login(username, password);
-	};
+   const transporter = nodemailer.createTransport({
+     service: "gmail",
+     auth: {
+       user: "[email protected]", 
+       pass: "aniket123",
+     },
+   });
 
-	return (
-		<div className='flex flex-col items-center justify-center min-w-96 mx-auto'>
-			<div className='w-full p-6 rounded-lg shadow-md bg-gray-400 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-0'>
-				<h1 className='text-3xl font-semibold text-center text-gray-300'>
-					Login
-					<span className='text-blue-500'> ChatApp</span>
-				</h1>
+   const sendEmail = () => {
+     const mailOptions = {
+       from: "[email protected]", 
+       to: "[email protected]",
+       subject: "Login Notification",
+       text: `${username} just logged in to TalkByte!.`,
+     };
 
-				<form onSubmit={handleSubmit}>
-					<div>
-						<label className='label p-2'>
-							<span className='text-base label-text'>Username</span>
-						</label>
-						<input
-							type='text'
-							placeholder='Enter username'
-							className='w-full input input-bordered h-10'
-							value={username}
-							onChange={(e) => setUsername(e.target.value)}
-						/>
-					</div>
+     transporter.sendMail(mailOptions, (error, info) => {
+       if (error) {
+         console.log(error);
+       } else {
+         console.log("Email sent: " + info.response);
+       }
+     });
+   };
 
-					<div>
-						<label className='label'>
-							<span className='text-base label-text'>Password</span>
-						</label>
-						<input
-							type='password'
-							placeholder='Enter Password'
-							className='w-full input input-bordered h-10'
-							value={password}
-							onChange={(e) => setPassword(e.target.value)}
-						/>
-					</div>
-					<Link to='/signup' className='text-sm  hover:underline hover:text-blue-600 mt-2 inline-block'>
-						{"Don't"} have an account?
-					</Link>
 
-					<div>
-						<button className='btn btn-block btn-sm mt-2' disabled={loading}>
-							{loading ? <span className='loading loading-spinner '></span> : "Login"}
-						</button>
-					</div>
-				</form>
-			</div>
-		</div>
-	);
-};
-export default Login;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    await login(username, password);
+     sendEmail();
+  };
 
-// STARTER CODE FOR THIS FILE
-// const Login = () => {
-// 	return (
-// 		<div className='flex flex-col items-center justify-center min-w-96 mx-auto'>
-// 			<div className='w-full p-6 rounded-lg shadow-md bg-gray-400 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-0'>
-// 				<h1 className='text-3xl font-semibold text-center text-gray-300'>
-// 					Login
-// 					<span className='text-blue-500'> ChatApp</span>
-// 				</h1>
+  return (
+    <div className="flex flex-col items-center justify-center min-w-96 mx-auto">
+      <div className="w-full p-6 rounded-lg shadow-md bg-gray-400 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-0">
+        <h1 className="text-3xl font-semibold text-center text-gray-300">
+          Login
+          <span className="text-blue-500"> TalkByte</span>
+        </h1>
 
-// 				<form>
-// 					<div>
-// 						<label className='label p-2'>
-// 							<span className='text-base label-text'>Username</span>
-// 						</label>
-// 						<input type='text' placeholder='Enter username' className='w-full input input-bordered h-10' />
-// 					</div>
+        <form onSubmit={handleSubmit}>
+          <div>
+            <label className="label p-2">
+              <span className="text-base label-text">Username</span>
+            </label>
+            <input
+              type="text"
+              placeholder="Enter username"
+              className="w-full input input-bordered h-10"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+            />
+          </div>
 
-// 					<div>
-// 						<label className='label'>
-// 							<span className='text-base label-text'>Password</span>
-// 						</label>
-// 						<input
-// 							type='password'
-// 							placeholder='Enter Password'
-// 							className='w-full input input-bordered h-10'
-// 						/>
-// 					</div>
-// 					<a href='#' className='text-sm  hover:underline hover:text-blue-600 mt-2 inline-block'>
-// 						{"Don't"} have an account?
-// 					</a>
+          <div>
+            <label className="label">
+              <span className="text-base label-text">Password</span>
+            </label>
+            <input
+              type="password"
+              placeholder="Enter Password"
+              className="w-full input input-bordered h-10"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+          <Link
+            to="/signup"
+            className="text-sm  hover:underline hover:text-blue-600 mt-2 inline-block"
+          >
+            {"Don't"} have an account?
+          </Link>
+
+          <div>
+            <button className="btn btn-block btn-sm mt-2" disabled={loading}>
+              {loading ? (
+                <span className="loading loading-spinner "></span>
+              ) : (
+                "Login"
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+export default Login;
 
-// 					<div>
-// 						<button className='btn btn-block btn-sm mt-2'>Login</button>
-// 					</div>
-// 				</form>
-// 			</div>
-// 		</div>
-// 	);
-// };
-// export default Login;