koolkishan / chat-app-react-nodejs

Chat Application Using React, Node.js and Socket.io with MongoDB

Snappy - Chat Application

Snappy is chat application build with the power of MERN Stack. You can find the tutorial here

Installation Guide

Requirements

• Nodejs
• Mongodb

Both should be installed and make sure mongodb is running.

Installation

First Method

git clone https://github.com/koolkishan/chat-app-react-nodejs
cd chat-app-react-nodejs

Now rename env files from .env.example to .env

cd public
mv .env.example .env
cd ..
cd server
mv .env.example .env
cd ..

Now install the dependencies

cd server
yarn
cd ..
cd public
yarn

We are almost done, Now just start the development server.

For Frontend.

cd public
yarn start

For Backend.

Open another terminal in folder, Also make sure mongodb is running in background.

cd server
yarn start

Done! Now open localhost:3000 in your browser.

Second Method

• This method requires docker and docker-compose to be installed in your system.
• Make sure you are in the root of your project and run the following command.

docker compose build --no-cache

after the build is complete run the containers using the following command

docker compose up

now open localhost:3000 in your browser.

chat-app-react-nodejs's Issues

tickets para a nova fila

Olá, quando não tenho nenhuma fila criada os tickets aparecem no login de usuários que são operadores, mas quando crio uma ou duas filas não aparecem nenhum dos novos tickets na lista dos operadores, o que tenho que fazer para encaminhar o novo ticket para a fila?

#10 Showing New Messages on Top

Can i add Tic-tac-toe game using HTML CSS and Javascript

emoji-picker-react style does not take effect

css code:.button-container {
display: flex;
align-items: center;
color: white;
gap: 1rem;
.emoji {
position: relative;
svg {
font-size: 1.5rem;
color: #ffff00c8;
cursor: pointer;
}
.emoji-picker-react {
position: absolute;
top: -350px;
background-color: #080420;
box-shadow: 0 5px 10px #9a86f3;
border-color: #9a86f3;
.emoji-scroll-wrapper::-webkit-scrollbar {
background-color: #080420;
width: 5px;
&-thumb {
background-color: #9a86f3;
}
}

#5 Add Responsiveness Using CSS Media Queries

#6 Add JWT Support For Authentication and Authorisation

#8 Adding Group Chats

Deployment error

What are changes that we have to make in cors
After deployment frontend to netlify and backend to heroku.?

Login and Signup Issue

Please check your project

#1 Performance Optimization with Lazy Suspense

Notifications not working

Added mangoDB to a local server to use for local machines but when sending messages doesnt recieve notification from sender or to reciever

receive notifications on new message

Hi,

How can I get a notification when I receive a new message,
there´s a way to activate this feat.?

#4 Add Typescript Support For Frontend and Backend

Data not getting in MongoDB

Sir I have done till Register Functionality and when I am clicking on Add user then it doesn't navigate to the chat page and also the data is not added at the MongoDB .
Can you please help me.

missingDependancy error warning

how do i solve missing dependancy error warning in useeffect function in SetAvatar.jsx ?

Issue in Register user and in chat section

First, i have issue in Register user, when i register a new user, the data is succesfully saved in db, but the loacalStorage showing blank object

after register its opening setavatar page bcz chat-app-user is present in local storage though its {} but giving error while setting avatar saying undefined

but if i login with same user creds, after removing object from localstorage then localstorage showing data and can set avatar too

and also when ever new user try to setAvatar always give toast error, if try again then its working, but giding error in 1st always, u also face issue in video too

now chat page is open but not able to display only contacts, i watched in utube video , this happens with u too, u didn't show how u tackle it , like if register some users, then i already tried it, but not showing anything in chats

this last pic, look in console, there some errors too, get api error, , look into it too, i am atthing my repo link here so u can chk my where i have correct -> https://github.com/Shubhithebeast/LetsChat.git
thanku, that'll for now... I am really enjoying ur project tutorial....

UseEffect Hook Not Working

Sir I have done till Avatar and till that only useEffect hook is not working and it is showing that destroy function is not defined.
Can you please tell me the error of the hook.

cant register

My Api data from controller getAllMessage not working

Im trying in to getAllMessage controller to react frontend in useEffect. I've got error in _id when i check using postman the data is empty but in my mongodb data is saved

MongooseError

Help for this error
MongooseError: Operation users.findOne() buffering timed out after 10000ms
at Timeout. (C:\CHAT\chat-app\server\node_modules\mongoose\lib\drivers\node-mongodb-native\collection.js:148:23)

#3 Add Redux Toolkit for State Management

#2 Add Login with Google, Firebase, Twitter

#7 Add Block User Functionality

Editar User - Trocar Senha

Olá, pelo front consigo de alguma forma editar o nome ou senha de um usuário?

Can't Login or Signup

Can't Login and signup in your app

#9 Sending Image in Group Chats and One-to-One Chats

connection error

net::connection error after entering the details in register.