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

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:

• Node.js
• MongoDB
• npm or yarn

Getting Started

1. Clone the Repository

git clone https://github.com/mahmud-r-farhan/annoy-group-chat.git
cd annoy-group-chat

2. Install Dependencies

cd server && npm install
cd ../client && npm install

3. Create Environment Variables Create a .env file inside the…

View on GitHub

🌐 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.

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 -

🚀Introducing AnonyPost: A Social Media App for Anonymous Sharing

Mahmudur Rahman ・ Feb 10

#javascript #react #socialmedia #opensource

Comments

[Abd Elaziz El7or]

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

[Mahmudur Rahman]

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