✨ Full-Stack Real-Time Chat Application ✨

A modern and scalable full-stack chat platform built with the MERN stack featuring secure authentication, real-time messaging, media uploads, email integration, online presence tracking, and a beautiful responsive UI.

---

🌐 Live Demo

🚀 Live Application

• Frontend: https://your-frontend-url.com
• Backend API: https://your-backend-url.com

---

📸 Preview

Authentication Page

Chat Interface

---

✨ Features

🔐 Authentication & Security

• Custom JWT Authentication
• Secure Login & Signup System
• Protected API Routes
• Password Hashing with Bcrypt
• HTTP-only Cookie Authentication
• Session Persistence
• API Rate Limiting with Arcjet
• Environment-based Secure Configurations

---

💬 Real-Time Communication

• Real-Time Messaging using Socket.io
• Instant Message Delivery
• Online / Offline Presence Indicators
• Typing Status Indicators
• Notification & Typing Sounds
• Auto Scroll to Latest Messages
• Persistent Chat History

---

🖼️ Media & Cloud Features

• Image Uploads with Cloudinary
• Optimized Media Delivery
• Welcome Emails with Resend API
• User Profile Image Support

---

🎨 Frontend Features

• Modern React UI
• Tailwind CSS Styling
• DaisyUI Components
• Zustand State Management
• Responsive Mobile-Friendly Design
• Smooth User Experience
• Loading Skeletons & UI Feedback
• Toast Notifications

---

⚙️ Backend Features

• RESTful API Architecture
• Express.js Backend
• MongoDB + Mongoose Integration
• Modular Folder Structure
• Centralized Error Handling
• Scalable Architecture Design
• Middleware-based Authentication

---

🧑‍💻 Developer Experience

• Clean Code Architecture
• Easy Local Setup
• Git & GitHub Workflow Friendly
• Branch & PR Based Development
• Free-Tier Deployment Ready

---

🛠️ Tech Stack

Frontend React.js Tailwind CSS DaisyUI Zustand Axios Socket.io Client React Router DOM

Backend Node.js Express.js MongoDB Mongoose JWT Bcrypt.js Socket.io Cloudinary Resend Arcjet

---

📂 Folder Structure

root
│
├── backend
│   ├── src
│   │   ├── controllers
│   │   ├── middleware
│   │   ├── models
│   │   ├── routes
│   │   ├── lib
│   │   ├── utils
│   │   └── server.js
│   │
│   ├── package.json
│   └── .env
│
├── frontend
│   ├── src
│   │   ├── components
│   │   ├── pages
│   │   ├── store
│   │   ├── lib
│   │   ├── constants
│   │   └── main.jsx
│   │
│   ├── package.json
│   └── vite.config.js
│
└── README.md

---

⚡ Getting Started

1️⃣ Clone the Repository

git clone https://github.com/your-username/your-repo-name.git
cd your-repo-name

---

2️⃣ Setup Backend Environment Variables

Create a .env file inside the backend folder.

PORT=3000

MONGO_URI=your_mongodb_connection_string

NODE_ENV=development

JWT_SECRET=your_super_secret_jwt_key

RESEND_API_KEY=your_resend_api_key
EMAIL_FROM=your_email_address
EMAIL_FROM_NAME=your_sender_name

CLIENT_URL=http://localhost:5173

CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

ARCJET_KEY=your_arcjet_key
ARCJET_ENV=development

---

3️⃣ Install Dependencies

Backend Setup

cd backend
npm install

Frontend Setup

cd frontend
npm install

---

4️⃣ Run the Application

Start Backend Server

cd backend
npm run dev

Backend will run on:

http://localhost:3000

---

Start Frontend

cd frontend
npm run dev

Frontend will run on:

http://localhost:5173

---

🔗 API Endpoints

Authentication Routes

Method	Endpoint	Description
POST	/api/auth/signup	Register User
POST	/api/auth/login	Login User
POST	/api/auth/logout	Logout User
GET	/api/auth/check	Check Authentication

---

Message Routes

Method	Endpoint	Description
GET	/api/messages/users	Get Sidebar Users
GET	/api/messages/:id	Get Chat Messages
POST	/api/messages/send/:id	Send Message

---

🔄 Real-Time Features

• Socket.io Real-Time Connection
• User Online Status
• Typing Events
• Live Message Updates
• Instant UI Synchronization

---

☁️ Deployment Guide

Frontend Deployment

• Vercel
• Netlify

Backend Deployment

• Render
• Railway

Database

• MongoDB Atlas

Media Storage

• Cloudinary

---

📈 Future Improvements

• ✅ Group Chats
• ✅ Voice Calling
• ✅ Video Calling
• ✅ Read Receipts
• ✅ End-to-End Encryption
• ✅ File & Document Sharing
• ✅ AI Chat Features
• ✅ Message Reactions
• ✅ Chat Themes
• ✅ Pinned Messages

---

🧪 Testing

Run Backend Tests

npm test

---

🧑‍💻 Git Workflow

# Create new branch
git checkout -b feature/feature-name

# Commit changes
git commit -m "Added new feature"

# Push branch
git push origin feature/feature-name

---

🤝 Contributing

Contributions are welcome!

Steps to Contribute

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push your branch
5. Open a Pull Request

---

📜 License

This project is licensed under the MIT License.

---

⭐ Support

If you like this project, consider giving it a ⭐ on GitHub.

---

Built with ❤️ using the MERN Stack