Building a Real-time Comment System in MERN using WebSockets

Sairaj Sawant — Mon, 04 Nov 2019 06:16:48 +0000

Greetings, DEV Community! Excited to write my first DEV Post about how I built a Real-time Comment System! So, I was asked to code a simple commenting system in MERN as part of a take-home assignment for a start-up's hiring process. The major requirment was to have support for 👍 & 👎.

I had actively started using Twitter and was amazed by its feature of real-time updation of retweet & ♥️ count. How does twitter do that? After reading this amazing answer on SO, I thought Why not try implementing real-time comments & 👍👎 using WebSockets? I would completely agree with implementing Long Polling would have made more sense, and that's what Socket.IO library will prefer doing, but then decided to learn more about WebSockets and implement the same.

So, did it turn out to be good? You decide! Watch the video demo I made after completing the assignment.

Interested in having a look at the code? Cool! Head over to my Github Repo and check it out!

sairajsawant / comment-system

Realtime Commenting System

Single Page Application (SPA) to demonstrate real-time comments using MERN Stack.

Video Walkthrough of Realtime Commenting System

https://youtu.be/8bGpU7fMBU0

Installation

# Clone this repository
git clone https://github.com/sairajsawant/comment-system.git

# Fire up MongoDB container
docker run -d -p 27017:27017 --restart unless-stopped --name commentsmongo mongo

# Fire up Redis container
docker run -d -p 6379:6379 --restart unless-stopped --name commentsredis redis

# Go into the backend directory
cd comment-system/backend

# Install dependencies
npm install

# Start the server
npm start

# Go into main app directory
cd ..

# Install dependencies
npm install

# Start the App
npm start

Features

Realtime comments & upvotes/downvotes using WebSockets & Redis
JWT based authorization
Microservice architecture using Node.js & Express
Caching in Redis & Persistent Storage in MongoDB using Mongoose ODM
Container based development using Docker

Technology Stack

Node.js
React
MongoDB
Redis
WebSockets
JWT

View on GitHub

Do tap the ♥️ to encourage & comment on any improvements, preferably in real-time😉!

DEV Community: Sairaj Sawant

Building a Real-time Comment System in MERN using WebSockets

sairajsawant / comment-system

Realtime Commenting System

Realtime Commenting System

Single Page Application (SPA) to demonstrate real-time comments using MERN Stack.

Video Walkthrough of Realtime Commenting System

Installation

Features

Technology Stack