DEV Community

Sairaj Sawant
Sairaj Sawant

Posted on

11 2

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πŸ˜‰!

Postgres on Neon - Get the Free Plan

No credit card required. The database you love, on a serverless platform designed to help you build faster.

Get Postgres on Neon

Top comments (0)

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay