logo light
ProjectsWeb Chat | Real-Time Messaging Application
Web Chat | Real-Time Messaging Application - Screenshot 1
1 / 3

Web Chat | Real-Time Messaging Application

A secure and scalable real-time web chat application with instant messaging, presence indicators, media sharing, and notification support.

Overview

Web Chat is a production-ready real-time messaging application designed for fast and reliable one-to-one communication. The platform supports secure user signup and login, private chats, real-time message delivery using Socket.IO, online/offline presence indicators, typing status, and in-app notifications. Media uploads are handled via Cloudinary, while MongoDB is used for user and message data persistence. The backend is built with Node.js and Express, the frontend with React and TypeScript, and the application is deployed on Render with a DevOps-focused setup for environment configuration, scalability, and monitoring.

Roles & Responsibilities

Full Stack DeveloperDevOps EngineerSystem Architecture Planner

Tech Stack

ReactReact
JavaScriptJavaScript
TypeScriptTypeScript
Node.jsNode.js
MongoDBMongoDB
Socket.IOSocket.IO
CloudinaryCloudinary
ResendResend
ZustandZustand
JWT AuthenticationJWT Authentication
Tailwind CSSTailwind CSS

Core Features

  • Real-time one-to-one messaging using Socket.IO with low-latency delivery.

  • Secure user authentication with signup, login, and JWT-based access control.

  • Online and offline presence detection with last-seen status tracking.

  • Message delivery acknowledgements for reliable communication.

  • In-app chat notifications with sound alerts for new messages.

  • Image and media uploads using Cloudinary with optimized storage and delivery.

  • API protection and abuse prevention using Arcjet-based rate limiting.

  • MongoDB-based persistence for users and messages with indexed queries.

  • Email notification templates sent via Resend when users receive messages while offline.

  • Responsive and animated user interface built with Tailwind CSS and Framer Motion.

  • Production deployment on Render with environment-based configuration and logging.