piyush-eon / mern-chat-app

Talk-A-Tive

Talk-a-tive is a Full Stack Chatting App. Uses Socket.io for real time communication and stores user details in encrypted format in Mongo DB Database.

Tech Stack

Client: React JS

Server: Node JS, Express JS

Database: Mongo DB

Demo

https://talk-a-tive.herokuapp.com/

Run Locally

Clone the project

  git clone https://github.com/piyush-eon/mern-chat-app

Go to the project directory

  cd mern-chat-app

Install dependencies

  npm install

  cd frontend/
  npm install

Start the server

  npm run start

Start the Client

  //open now terminal
  cd frontend
  npm start

Features

Authenticaton

Real Time Chatting with Typing indicators

One to One chat

Search Users

Create Group Chats

Notifications

Add or Remove users from group

View Other user Profile

Made By

• @Piyush-eon

mern-chat-app's Issues

License?

Thanks for sharing the code publicly. May I know the code released under what license?

Appreciate if you could add a LICENSE file to the repo.

Thanks.

TypeError: history is undefined

In the context API / ChatProvider.js I get this error when I run the project.
This error started to surface when I built SideDrawer component.
I already have the legacy dependencies, same package.json as frontend has in this repo.

Refer to this screenshot

Any help would be appreciated.

Issue in UserListItem file

In UserListItem file you are passing the current user through Context API. So when we render the List component the current user data will show. To show the data of other users you need to pass 'user' in the function.

ER Diagrams

It would be easier to make changes to this clone i people know about the erd of the app; i am currently creating one might create a pr and add it to the readme

not able to connect to server

I am getting this error Error: Route.post() requires a callback function but got a [object Undefined].

Any idea how to resolve it.

No need to create 2 different endpoints for adding new user and removing user from group chat

@piyush-eon , I noticed there are 2 different endpoints to add user and to remove user from group chat. This also can be done using single endpoint. Please let me fix this by assigning this issue to me.

in frontend http://localhost:3000 in conole

caught Error: Cannot find module 'react/jsx-runtime'
at webpackMissingModule (bundle.js:125881:50)
at ./node_modules/@chakra-ui/system/dist/chunk-3ZTTLJBV.mjs (bundle.js:125881:142)
at options.factory (bundle.js:138555:31)
at webpack_require (bundle.js:137944:33)
at fn (bundle.js:138212:21)
at ./node_modules/@chakra-ui/tabs/dist/chakra-ui-tabs.esm.js (bundle.js:27729:76)
at options.factory (bundle.js:138555:31)
at webpack_require (bundle.js:137944:33)
at fn (bundle.js:138212:21)
at ./src/Pages/Homepage.js (bundle.js:325:74) @piyush-eon

Login issue (App throws error)

i) TypeError: Cannot read properties of undefined (reading '_id')
getSender
While logging in, we are facing this issue.

No need to create 2 different endpoints for adding new user and removing user from group chat

@piyush-eon , I noticed there are 2 different endpoints to add user and to remove user from group chat. This also can be done using single endpoint. Please let me fix this by assigning this issue to me.

server not found ,could not connect to the server

server can't be connected issue

In react 18, within Signup process could not change setPic state?

Socket io In next js

i'm using Next js but My socket is not working properly all the things are setup properly,Can you help me in my project.

Group Chat Admin Issue

On removing the user from the group if he is the admin he still remains the admin, can we assign the group admin to a random person in the group just like whatsapp

Same user can be added multiple times while creating the group.

Error react-scripts --openssl-legacy-provider!! solution

just on package.json script start remove the "--openssl-legacy-provider" and your app runs well. solution via Freelancer @evilDuffer

Failed to compile

Attempted import error: 'useHistory' is not exported from 'react-router-dom' (imported as 'useHistory').

ERROR in ./src/Context/ChatProvider.js & other file

Other users not found in Search User field.

I cloned the repo and set up my own Mongodb Atlas database and registered two users in the same. Now I want to make a chat room for these two users.

But when I logged into one of the users, and tried to search for the other registered user from the search input field, I could only see the profile of the current registered user(that is, the person who is logged in). The other user is not coming in the search results.

For example,

There are two persons:
Name: PersonA Email: [email protected]
Name: PersonB Email: [email protected]

Now I have logged in with [email protected] and I tried to search PersonB in the search bar. But the problem is I could not find PersonB. Instead I found PersonA in the search results. Is there something am I missing?

front end set up when i ran npm start

in my http://localhost:3000/
Failed to compile
./node_modules/@chakra-ui/system/dist/chunk-3ZTTLJBV.mjs
Can't import the named export 'Global' from non EcmaScript module (only default export is available) @piyush-eon

Minor improvement to add some files

Hey, this is great example for implementing socket.io in Node JS
But I think it will great to add these files:

• .env.example so the developer know what is the environment variables that used on this project
• docker-compose.yml to running mongodb locally

This is just a minor improvement on my side to improve developer experience

Thanks in advance

Project not setup Frontend

/api/message giving bad request error

Hi can anyone help me regarding this issue. When testing sendMessage (/api/chat) getting bad request in postname and in terminal getting error as UserId param not sent with request. Please help me out on this.

the hosted link is not working

The hosted link is not working

The hosted link is not working

Incorrect users in dropdown while adding a user to the group.

getting the error while running app

./node_modules/@chakra-ui/system/dist/chunk-3ZTTLJBV.mjs
Can't import the named export 'Global' from non EcmaScript module (only default export is available)

Check if User is online or offline?

Can someone please guide/suggest me how to check if the user in Single Chat is Online/Offline?

Server running on PORT undefined...

ola la la la leooo

when npm install in front end

npm ERR! Could not resolve dependency:
npm ERR! peer react@">=18" from @chakra-ui/[email protected]
npm ERR! node_modules/@chakra-ui/system
npm ERR! peer @chakra-ui/system@">=1.0.0" from @chakra-ui/[email protected]
npm ERR! node_modules/@chakra-ui/icons
npm ERR! @chakra-ui/icons@"^1.0.13" from the root project @piyush-eon

You need to enable JavaScript to run this app.

i've followed this course till "Building Chats Page UI - MERN Stack Chat App with Socket.IO #11" This video 8th minute But when we add ChatProvider im not able to see anything on screen and it's showing "You need to enable JavaScript to run this app." in network. But when i tried accessing other pages it's working properly Javascript is enabled and if i remove the Chatprovider javascript will work. Only when i add the ChatProvider im getting the issue. Please help...Thanks in advance and Thanks for this wonderful course

React Router dom v5 is not working

Please Assign this issue to me , i will update this. I will convert this to react-router-dom v6

fetchagain is not a function

when i try updating name of the group chat(renaming of group) it says fetchagain is not a function
const handleRename = async () => {
if (!groupChatName) return;

    try {
      setrenameLoading(true);
      const config = {
        headers: {
          Authorization: `Bearer ${user.token}`
        }
      };
      console.log("renamet to "+groupChatName);
      var variable={
        "chatId": selectedChat._id,
        "name": groupChatName
      }
      console.log("details to rename "+JSON.stringify(variable));
      const { data } = await axios.put("/api/chat/rename", {
        chatId: selectedChat._id,
        name: groupChatName
      }, config);

  
      console.log("Rename Success:", data); 
      setSelectedChat(data);
      setFetchAgain(!fetchAgain);
      setrenameLoading(false);
      toast({
          title: "done renaming",
          status: "success",
          duration: 5000,
          isClosable: true,
          position: "bottom",
      });
    
    } catch (error) {
      console.log("error in renaming " + error);
      toast({
        title: "error in renaming",
        status: "error",
        duration: 5000,
        isClosable: true,
        position: "bottom",
      });
      setrenameLoading(false);
    }
    setgroupChatName("");
  };
  where is the problem ,have any one fixed this yet?

react script not working

'react-scripts' is not recognized as an internal or external command,
operable program or batch file.

Giving an erroe

Consider adding an error boundary to customize error handling behavior at chat provider

No need to create 2 different endpoints for adding new user and removing user from group chat

@piyush-eon , I noticed there are 2 different endpoints to add user and to remove user from group chat. This also can be done using single endpoint. Please let me fix this by assigning this issue to me.

no chat member is sown on ui