DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Sairaj Sawant
Sairaj Sawant

Posted on

Building a Real-time Comment System in MERN using WebSockets

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!

GitHub logo 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

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
Enter fullscreen mode Exit fullscreen mode

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



Do tap the β™₯️ to encourage & comment on any improvements, preferably in real-timeπŸ˜‰!

Top comments (0)

Top Heroku Alternatives (For Free)

>> Check out this classic DEV post <<