A full-stack real-time chat application built with React, Node.js, Socket.io, and MongoDB.

• 🔐 User authentication (signup/login)
• 💬 Real-time messaging with Socket.io
• 👤 User profiles with image upload
• 🎨 Theme customization (light/dark mode)
• 📱 Responsive design with Tailwind CSS and DaisyUI
• 🔒 JWT-based authentication
• 🖼️ Image upload with Cloudinary

• React 18
• Vite
• Tailwind CSS + DaisyUI
• Zustand (state management)
• Socket.io-client
• React Router v7
• Axios

• Node.js + Express
• MongoDB with Mongoose
• Socket.io
• JWT authentication
• Cloudinary (image storage)
• bcrypt (password hashing)

Before running this application, make sure you have:

1. Node.js (v14 or higher) - Download
2. MongoDB - Either:
   • Local installation - Download
   • MongoDB Atlas account (free cloud database) - Sign up
3. Cloudinary Account (free tier available) - Sign up

git clone <repository-url>
cd Chat-app

You have two options:

npm run build

# Install backend dependencies
cd backend
npm install

# Install frontend dependencies
cd ../frontend
npm install

1. Navigate to the backend directory:

cd backend

2. Create a .env file by copying the example:

# On Windows (PowerShell)
copy .env.example .env

# On Mac/Linux
cp .env.example .env

3. Edit the .env file with your configuration:

# MongoDB Configuration
MONGO_URI=mongodb://localhost:27017/chatapp
# For MongoDB Atlas, use:
# MONGO_URI=mongodb+srv://username:[email protected]/chatapp?retryWrites=true&w=majority

# JWT Secret (use a strong random string)
JWT_SECRET=your_super_secret_jwt_key_here_change_this

# Server Port
PORT=5001

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

# Environment
NODE_ENV=development

1. Start MongoDB service:

# Windows
net start MongoDB

# Mac (with Homebrew)
brew services start mongodb-community

# Linux
sudo systemctl start mongod

1. Create a free cluster at MongoDB Atlas
2. Get your connection string
3. Replace the MONGO_URI in .env with your connection string

1. Create a free account at Cloudinary
2. Go to your Dashboard
3. Copy your Cloud Name, API Key, and API Secret
4. Add them to your .env file

Terminal 1 - Backend:

cd backend
npm run dev

The backend will start on http://localhost:5001

Terminal 2 - Frontend:

cd frontend
npm run dev

The frontend will start on http://localhost:5173

First, build the frontend:

npm run build

Then start the application:

npm start

1. Build the application:

npm run build

2. Set NODE_ENV to production in backend/.env:

NODE_ENV=production

3. Start the server:

npm start

The application will be available at http://localhost:5001

Chat-app/
├── backend/
│   ├── src/
│   │   ├── controllers/    # Route controllers
│   │   ├── lib/            # Database, socket, utilities
│   │   ├── middleware/     # Auth middleware
│   │   ├── models/         # MongoDB models
│   │   ├── routes/         # API routes
│   │   └── index.js        # Server entry point
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── pages/          # Page components
│   │   ├── store/          # Zustand stores
│   │   ├── lib/            # Utilities and axios config
│   │   └── App.jsx         # Main app component
│   └── package.json
└── package.json            # Root package.json

• POST /api/auth/signup - User registration
• POST /api/auth/login - User login
• POST /api/auth/logout - User logout
• PUT /api/auth/update-profile - Update user profile
• GET /api/auth/check - Check authentication status

• GET /api/messages/users - Get all users for chat
• GET /api/messages/:userId - Get messages with specific user
• POST /api/messages/send/:userId - Send message to user

1. MongoDB Connection Error

   • Ensure MongoDB is running
   • Check MONGO_URI in .env file
   • For Atlas, whitelist your IP address

2. Port Already in Use

   • Change PORT in backend/.env
   • Kill the process using the port:

     # Windows
     netstat -ano | findstr :5001
     taskkill /PID <PID> /F
     
     # Mac/Linux
     lsof -i :5001
     kill -9 <PID>

3. Cloudinary Upload Issues

   • Verify your Cloudinary credentials
   • Check if you've exceeded free tier limits

4. CORS Errors

   • Ensure backend is running on port 5001
   • Check cors configuration in backend/src/index.js

• Authentication: Secure JWT-based authentication with httpOnly cookies
• Real-time Messaging: Instant message delivery using Socket.io
• Online Status: See when users are online
• Profile Management: Upload and update profile pictures
• Theme Toggle: Switch between light and dark themes
• Responsive Design: Works on desktop, tablet, and mobile devices

ISC

Feel free to submit issues and pull requests.

For issues or questions, please open an issue in the repository.