Build a Simple Real-Time Chat App

With React, Socket.io & Node js

Image from Pixabay by Mo Hassan

I went through the Socket.io documentation and guess what, I ended up creating a mini real-time chat app and I thought I would share that by writing an article.

In this article, I will show you how you could build your mini chat app from scratch

I will break the tutorial into three parts and they are as follow:

1. Installation & Set-up
2. Server-side(backend)
3. Client-side(frontend)

Let’s dive into it!

Prerequisite: You’d need some basic knowledge in React & Node js

Step 1: Installation and Setup

We’ll be using the “npm” package manager. In your terminal(console), you can write the command below

npm init -y

Now let’s install the packages for our server-side

npm install --save express socket.io

While still in the root directory, let’s create our react-app(client) by running the command below

npx create-react-app client

Next, we’ll install the packages we’ll need on our frontend

npm install --save socket.io-client…