Skip to content

Latest commit

 

History

History
140 lines (111 loc) · 4.16 KB

README.md

File metadata and controls

140 lines (111 loc) · 4.16 KB

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