Skip to content

A real-time chat application using React.Js, Express.Js and Stream-Chat where users can login/signup and message each to others and also create channels.

Notifications You must be signed in to change notification settings

floatingnahid22/Realtime-Chat-App-with-react-and-express

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Realtime-Chat-App-with-react-and-express

Installation and How to run:

Create an empty folder, with any name. Inside that folder create two more folders for backend and frontend, separately.

Server Side:

    cd backend
    npm init -y
    npm install bcrypt cors crypto dotenv express getstream nodemon stream-chat twilio
    npm run dev

For process.env's file you have to create stream and twilio account and from there you have to put accountSid, authToken, messagingServiceSid, api_key, api_secret, app_id and apiKey value inside your application.

Client Side:

    cd frontend
    npx create-react-app ./
    npm install axios stream-chat universal-cookie stream-chat-react@9.5.2
    npm start

Description of this application:

Here, I have built a realtime chat application using react, express, stream-chat and twilio sms service. In this application user can do sign up/sign in and they can comunicate with each other. They can create channels for group chat or for direct message. They can send emojis, files, gif or any other attachments. They can reply or react each others messages etc.

I am attaching some pictures below for ease of understanding

Sign Up:

Capture7.png

Sign In:

Capture8.png

Backend-team channel and here is one user named nahidhossain:

Capture1.png

Frontend-team channel and here is two users named nahidhossain and amir:

Capture2.png

Direct messaging between two users:

Capture3.png

React and Reply on each others messages:

Capture2.png

Emoji sent:

Capture5.png

File or attachment sent:

Capture6.png

Description Link: https://github.com/floatingnahid22/Realtime-Chat-App-with-react-and-express#realtime-chat-app-with-react-and-express

About

A real-time chat application using React.Js, Express.Js and Stream-Chat where users can login/signup and message each to others and also create channels.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published