💬 Real-Time Chat Application

A full-stack real-time chat application built with the MERN stack (MongoDB, Express.js, React, Node.js) featuring real-time messaging, online user status, profile management, and image uploads.

✨ Features

• 🔐 Authentication & Authorization - JWT-based secure authentication
• 💬 Real-Time Messaging - Instant messaging using Socket.IO
• 👥 Online User Status - See who's online in real-time
• 🖼️ Image Uploads - Profile picture uploads with Cloudinary
• 🎨 Modern UI - Beautiful interface with Tailwind CSS and DaisyUI
• 📱 Responsive Design - Works seamlessly on desktop and mobile
• 🔒 Secure - HTTP-only cookies, password hashing with bcrypt
• ⚡ Fast - Optimized with Vite and React 19
• 🎭 Theme Support - Multiple theme options
• 📊 TypeScript - Type-safe frontend code

🏗️ Project Structure

chat-app/
├── backend/                    # Backend server
│   ├── src/
│   │   ├── controllers/       # Request handlers
│   │   │   ├── auth.controller.js
│   │   │   └── message.controller.js
│   │   ├── lib/              # Utility libraries
│   │   │   ├── cloudinary.js  # Image upload config
│   │   │   ├── db.js          # Database connection
│   │   │   ├── socket.js      # Socket.IO setup
│   │   │   └── utils.js       # Helper functions
│   │   ├── middleware/        # Custom middleware
│   │   │   └── auth.middleware.js
│   │   ├── models/           # Database models
│   │   │   ├── message.model.js
│   │   │   └── user.model.js
│   │   ├── routes/           # API routes
│   │   │   ├── auth.route.js
│   │   │   └── message.route.js
│   │   ├── seeds/            # Database seeders
│   │   │   └── user.seed.js
│   │   └── index.js          # Entry point
│   ├── .env                  # Environment variables
│   └── package.json
│
├── frontend/                  # Frontend application
│   ├── src/
│   │   ├── components/       # React components
│   │   │   ├── AuthImagePattern.tsx
│   │   │   ├── ChatContainer.tsx
│   │   │   ├── ChatHeader.tsx
│   │   │   ├── Loader.tsx
│   │   │   ├── MessageInput.tsx
│   │   │   ├── Navbar.tsx
│   │   │   ├── NoChatSelected.tsx
│   │   │   ├── Sidebar.tsx
│   │   │   └── skeletons/    # Loading skeletons
│   │   │       ├── MessageSkeleton.tsx
│   │   │       └── SidebarSkeleton.tsx
│   │   ├── constants/        # App constants
│   │   │   └── index.ts
│   │   ├── lib/             # Utilities
│   │   │   ├── axios.ts      # API client
│   │   │   └── utils.ts      # Helper functions
│   │   ├── pages/           # Page components
│   │   │   ├── HomePage.tsx
│   │   │   ├── LoginPage.tsx
│   │   │   ├── ProfilePage.tsx
│   │   │   ├── SettingsPage.tsx
│   │   │   └── SignUpPage.tsx
│   │   ├── store/           # State management (Zustand)
│   │   │   ├── useAuthStore.ts
│   │   │   ├── useChatStore.ts
│   │   │   └── useThemeStore.ts
│   │   ├── App.tsx          # Main component
│   │   ├── main.tsx         # Entry point
│   │   └── index.css        # Global styles
│   ├── public/              # Static assets
│   ├── .env                 # Environment variables
│   └── package.json
│
├── .gitignore
├── package.json             # Root package.json
├── README.md
└── SECURITY.md

🛠️ Tech Stack

Backend

• Node.js - Runtime environment
• Express.js - Web framework
• MongoDB - NoSQL database
• Mongoose - ODM for MongoDB
• Socket.IO - Real-time bidirectional communication
• JWT - Authentication tokens
• Bcrypt.js - Password hashing
• Cloudinary - Image storage and management
• Cookie-Parser - Cookie handling
• CORS - Cross-origin resource sharing
• Dotenv - Environment variable management

Frontend

• React 19 - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• DaisyUI - Tailwind CSS component library
• Zustand - State management
• React Router DOM - Client-side routing
• Axios - HTTP client
• Socket.IO Client - Real-time communication
• React Hot Toast - Toast notifications
• Lucide React - Icon library

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v18.0.0 or higher)
• npm or yarn
• MongoDB (local installation or MongoDB Atlas account)
• Git
• Cloudinary Account (for image uploads)

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/eshanhasitha/chat-app.git
cd chat-app

2. Backend Setup

