💬 Talk-A-Tive — Real-Time Chat Application

A full-stack real-time chat app with a premium modern UI, built with React, Node.js, Socket.io, and MongoDB.

---

✨ Features

Feature	Status
Real-Time Messaging (Socket.io)	✅
One-to-One Private Chat	✅
Group Chat (Create / Manage)	✅
JWT Authentication (Login / Register)	✅
Online / Offline Presence Indicators	✅
Typing Indicators	✅
Read Receipts (Mark as Read)	✅
Message Reactions (Emoji)	✅
File Sharing (Image, Video, Audio, Document)	✅
Drag & Drop File Upload	✅
Image Lightbox (Zoom, Rotate, Download)	✅
Message Search within Chat	✅
Dark / Light Theme Toggle	✅
Custom Avatar Upload	✅
User Profile Modal	✅
Responsive Collapsible Sidebar	✅
Docker Ready	✅

---

🛠 Tech Stack

Layer	Technology
Frontend	React 18 (Vite), React Router v6
Backend	Node.js, Express
Real-Time	Socket.io
Database	MongoDB (Mongoose ODM)
Auth	JWT + bcryptjs
File Uploads	Multer (local storage, up to 100MB)
Styling	Vanilla CSS (Design tokens, glassmorphism)
DevOps	Docker + Docker Compose
Scaling	Redis + @socket.io/redis-adapter

---

📂 Project Structure

Chat/
├── client/                   # React Frontend
│   └── src/
│       ├── components/
│       │   ├── Authentication/  # Login, Signup, ProfileModal
│       │   └── Chat/            # SingleChat, ChatList, SideDrawer
│       ├── Context/             # ChatProvider (global state)
│       ├── Pages/               # HomePage, ChatPage
│       └── App.css              # Global design system
├── server/                   # Node.js Backend
│   ├── config/               # DB + Redis config
│   ├── middleware/            # auth.js, upload.js
│   ├── models/               # User, Chat, Message
│   ├── routes/               # auth, chat, message, user
│   ├── socket/               # Socket.io event handlers
│   └── server.js
├── doc/                      # Project documentation
├── docker-compose.yml
└── README.md

---

🏁 Getting Started

Prerequisites

• Node.js v18+
• MongoDB (local or Atlas)
• Redis (optional for local dev)
• Docker (optional)

Installation

1. Clone the repository
2. Install Server Dependencies

   cd server
   npm install

3. Install Client Dependencies

   cd client
   npm install

Running Locally

1. Start the Backend

   cd server
   npm run dev

2. Start the Frontend

   cd client
   npm run dev

   Frontend runs on: http://localhost:5173
   Backend runs on: http://localhost:5000

Running with Docker

docker-compose up -d --build

---

🔐 Environment Variables

Create a .env file in the server directory:

PORT=5000
MONGO_URI=mongodb://localhost:27017/chat_app
JWT_SECRET=your_secret_key_here
REDIS_URL=redis://localhost:6379
CLIENT_URL=http://localhost:5173

---

📡 API Endpoints

Method	Endpoint	Description
POST	/api/auth/register	Register a new user
POST	/api/auth/login	Login and get JWT
GET	/api/user	Search users
PUT	/api/user/profile	Update avatar
POST	/api/chat	Access/create 1-to-1 chat
GET	/api/chat	Fetch all chats
POST	/api/chat/group	Create group chat
PUT	/api/chat/rename	Rename group
PUT	/api/chat/groupadd	Add user to group
PUT	/api/chat/groupremove	Remove user from group
GET	/api/message/:chatId	Fetch messages
POST	/api/message	Send message (with optional file)
PUT	/api/message/:chatId/read	Mark messages as read
POST	/api/message/reaction	Add/remove emoji reaction

---

🔌 Socket.io Events

Event	Direction	Description
setup	Client → Server	Register user, join personal room
join chat	Client → Server	Join a chat room
new message	Client → Server	Broadcast new message
message recieved	Server → Client	Receive new message
typing	Client → Server	User is typing
stop typing	Client → Server	User stopped typing
read_message	Client → Server	Mark chat as read
message_read_update	Server → Client	Sync read status
message_reaction	Client → Server	Send emoji reaction
reaction_update	Server → Client	Sync reaction changes
user_online	Server → Client	User came online
user_offline	Server → Client	User went offline

---

🔒 Security

• Password hashing with bcrypt
• JWT token-based route protection
• Auth guard — unauthenticated users are redirected to login
• File type validation (MIME type + extension)
• 100MB file size limit enforced server-side
• CORS restriction to trusted origin

---

👨‍💻 Author

Sandip Tawhare — Full Stack Developer

---

⭐ If You Like This Project

Give it a star ⭐ and feel free to fork!