Real-Time Chat Application

A modern, full-stack real-time chat application built with React, Express.js, MongoDB, and Socket.IO. Features user authentication, real-time messaging, follow/unfollow system, and user profiles with Clerk authentication integration.

🚀 Features

• Real-time Messaging: Instant message delivery using Socket.IO
• User Authentication: Secure authentication with Clerk
• Follow/Unfollow System: Connect with other users
• User Profiles: Customizable profiles with bio and profile pictures
• Online Status: See who's online in real-time
• Search Users: Find and connect with other users
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• File Uploads: Profile picture uploads with Cloudinary integration

🛠️ Tech Stack

Frontend

• React with Vite
• Clerk for authentication
• Socket.IO Client for real-time communication
• Axios for API calls
• Tailwind CSS for styling

Backend

• Node.js with Express.js
• MongoDB with Mongoose
• Socket.IO for real-time features
• JWT for authentication tokens
• Cloudinary for file uploads
• CORS enabled for cross-origin requests

📁 Project Structure

Real-Time-Chat/
├── client/                    # React frontend
│   ├── src/
│   │   ├── components/        # React components
│   │   │   ├── Sidebar.jsx    # User list and search
│   │   │   ├── ChatContainer.jsx # Chat interface
│   │   │   └── RightSidebar.jsx # Additional UI elements
│   │   ├── context/           # React context providers
│   │   │   ├── AuthContext.jsx # Authentication context
│   │   │   └── ChatContext.jsx # Chat state management
│   │   ├── pages/             # Page components
│   │   │   └── LoginPage.jsx  # Login page
│   │   ├── App.jsx            # Main app component
│   │   ├── main.jsx           # App entry point
│   │   └── index.css          # Global styles
│   ├── package.json
│   └── vite.config.js
├── server/                    # Express.js backend
│   ├── controllers/           # Route controllers
│   │   └── user.controller.js # User-related operations
│   ├── middleware/            # Custom middleware
│   │   └── auth.js            # Authentication middleware
│   ├── model/                 # Database models
│   │   └── user.model.js      # User schema
│   ├── routes/                # API routes
│   │   └── user.routes.js     # User routes
│   ├── utils/                 # Utility functions
│   │   ├── asyncHandler.js    # Async error handling
│   │   ├── cloudinary.js      # Cloudinary configuration
│   │   ├── ApiError.js        # Custom error class
│   │   └── ApiResponse.js     # Standard response format
│   ├── lib/                   # Library files
│   │   └── db.js              # Database connection
│   ├── server.js              # Main server file
│   └── package.json
├── .env.example               # Environment variables template
└── README.md

📦 Getting Started

Prerequisites

• Node.js (v16 or later)
• npm or yarn
• MongoDB database
• Clerk account for authentication
• Cloudinary account for file uploads

Installation

1. Clone the repository

   git clone <your-repository-url>
   cd Real-Time-Chat

2. Install backend dependencies

   cd server
   npm install

3. Install frontend dependencies

   cd ../client
   npm install

4. Set up environment variables

   • Copy .env.example to .env in both client and server directories
   • Fill in your actual values for all environment variables

5. Start the development servers

   Backend (from server directory):

   npm run dev

   Frontend (from client directory):

   npm run dev

🔧 Environment Variables

Server (.env)

MONGODB_URL=your_mongodb_connection_string
REFRESH_TOKEN_SECRET=your_jwt_refresh_token_secret
REFRESH_TOKEN_EXPIRY=7d
CLOUDINARY_API_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secret
PORT=5000
NODE_ENV=development

Client (.env)

VITE_BACKEND_URL=http://localhost:5000
VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key

📝 Configuration

Setting up Clerk Authentication

1. Create an account at Clerk
2. Create a new application and get your publishable key
3. Add the key to your client .env file as VITE_CLERK_PUBLISHABLE_KEY

Setting up Cloudinary

1. Create an account at Cloudinary
2. Get your cloud name, API key, and API secret from the dashboard
3. Add these values to your server .env file

Setting up MongoDB

1. Use MongoDB Atlas (cloud) or local MongoDB installation
2. Get your connection string and add it to server .env as MONGODB_URL

📜 Scripts

Server Scripts (from server directory)

npm run dev      # Start development server
npm start        # Start production server
npm test         # Run tests

Client Scripts (from client directory)

npm run dev      # Start development server
npm run build    # Create production build
npm run preview  # Preview production build

🚀 Deployment

Backend Deployment (Vercel/Heroku/Railway)

1. Set all environment variables in your deployment platform
2. Deploy the server directory
3. Update client's VITE_BACKEND_URL to point to your deployed backend

Frontend Deployment (Vercel/Netlify)

1. Set environment variables in your deployment platform
2. Deploy the client directory
3. Ensure CORS is properly configured on the backend

🤝 Contributing

1. Fork the project
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

📄 License

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

🆘 Support

If you have any questions or run into issues, please:

1. Check the console for error messages
2. Ensure all environment variables are properly set
3. Verify that MongoDB and other services are running
4. Open an issue on GitHub with detailed information about the problem

🙏 Acknowledgments

• Clerk for authentication services
• Cloudinary for file upload services
• Socket.IO for real-time communication
• MongoDB for database services