Install Dependencies

cd backend
npm install

Configure Environment Variables

Create a .env file in the backend directory:

PORT=5001
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
NODE_ENV=development

CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret

Environment Variables Explained:

• PORT - Port number for the backend server (default: 5001)
• MONGODB_URI - MongoDB connection string
• JWT_SECRET - Secret key for JWT token generation (use a strong random string)
• NODE_ENV - Environment mode (development or production)
• CLOUDINARY_* - Cloudinary credentials for image uploads

Generate a secure JWT secret:

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Start the Backend Server

Development mode (with auto-restart):

npm run dev

Production mode:

npm start

The backend server will run on http://localhost:5001

3. Frontend Setup

Install Dependencies

cd frontend
npm install

Configure Environment Variables (Optional)

If your backend is running on a different URL, create a .env file in the frontend directory:

VITE_API_URL=http://localhost:5001/api

By default, the frontend connects to http://localhost:5001/api

Start the Frontend Application

Development mode:

npm run dev

The frontend application will run on http://localhost:5173

Build for production:

npm run build

Preview production build:

npm run preview

4. Open the Application

Navigate to http://localhost:5173 in your browser to use the application.

🎮 Usage

Creating an Account

1. Click on "Sign Up" on the homepage
2. Enter your full name, email, and password
3. Click "Create Account"

Logging In

1. Click on "Login"
2. Enter your registered email and password
3. Click "Sign In"

Sending Messages

1. Select a user from the sidebar
2. Type your message in the input field
3. Press Enter or click the send button
4. Messages appear in real-time for both users

Updating Profile

1. Click on the profile icon in the navbar
2. Click "Edit Profile"
3. Upload a new profile picture or update your information
4. Changes are saved automatically

Online Status

• Green dot indicates online users
• Users can see who is currently online in real-time

Theme Selection

1. Click the settings icon
2. Choose from available themes
3. Theme preference is saved locally

📡 API Endpoints

Authentication

• POST /api/auth/signup - Register a new user
• POST /api/auth/login - Login user
• POST /api/auth/logout - Logout user
• GET /api/auth/check - Check authentication status
• PUT /api/auth/update-profile - Update user profile

Messages

• GET /api/messages/users - Get all users for sidebar
• GET /api/messages/:id - Get messages with a specific user
• POST /api/messages/send/:id - Send a message to a user

Socket Events

• connection - User connects
• disconnect - User disconnects
• newMessage - New message sent
• getOnlineUsers - Broadcast online users

🔒 Security Features

• Password hashing with bcrypt
• JWT token-based authentication
• HTTP-only cookies for token storage
• CORS protection
• Input validation and sanitization
• Secure headers with Express
• Environment variable protection

🧪 Database Models

User Model

{
  email: String (unique, required),
  fullName: String (required),
  password: String (required, hashed),
  profilePic: String (default: avatar),
  createdAt: Date
}

Message Model

{
  senderId: ObjectId (ref: User, required),
  receiverId: ObjectId (ref: User, required),
  text: String,
  image: String,
  createdAt: Date
}

🐛 Troubleshooting

Backend won't start

Error: Port 5001 is already in use

# Windows
netstat -ano | findstr :5001
taskkill /PID <PID> /F

# Mac/Linux
lsof -ti:5001 | xargs kill -9

Error: MongoDB connection failed

• Check if MongoDB is running locally
• Verify MONGODB_URI in .env file
• For MongoDB Atlas, check network access settings

Frontend won't connect to backend

• Ensure backend is running on port 5001
• Check CORS settings in backend
• Verify VITE_API_URL in frontend .env

Images not uploading

• Verify Cloudinary credentials in backend .env
• Check file size limits
• Ensure proper MIME types are allowed

📦 Building for Production

Full Stack Build

From the root directory:

npm run build
npm start

Backend Only

cd backend
npm install --production
NODE_ENV=production npm start

Frontend Only

cd frontend
npm run build
# Deploy the 'dist' folder to your hosting service

🚢 Deployment

Backend Deployment (Render/Railway/Heroku)

1. Push code to GitHub
2. Connect repository to hosting platform
3. Set environment variables
4. Deploy

Frontend Deployment (Vercel/Netlify)

1. Push code to GitHub
2. Connect repository to hosting platform
3. Set build command: npm run build
4. Set output directory: dist
5. Add environment variable: VITE_API_URL
6. Deploy

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🙏 Acknowledgments

• Socket.IO for real-time communication
• Cloudinary for image management
• MongoDB for database solution
• The React and Node.js communities