DEV Community

Cover image for Annoy Group Chat Application with WebSocket, React, and Node.js
Mahmudur Rahman
Mahmudur Rahman

Posted on

Annoy Group Chat Application with WebSocket, React, and Node.js

Building a Real-Time Group Chat Application with WebSocket, React, and Node.js

GitHub Repository

> version 1.0.0

Check out the source code on GitHub

GitHub logo mahmud-r-farhan / AnonyChat

A real-time anonymous group chat application with modern UI and privacy features.

Annoy Group Chat Application

A real-time anonymous group chat application with modern UI and privacy features.

Features

  • Real-time Messaging: Uses WebSocket for instant communication.
  • Anonymous User Profiles: Generates random avatars for users.
  • Spam Protection: Validates messages to prevent harmful content.
  • Modern UI: Responsive design with left/right message bubbles.
  • Active Users Display: Shows the number of online users.
  • Message Persistence: Stores chat history in MongoDB.
  • Message Limits: 255-character limit per message.
  • Timestamps: All messages include a timestamp.
  • Privacy Focused: No personal data is stored.

Tech Stack

Frontend

  • React
  • TailwindCSS
  • Socket.io-client

Backend

  • Node.js
  • Express
  • Socket.io

Database

  • MongoDB

Installation & Setup

Prerequisites

Ensure you have the following installed:

Getting Started

  1. Clone the Repository
git clone https://github.com/mahmud-r-farhan/annoy-group-chat.git
cd annoy-group-chat
Enter fullscreen mode Exit fullscreen mode
  1. Install Dependencies
cd server && npm install
cd ../client && npm install
Enter fullscreen mode Exit fullscreen mode
  1. Create Environment Variables Create a .env file inside the…

🌐 Live Demo

Try the live demo here

Annoy Chat | Anonymous Group Chat

Join the best real-time chat experience. Secure, fast, and private messaging with modern UI.

favicon anonychat-app.vercel.app

Key Features

This chat application includes:
βœ… Real-time messaging using WebSocket
βœ… User profile setup with random image API
βœ… Active users display for real-time presence tracking
βœ… Spam protection for harmful links and text
βœ… Anonymous chat with privacy policy
βœ… Left/Right message alignment for clarity
βœ… Secure and private communication
βœ… Message storage in MongoDB with timestamps
βœ… Modern 2025 UI with Tailwind CSS and Framer Motion

Tech Stack

  • Frontend: React, Tailwind CSS, Framer Motion
  • Backend: Node.js, Express.js, WebSocket
  • Database: MongoDB
  • Security & Spam Protection: Middleware validation for harmful content

Final Thoughts

This project was an exciting challenge. It combined real-time WebSocket communication with a modern front-end design. The end result is a secure, scalable, and user-friendly chat application that anyone can use.

I plan to improve the app by adding file sharing, typing indicators, and private chat rooms. Let me know your thoughts!

More -

Top comments (2)

Collapse
 
abdelazizel7or profile image
Abd Elaziz El7or

Its Amazing but it would be better if the data stored in mongodb

Collapse
 
mahmud-r-farhan profile image
Mahmudur Rahman

Glad you liked it! I'm already working on storing the data in MongoDB.