added dockerfile, changed cors and api link for deployment

and removed require to import in tailwind config

backend/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+EXPOSE 3001
+
+CMD ["node", "server.js"]

backend/server.js

@@ -1,67 +1,67 @@
 const http = require("http");
-const cors = require('cors');
-const express = require('express')
-const mongoose = require("mongoose")
+const cors = require("cors");
+const express = require("express");
+const mongoose = require("mongoose");
 const { Server } = require("socket.io");
 const userRoutes = require("./routes/userRoutes");
 
-
 const app = express();
-app.use(express.json())
+app.use(express.json());
 app.use(cors());
 
 const connectDb = async () => {
-    try {
-        await mongoose.connect("mongodb+srv://sankhadiproy23:[email protected]/?retryWrites=true&w=majority"); //will use env variable later
-        console.log("Database connected"); //log
-    }
-    catch (err) {
-        console.log("Database not connected", err); //log
-    }
+  try {
+    await mongoose.connect(
+      "mongodb+srv://sankhadiproy23:[email protected]/?retryWrites=true&w=majority"
+    ); //will use env variable later
+    console.log("Database connected"); //log
+  } catch (err) {
+    console.log("Database not connected", err); //log
+  }
 };
 connectDb();
 
 const server = http.createServer(app);
 const io = new Server(server, {
-    pingTimeout: 60000,
-    cors: {
-        origin: (origin, callback) => {
-            const allowedOrigins = [
-                'https://0dab-2405-201-8011-60aa-b7c8-583e-3cf9-4ba2.ngrok-free.app',
-                'http://localhost:5173'
-            ];
-            if (allowedOrigins.indexOf(origin) !== -1 || !origin) {
-                callback(null, true);
-            } else {
-                callback(new Error('Not allowed by CORS'));
-            }
-        },
-
-        methods: ['GET', 'POST'],
+  pingTimeout: 60000,
+  cors: {
+    origin: (origin, callback) => {
+      const allowedOrigins = [
+        "https://0dab-2405-201-8011-60aa-b7c8-583e-3cf9-4ba2.ngrok-free.app",
+        "http://localhost:5173",
+        "https://chat-app-three-phi-24.vercel.app/",
+      ];
+      if (allowedOrigins.indexOf(origin) !== -1 || !origin) {
+        callback(null, true);
+      } else {
+        callback(new Error("Not allowed by CORS"));
+      }
     },
+
+    methods: ["GET", "POST"],
+  },
 });
 
 const onlineUsers = new Set();
 
 io.on("connection", (socket) => {
-    onlineUsers.add(socket.id);
-    const usersList = Array.from(onlineUsers);
-    // console.log(`✔ ${socket.id} :` + usersList); //log
-    io.emit('online-users', usersList);
-    socket.on('send_message', (data) => {
-        // console.log("Data:", data); //log
-        io.emit('recive_message', data);
-    });
+  onlineUsers.add(socket.id);
+  const usersList = Array.from(onlineUsers);
+  // console.log(`✔ ${socket.id} :` + usersList); //log
+  io.emit("online-users", usersList);
+  socket.on("send_message", (data) => {
+    // console.log("Data:", data); //log
+    io.emit("recive_message", data);
+  });
 
-    socket.on('disconnect', () => {
-        onlineUsers.delete(socket.id);
-        const usersList = Array.from(onlineUsers);
-        // console.log(`✘ ${socket.id} :` + usersList) //log
-        io.emit('online-users', usersList);
-    });
+  socket.on("disconnect", () => {
+    onlineUsers.delete(socket.id);
+    const usersList = Array.from(onlineUsers);
+    // console.log(`✘ ${socket.id} :` + usersList) //log
+    io.emit("online-users", usersList);
+  });
 });
 
 app.use("/", userRoutes);
 
-
-server.listen(3001, () => console.log('Server is running on port 3001')); //will use env variable later
+server.listen(3001, () => console.log("Server is running on port 3001")); //will use env variable later

frontend/src/components/MessageRoom.jsx

@@ -1,119 +1,127 @@
 import { io } from "socket.io-client";
-import { useState, useEffect, useCallback } from 'react'
-import 'bootstrap/dist/css/bootstrap.min.css'
+import { useState, useEffect, useCallback } from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
 import { Button, Input } from "@material-tailwind/react";
-import '.././App.css'
+import ".././App.css";
 
 import OnlineUsers from "./OnlineUsers";
 import { NavbarSimple } from "./Navbar";
 
 //recoil related import
-import { useRecoilValue } from 'recoil';
-import { userloggedin } from '../atom/userAtom'
+import { useRecoilValue } from "recoil";
+import { userloggedin } from "../atom/userAtom";
 
-const socket = io.connect("http://localhost:3001");
+// const socket = io.connect("http://localhost:3001"); //for local development
+const socket = io.connect("https://sankha-chatappb-serveit.codecult.tech"); //for production
 
 export default function App() {
-    const [msg, setmsg] = useState('');
-    const [data_rcv, setdata_rcv] = useState([]);
-
-    const loggedUser = useRecoilValue(userloggedin);
-    const [username, setusername] = useState('anonymous'); //used to set atom value initially then if the user want to change the name he/she can
-
-
-    const sendMessage = useCallback(() => {
-        if (username && msg) {
-            const createdTime = Date.now();
-            let usernameCondition = "";
-            if (loggedUser != 'anonymous-not-loggedin') {
-                usernameCondition = loggedUser;
-            }
-            else {
-                usernameCondition = username + ' (not loggedin)';
-            }
-            socket.emit('send_message', {
-                username: usernameCondition,
-                message: msg,
-                createdTime: createdTime
-            });
-            setmsg('');
-        }
-    }, [msg, username, loggedUser]);
-
-    useEffect(() => {
-        socket.on("recive_message", (data) => {
-            setdata_rcv((prevMessages) => [...prevMessages, data]);
-        });
-        return () => {
-            socket.off("recive_message");
-        };
-    }, []);
-
-    function formatDate(timestamp) {
-        const date = new Date(timestamp);
-        return date.toLocaleString();
+  const [msg, setmsg] = useState("");
+  const [data_rcv, setdata_rcv] = useState([]);
+
+  const loggedUser = useRecoilValue(userloggedin);
+  const [username, setusername] = useState("anonymous"); //used to set atom value initially then if the user want to change the name he/she can
+
+  const sendMessage = useCallback(() => {
+    if (username && msg) {
+      const createdTime = Date.now();
+      let usernameCondition = "";
+      if (loggedUser != "anonymous-not-loggedin") {
+        usernameCondition = loggedUser;
+      } else {
+        usernameCondition = username + " (not loggedin)";
+      }
+      socket.emit("send_message", {
+        username: usernameCondition,
+        message: msg,
+        createdTime: createdTime,
+      });
+      setmsg("");
     }
-
-    return (
-        <>
-            <div>
-                <div>
-                    <NavbarSimple />
-                </div>
-
-                {/* {JSON.parse(localStorage.getItem('user'))} */}
-
-                <div className="flex justify-evenly">
-                    <div className='p-3 w-72'>
-                        <OnlineUsers />
-                    </div>
-
-                    <div className='p-3 w-72'>
-                        <h3 className="font-bold p-2">Send Your Message</h3>
-
-                        {loggedUser == 'anonymous-not-loggedin' ? (
-                            <div>
-                                <div>&nbsp; Message without signing in</div>
-                                <div className="p-2">
-                                    <Input label="Set custom username" value={username} onChange={(e) => setusername(e.target.value)} />
-                                </div>
-                            </div>
-                        ) : (
-                            <div>&nbsp; username : {loggedUser}</div>
-                        )}
-
-
-                        <div className="p-2">
-                            <Input label='Message' value={msg} onChange={(e) => setmsg(e.target.value)} />
-                        </div>
-                        <div className="p-2">
-                            <Button onClick={sendMessage}>Send</Button>
-                        </div>
-                    </div>
+  }, [msg, username, loggedUser]);
+
+  useEffect(() => {
+    socket.on("recive_message", (data) => {
+      setdata_rcv((prevMessages) => [...prevMessages, data]);
+    });
+    return () => {
+      socket.off("recive_message");
+    };
+  }, []);
+
+  function formatDate(timestamp) {
+    const date = new Date(timestamp);
+    return date.toLocaleString();
+  }
+
+  return (
+    <>
+      <div>
+        <div>
+          <NavbarSimple />
+        </div>
+
+        {/* {JSON.parse(localStorage.getItem('user'))} */}
+
+        <div className="flex justify-evenly">
+          <div className="p-3 w-72">
+            <OnlineUsers />
+          </div>
+
+          <div className="p-3 w-72">
+            <h3 className="font-bold p-2">Send Your Message</h3>
+
+            {loggedUser == "anonymous-not-loggedin" ? (
+              <div>
+                <div>&nbsp; Message without signing in</div>
+                <div className="p-2">
+                  <Input
+                    label="Set custom username"
+                    value={username}
+                    onChange={(e) => setusername(e.target.value)}
+                  />
                 </div>
-
-                <div className="p-5">
-                    <h3 className="font-bold  pb-2">Messeges</h3>
-                    <div className="rounded-md" style={{
-                        border: '1px solid black',
-                        padding: '10px'
-                    }}>
-                        {
-                            data_rcv.length === 0 ? (<div>Fetching ... </div>)
-                                : (data_rcv.map((msg, i) => (
-                                    <div key={i}>
-                                        {i + 1}.&nbsp;
-                                        <span>[{formatDate(msg.createdTime)}]</span> &nbsp;
-                                        <span>{msg.username}</span> : &nbsp;
-                                        <span>{msg.message}</span>
-                                    </div>
-                                ))
-                                )
-                        }
-                    </div>
-                </div>
-
+              </div>
+            ) : (
+              <div>&nbsp; username : {loggedUser}</div>
+            )}
+
+            <div className="p-2">
+              <Input
+                label="Message"
+                value={msg}
+                onChange={(e) => setmsg(e.target.value)}
+              />
             </div>
-        </>
-    )
-};
+            <div className="p-2">
+              <Button onClick={sendMessage}>Send</Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="p-5">
+          <h3 className="font-bold  pb-2">Messeges</h3>
+          <div
+            className="rounded-md"
+            style={{
+              border: "1px solid black",
+              padding: "10px",
+            }}
+          >
+            {data_rcv.length === 0 ? (
+              <div>Fetching ... </div>
+            ) : (
+              data_rcv.map((msg, i) => (
+                <div key={i}>
+                  {i + 1}.&nbsp;
+                  <span>[{formatDate(msg.createdTime)}]</span> &nbsp;
+                  <span>{msg.username}</span> : &nbsp;
+                  <span>{msg.message}</span>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

frontend/tailwind.config.js

@@ -1,5 +1,5 @@
 /** @type {import('tailwindcss').Config} */
-const withMT = require("@material-tailwind/react/utils/withMT");
+import withMT from "@material-tailwind/react/utils/withMT";
 
 export default withMT({
   content: [