Real-Time Chat Application

This is a full-stack real-time chat application built with the MERN stack (MongoDB, Express.js, React.js, Node.js) and Socket.IO for real-time communication. It allows users to sign up, log in, see other users, create one-on-one chats, group chats, and exchange messages in real-time.

Features

• User authentication (signup and login)
• List available users
• Create one-on-one chats
• Create group chats
• Real-time messaging with Socket.IO
• Typing indicators
• View chat history
• Responsive design with Tailwind CSS

Tech Stack

Backend:

• Node.js: JavaScript runtime environment
• Express.js: Web application framework for Node.js
• MongoDB: NoSQL database for storing user and chat data
• Mongoose: ODM library for MongoDB and Node.js
• Socket.IO: For real-time, bidirectional event-based communication
• JSON Web Tokens (JWT): For user authentication
• bcrypt: For password hashing
• dotenv: For managing environment variables
• cors: For enabling Cross-Origin Resource Sharing

Frontend:

• React.js: JavaScript library for building user interfaces
• React Router: For client-side routing
• Axios: Promise-based HTTP client for making API requests
• Socket.IO Client: To connect with the Socket.IO server
• Tailwind CSS: Utility-first CSS framework for styling
• Heroicons: SVG icons
• jwt-decode: For decoding JWTs on the client-side

Prerequisites

• Node.js (v14.x or later recommended)
• npm (Node Package Manager)
• MongoDB (local instance or a cloud-hosted solution like MongoDB Atlas)

Environment Variables

Create a .env file in the root directory of the project (i.e., at the same level as this README.md) and add the following environment variables. The backend server looks for this file in its parent directory (../.env).

# Backend Configuration
PORT=5001
MONGO_URI=mongodb://localhost:27017/chatapp # Replace with your MongoDB connection string
JWT_SECRET=your_strong_jwt_secret_key # Replace with a strong, random string

# Frontend Configuration (Used by backend for CORS and by frontend for API calls)
# Ensure this matches the URL where your React frontend will run
FRONTEND_URL=http://localhost:3000

# React App Specific (these are typically handled by Create React App but good to be aware)
# If you need to override the default API URL for the frontend, you can add this to a .env file in the frontend/ directory
# REACT_APP_API_URL=http://localhost:5001/api
# REACT_APP_SOCKET_URL=http://localhost:5001

Note on JWT_SECRET: This should be a long, random, and secret string. You can generate one using a password generator or a command like openssl rand -hex 32 in your terminal.

Installation

1. Clone the repository (if you haven't already):

   git clone <repository-url>
   cd <repository-folder>

2. Install Backend Dependencies: Navigate to the backend directory and install the dependencies.

   cd backend
   npm install

3. Install Frontend Dependencies: Navigate to the frontend directory and install the dependencies.

   cd ../frontend
   npm install

Running the Application

You'll need to run both the backend server and the frontend development server simultaneously in separate terminal windows.

1. Start the Backend Server: Navigate to the backend directory and run:

   # For development with nodemon (auto-restarts on file changes)
   npm run dev

   Or for production:

   npm start

   The backend server will typically start on the port specified in your .env file (e.g., http://localhost:5001).

2. Start the Frontend Development Server: Navigate to the frontend directory and run:

   npm start

   The React development server will usually start on http://localhost:3000 (or the port specified by FRONTEND_URL if configured for Create React App). Your browser should open automatically to this address.

Project Structure

.
├── .env                # Environment variables (create this file)
├── README.md           # This file
├── backend/
│   ├── package.json
│   ├── server.js       # Main backend server file, Socket.IO setup
│   ├── controllers/    # Request handlers (auth, user, chat, message logic)
│   ├── middleware/     # Custom middleware (e.g., authMiddleware)
│   ├── models/         # Mongoose schemas (User, Chat, Message)
│   └── routes/         # API route definitions
└── frontend/
    ├── package.json
    ├── public/
    │   └── index.html  # Main HTML file for React app
    └── src/
        ├── App.js          # Main React app component, routing setup
        ├── index.js        # Entry point for React app
        ├── index.css       # Global styles, Tailwind CSS imports
        ├── components/     # Reusable UI components (chat, auth, etc.)
        ├── context/        # React Context API (e.g., AuthContext)
        ├── pages/          # Top-level page components (LoginPage, ChatPage, etc.)
        └── reportWebVitals.js

Author

Siddharth Katyal

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

ISC (or specify your chosen license)