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:
Getting Started
- Clone the Repository
git clone https://github.com/mahmud-r-farhan/annoy-group-chat.git
cd annoy-group-chat
- Install Dependencies
cd server && npm install
cd ../client && npm install
-
Create Environment Variables
Create a
.env
file inside theβ¦
π Live Demo
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)
Its Amazing but it would be better if the data stored in mongodb
Glad you liked it! I'm already working on storing the data in MongoDB.