simpletut / react-real-time-chat-app

A real-time chat application built using React (Create React App on the frontend) and NodeJS/Express/Socket.io Backend

React Real-Time Chat App

Online Demo

As the Demo is hosted on a free Heroku account, the servers its hosted on enter ‘sleep mode’ when not in use. If you notice a delay, please allow a few seconds for the servers to wake up.

About:

This is a real-time chat application built using React (Create React App on the frontend) and NodeJS/Express/Socket.io Backend.

Users are able to join groups and message other users in real-time.

Tech Stack:

• NodeJS/Express
• SOCKET.IO
• React (Create React App)
• React Router 4
• Moment JS
• SASS

Screenshot

Software

Before proceeding, please ensure you have the following software installed on your computer.

• Node
• Yarn (optional but recommended)
• Git command line tools

Useful links

• Download Git CLT - Windows: https://git-scm.com/download/windows Mac: https://git-scm.com/download/mac
• Download Node - https://nodejs.org/en/
• Download Yarn CLT - https://yarnpkg.com/lang/en/docs/install/
• Download VSCode - https://code.visualstudio.com/

Getting started

Please fork a copy of this repository. Forking a repository allows you to freely experiment with changes without affecting the original project. Alternatively download or clone the master branch.

Download & Install Dependencies on your machine

Clone the repo to your machine

git clone <CloneURL>

Lunch the backend

1. Within terminal or cmd ensure you have navigated inside the 'Backend' directory and installed the dependencies

cd <../path/to/Backend> 
yarn install OR npm install

2. Run the start script

yarn run start OR npm run start

Lunch the frontend

1. Open a new terminal window and navigate inside the 'Frontend' folder as you will need to keep the backend running in the background

cd <../path/to/Frontend> 
yarn install OR npm install

2. Run the start script

yarn run start OR npm run start

Your app should be running on: http://localhost:3000

react-real-time-chat-app's Issues

npm Warning

Upgrade to kleur@3 while running npm install.

Frontend won't work

When I run the command npm install in the frontend/app folder it returns a lot of errors about react-dom, react-screen-loading, and react-router-dom. It says there is an upstream conflict and that the packages are either incorrect or potentially broken.

new group creation

how to create a new group in this app?