DEV Community

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

Posted on

1

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 -

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

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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay