💬 Real-Time Chat Application

A full-stack real-time chat application built with the PERN stack (PostgreSQL, Express, React, Node.js) featuring instant messaging, user authentication, and media sharing capabilities.

---

📋 Table of Contents

• Features
• Tech Stack
• Architecture
• Getting Started
  • Prerequisites
  • Installation
  • Environment Variables
• Project Structure
• API Endpoints
• Socket Events
• Contributing
• License

---

✨ Features

Core Features

• 🔐 User Authentication - Secure JWT-based authentication with access & refresh tokens
• 💬 Real-Time Messaging - Instant message delivery using Socket.io
• 👥 One-on-One Chat - Private conversations between users
• 🟢 Online Status - See who's online in real-time
• 📱 Responsive Design - Seamless experience across desktop, tablet, and mobile

Advanced Features

• 🖼️ Media Sharing - Send images and files via Cloudinary integration
• 🔔 Toast Notifications - Instant feedback for user actions
• 🎨 Modern UI - Clean interface with Tailwind CSS and DaisyUI components
• ⚡ State Management - Efficient state handling with Zustand
• 🔄 Auto-Reconnect - Automatic reconnection on network issues

---

🛠️ Tech Stack

Backend

Technology	Purpose
Node.js	Runtime environment
Express.js	Web framework
MongoDB	NoSQL database
Mongoose	ODM for MongoDB
Socket.io	Real-time communication
JWT	Authentication tokens
bcryptjs	Password hashing
Cloudinary	Media storage & optimization
Cookie Parser	Cookie handling
CORS	Cross-origin resource sharing

Frontend

Technology	Purpose
React 19	UI library
Vite	Build tool & dev server
Tailwind CSS	Utility-first CSS framework
DaisyUI	Tailwind component library
Zustand	State management
Socket.io Client	Real-time communication
Axios	HTTP client
React Router	Client-side routing
Lucide React	Icon library
React Hot Toast	Notifications

---

🏗️ Architecture

┌─────────────────────────────────────────────────────────────┐
│                      CLIENT (React)                         │
│  ┌─────────┐  ┌──────────┐  ┌──────────┐  ┌────────────┐  │
│  │  Pages   │  │Components│  │  Store   │  │   Lib      │  │
│  │          │  │          │  │(Zustand) │  │            │  │
│  └────┬─────┘  └────┬─────┘  └────┬─────┘  └─────┬──────┘  │
│       └──────────────┴─────────────┴───────────────┘        │
│                           │                                  │
│                    Socket.io + Axios                         │
└───────────────────────────┼─────────────────────────────────┘
                            │
                            ▼
┌─────────────────────────────────────────────────────────────┐
│                    SERVER (Express)                          │
│  ┌──────────┐  ┌───────────┐  ┌──────────┐  ┌───────────┐  │
│  │  Routes   │  │Controllers│  │Middleware│  │   Lib     │  │
│  └────┬─────┘  └─────┬─────┘  └────┬─────┘  └─────┬─────┘  │
│       └──────────────┴─────────────┴───────────────┘        │
│                           │                                  │
│              ┌────────────┴────────────┐                    │
│              ▼                         ▼                    │
│  ┌──────────────────┐      ┌──────────────────┐            │
│  │     MongoDB      │      │    Cloudinary     │            │
│  │    (Database)    │      │  (Media Storage)  │            │
│  └──────────────────┘      └──────────────────┘            │
└─────────────────────────────────────────────────────────────┘

---

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18.0.0 or higher)
• npm (v9.0.0 or higher)
• MongoDB (local instance or MongoDB Atlas account)
• Cloudinary account (for media storage)

Installation

1. Clone the repository

   git clone https://github.com/KaizenPrad/Chat_Application.git
   cd Chat_Application

2. Install root dependencies

   npm install

3. Install backend dependencies

   cd backend
   npm install

4. Install frontend dependencies

   cd ../frontend
   npm install

5. Set up environment variables (see below)

6. Start the development servers

   In one terminal (backend):

   cd backend
   npm run dev

   In another terminal (frontend):

   cd frontend
   npm run dev

7. Open your browser

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

Environment Variables

Create a .env file in the backend directory:

# Server Configuration
PORT=5000
NODE_ENV=development

# MongoDB Connection
MONGODB_URI=mongodb://localhost:27017/chat-application

# JWT Secrets
ACCESS_TOKEN_SECRET=your_access_token_secret_here
REFRESH_TOKEN_SECRET=your_refresh_token_secret_here

# Cloudinary Configuration
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret

# Client URL (for CORS)
CLIENT_URL=http://localhost:5173

---

📁 Project Structure

Chat_Application/
├── backend/
│   ├── src/
│   │   ├── controllers/     # Request handlers
│   │   ├── lib/            # Utility functions & configurations
│   │   ├── middlewares/    # Custom middleware (auth, error handling)
│   │   ├── models/        # Mongoose data models
│   │   ├── routes/        # API route definitions
│   │   └── server.js      # Entry point & Socket.io setup
│   ├── package.json
│   └── .env
│
├── frontend/
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── constants/     # App constants & configurations
│   │   ├── lib/           # Utility functions
│   │   ├── pages/         # Route-level components
│   │   ├── store/         # Zustand state management
│   │   ├── App.jsx        # Main app with routing
│   │   ├── index.css      # Global styles
│   │   └── main.jsx       # Entry point
│   ├── public/            # Static assets
│   ├── index.html         # HTML template
│   ├── vite.config.js     # Vite configuration
│   ├── tailwind.config.js # Tailwind configuration
│   └── package.json
│
├── .gitignore
├── package.json           # Root package.json (scripts)
└── README.md

---

📡 API Endpoints

Authentication

Method	Endpoint	Description	Access
POST	/api/auth/signup	Register new user	Public
POST	/api/auth/login	Login user	Public
POST	/api/auth/logout	Logout user	Authenticated
GET	/api/auth/check	Check auth status	Authenticated
POST	/api/auth/refresh-token	Refresh access token	Public

Users

Method	Endpoint	Description	Access
GET	/api/users	Get all users	Authenticated
GET	/api/users/:id	Get user by ID	Authenticated
PUT	/api/users/profile	Update profile	Authenticated

Messages

Method	Endpoint	Description	Access
GET	/api/messages/:userId	Get messages with user	Authenticated
POST	/api/messages/send/:userId	Send message	Authenticated

---

🔌 Socket Events

Client → Server

Event	Payload	Description
connect	-	Establish connection
disconnect	-	Handle disconnection
message:send	{ receiverId, text, image }	Send a message

Server → Client

Event	Payload	Description
message:receive	{ senderId, text, image, createdAt }	Receive a message
user:online	{ userId }	User came online
user:offline	{ userId }	User went offline
users:online	[userId1, userId2, ...]	List of online users

---

🎨 Screenshots

Add screenshots of your application here

[Login Page]  [Chat Interface]  [Mobile View]

---

🔧 Available Scripts

Root

Command	Description
npm run build	Install all dependencies & build frontend
npm run start	Start backend server

Backend

Command	Description
npm run dev	Start with nodemon (hot reload)
npm start	Start production server

Frontend

Command	Description
npm run dev	Start Vite dev server
npm run build	Build for production
npm run preview	Preview production build
npm run lint	Run ESLint

---

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Commit your changes

   git commit -m 'Add amazing feature'

4. Push to the branch

   git push origin feature/amazing-feature

5. Open a Pull Request

---

📝 License

This project is licensed under the ISC License - see the LICENSE file for details.

---

👨‍💻 Author

Pradyumn Dwivedi

• GitHub: @KaizenPrad
• LinkedIn: Pradyumn Dwivedi

---

🙏 Acknowledgments

• Socket.io Documentation
• Express.js Documentation
• React Documentation
• Tailwind CSS Documentation
• MongoDB Documentation

---

⭐ Star this repository if you found it helpful! ⭐