ChaWe - Real-Time Chat Application

ChaWe is a feature-rich real-time chat application that allows users to communicate via direct messages and group chats with a beautiful, responsive UI.

Features

• User Authentication: Register, login, password recovery
• Real-time Messaging: Instant message delivery with typing indicators
• Friend System: Send/accept friend requests, manage friends
• Group Chats: Create and manage group conversations
• Notifications: Real-time notifications for messages and friend requests
• Media Sharing: Send images and other attachments in conversations
• User Profiles: Customize avatars and profile information
• Responsive Design: Works on desktop and mobile devices

Tech Stack

Frontend

• React.js with Vite
• React Router for navigation
• Tailwind CSS for styling
• Socket.io client for real-time communication
• Axios for API requests

Backend

• Node.js and Express
• MongoDB with Mongoose
• Socket.io for real-time events
• JWT for authentication
• Bcrypt for password hashing
• Multer for file uploads
• Cloudinary for media storage
• Nodemailer for email notifications

Installation

Prerequisites

• Node.js (v14+)
• MongoDB
• Cloudinary account (for media storage)

Backend Setup

1. Clone the repository:

   git clone https://github.com/yourusername/chawe.git
   cd chawe
   

2. Install backend dependencies:

   cd server
   npm install
   

3. Create a .env file in the server directory with the following variables:

   NODE_ENV=development
   PORT=5000
   MONGODB_URI=mongodb://localhost:27017/chawe
   JWT_SECRET=your_jwt_secret_key
   JWT_EXPIRE=30d
   CLIENT_URL=http://localhost:5173
   
   # Cloudinary Configuration
   CLOUDINARY_CLOUD_NAME=your_cloud_name
   CLOUDINARY_API_KEY=your_api_key
   CLOUDINARY_API_SECRET=your_api_secret
   
   # Email Configuration
   EMAIL_SERVICE=gmail
   [email protected]
   EMAIL_PASSWORD=your_app_password
   [email protected]
   

4. Start the backend server:

   npm run dev
   

Frontend Setup

1. Install frontend dependencies:

   cd ../client
   npm install
   

2. Create a .env file in the client directory:

   VITE_API_URL=http://localhost:5000/api
   VITE_SOCKET_URL=http://localhost:5000
   

3. Start the frontend development server:

   npm run dev
   

4. Open your browser and navigate to http://localhost:5173

Deployment

Backend

1. Set appropriate environment variables in production
2. Build the project: npm run build
3. Start the server: npm start

Frontend

1. Build the project: npm run build
2. Deploy the dist directory to your hosting service