Example of chat web application using Socket.IO with the MERN stack Client in React

Related tags

React Apps chat-app
Overview

Real time chat app

Example of chat web application using Socket.IO with the MERN stack Client in React, Server in Node.js/Express On login user can set an avatar for the chat All messages saved in MongoDB database After user enters, they can see history of chats (10 last messages)

Clone repository in target path

$ git clone https://github.com/geepalik/chat-app.git

Install dependencies

Go to each folder (client and server) and enter this to install dependencies

$ yarn install

Have a .env file in the server folder with the following data

NODE_ENV=development
SOCKET_PORT=5001
HTTP_PORT=5002
MONGODB_URL='<mongo db url>'
CLOUDINARY_CLOUD_NAME='<cloudinary cloud name>'
CLOUDINARY_API_KEY='<cloudinary api key>'
CLOUDINARY_API_SECRET='<cloudinary secret key>'

Go to server folder and run in local development

$ yarn start-dev

Go to client folder and run in local development

$ yarn watch
You might also like...
Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Node/Express, and Socket.io
Real-time chat app using Firebase, React, TailwindCSS, MongoDB, Node/Express, and Socket.io

Let's Chat A real-time chat application. Another fun side project :) GIFs are attached at the end. Technologies Used React and TailwindCSS for the fro

A React context for setting up and using Socket.IO client in your app

React Simple Socket.IO Easily use Socket.IO in your React app. Ugh, another Socket.IO provider 🙄 ? Seriously, how is this different from using plain

A chat application created using React,js and Chat Engine

⭐️ Chat-App ⭐️ A Chat Application created using React.js and Chat Engine Live Site Getting Started with Create React App This project was bootstrapped

a chat application using react chat-engine api

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Hexlet-chat: a simple real-time chat application using react

Hexlet tests and linter status Hexlet-chat study project at hexlet.io Overview H

Small chat system written by React, Socket.IO, Express, HTTP and Cors.
Small chat system written by React, Socket.IO, Express, HTTP and Cors.

React-SocketIO Chat System The project is a small chat system which socket server has been written by Socket.IO, Express, HTTP, Cors and etc., and Rea

Realtime Chat App with React, Node.js, Socket.io and MongoDB
Realtime Chat App with React, Node.js, Socket.io and MongoDB

reactchatapp Realtime Chat App Features/Components Uses React Js for UI Backend using NodeJs Authentication using JWT MongoDB for database Socket.io f

MERN Stack Application E-Commerce website in clothing fashion
MERN Stack Application E-Commerce website in clothing fashion

BeauClothing-E-Commerce-Backend# WEAR E-Commerce Clothing Site A well-designed MERN(MongoDB, Express.js, React, Node.js) Stack Application E-Commerce

Bug-Blog - A Blogging Web App built with MERN Stack

Bug Blog It's a Blogging Web App built with MERN Stack , where users can create

Owner
Lucifer1123
FullStack blockchain developer has 6 years of experience. Please contact me. Skype: live:.cid.15b426ae414ce7a1 Telegram : @lucifer21123
Lucifer1123
flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

Sijeesh Miziha 51 Dec 8, 2022
Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)Online Marketplace Built with MERN stack (MongoDB, Express, React and Node)

?? Shopping App ?? Online Marketplace Built with MERN stack (MongoDB, Express, React and Node). ⚡️ ⚡️ ⚡️ Kiwi Shop ⚡️ ⚡️ ⚡️ ?? Table of contents Main

Tomiwa Adeyemi 10 Dec 23, 2022
To Clarify - a full stack MERN web application designed to help freelance web developers keep workflow organized and to establish clarity and transparency with clients

To Clarify - a full stack MERN web application designed to help freelance web developers keep workflow organized and to establish clarity and transparency with clients

Jay 4 Apr 3, 2022
Chat Application Using React, Node.js and Socket.io with MongoDB

Steps to Start the App Install the Public Dependencies Install the Server Dependencies In the Server Directory there's a .env file. Change the value o

Kishan Sheth 244 Dec 31, 2022
A real-time chat application made using ReactJs, ExpressJs, NodeJs, and Socket.io.

insta-chat Live Site ScreenShots Instachat is a real-time chat app made with ReactJs on the front-end and ExpressJs , NodeJS , Socket.io web socket li

Midhun Chandran 12 Jun 12, 2022
A Collabration Web-App using Express, React and Socket.io where Mutiple People can Join a Private room and Chat, Draw Among themselves. This project was selected as one of the best project at Tinkerhub Hacknight

A Collabration Web-App using Express, React and Socket.io where Mutiple People can Join a Private room and Chat, Draw Among themselves. This project was selected as one of the best project at Tinkerhub Hacknight

NzM 13 Dec 15, 2022
MERN BLOG - Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN)

MERN BLOG Fullstack open source blogging application made with MongoDB, Express, React & Nodejs (MERN) Configuration and Setup Key Features Technologi

Muhammet Yıldız 25 Dec 21, 2022
PostIt is a fully-featured social media web application, built with the MERN stack

PostIt is a fully-featured social media web application, built with the MERN stack.

Ihtasham 74 Dec 20, 2022
Chat rooms using react and socket.io

Chat rooms This is a project I made to try out socket.io Both react and socket.io (at the time of writing) are relatively new to me. Running Locally R

KrYmZiN 7 Jun 2, 2022
Video chat app built using React, Socket.io and WebRTC

Video Chat Web App It has been built using React, Material UI, Socket.io and WebRTC To open this on your browser click here Backend has been deployed

Thejas N U 4 Sep 23, 2022