Real-Time Chat Application : Talks

Overview

This is a real-time chat application built using the MERN (MongoDB, Express.js, React.js, Node.js) stack, featuring real-time messaging through WebSockets. It allows users to communicate instantly and securely, with functionalities like typing indicators, online/offline status, and user authentication.

---

Features

Frontend

• Real-Time Messaging: Powered by socket.io-client for instant communication.
• State Management: Managed using zustand for simplicity and performance.
• Routing: Handled by react-router-dom for dynamic and efficient navigation.
• User Notifications: Integrated with react-hot-toast for real-time alerts.
• Custom Icons: Used lucide-react for UI consistency.

Backend

• API Management: Developed using Express.js to handle RESTful APIs.
• Database: MongoDB used for efficient data storage and retrieval.
• Authentication: Secured with bcryptjs for password hashing and jsonwebtoken for token-based authentication.
• File Uploads: Supported via cloudinary for storing user media.
• Cross-Origin Resource Sharing: Managed by cors to enable secure communication between frontend and backend.
• WebSocket Integration: Implemented with socket.io for bidirectional real-time communication.

---

Project Structure

real-time-chat-app/
├── frontend/           # React-based frontend application
│   ├── src/
│   │   ├── components/   # Reusable React components
│   │   ├── pages/        # Individual page components
│   │   ├── store/        # Zustand state management
│   │   ├── App.js        # Main application file
│   │   ├── index.js      # Entry point
│   └── package.json      # Frontend dependencies
│
├── backend/            # Node.js-based backend application
│   ├── controllers/     # API logic
│   ├── models/          # Mongoose schemas
│   ├── routes/          # Express routes
│   ├── server.js        # Main server file
│   └── package.json     # Backend dependencies
│
└── README.md           # Project documentation

---

Setup Instructions

Prerequisites

• Node.js installed on your system.
• MongoDB instance running locally or in the cloud.
• Cloudinary account for media storage.

Installation

1. Clone the repository:

   git clone https://github.com/rishisulakhe/real-time-chat-app.git
   cd real-time-chat-app

2. Install dependencies:

   # Install backend dependencies
   cd backend
   npm install
   
   # Install frontend dependencies
   cd frontend
   npm install

3. Environment variables: Create .env files in both frontend and backend directories with the following keys:

   Backend .env:

   PORT=5000
   MONGO_URI=your_mongodb_connection_string
   JWT_SECRET=your_secret_key
   CLOUDINARY_NAME=your_cloudinary_name
   CLOUDINARY_API_KEY=your_api_key
   CLOUDINARY_API_SECRET=your_api_secret

   Frontend .env:

   REACT_APP_BACKEND_URL=http://localhost:5173

4. Run the application:

   # Start backend server
   cd backend
   npm run dev
   
   # Start frontend server
   cd frontend
   npm run dev

5. Open your browser and navigate to http://localhost:3000.

---

How It Works

1. User Authentication:

   • Secure sign-up and login using JWT.
   • Passwords hashed with bcrypt for security.

2. Real-Time Communication:

   • Users can send messages instantly via WebSockets.
   • Typing indicators and online/offline statuses are updated in real time.

3. Data Storage:

   • MongoDB stores user data and chat history.
   • Cloudinary manages file uploads (e.g., images).

4. State Management:

   • Zustand simplifies global state management for real-time updates.

---

Future Enhancements

• Add group chat functionality.
• Enable message search and filters.
• Integrate AI-based chat suggestions.
• Implement end-to-end encryption for messages.

---

License

This project is licensed under the MIT License.

---

Contributors

• Rishi Prasad Sulakhe