Chat App

A real-time chat application built with Express.js, Socket.io, React, MongoDB, and JWT authentication.

Features

• Real-time Chat Functionality: Real-time chat functionality using Socket.io for bidirectional communication.
• User Authentication using JWT: Secure user authentication using JWT (JSON Web Tokens).
• Responsive and Intuitive User Interface: The application features a responsive design, ensuring a seamless user experience on various devices, including desktops, tablets, and mobile phones.
• Creating and Joining Rooms: Users can create new chat rooms or join existing ones, allowing for organized and topic-specific conversations.
• Guest User Access with Limited Privileges: Guest users can access the chat with limited privileges, such as being unable to create rooms.
• Allowed File Types for Messages: Support for sharing images and files in the chat.

Architecture Diagram

Below is the architecture diagram illustrating the components and flow of the Chat App:

Getting Started

Installation

Clone the repository:

$ git clone https://github.com/AtilMohAmine/Chat-App.git

Navigate to the project directory:

$ cd chat-app

Install dependencies for both the server and client:

$ cd chat-app/server
$ npm install

$ cd ../client
$ npm install

Configuration

Configuring Environment Variables

Create a .env file in the server directory and set the following environment variables:

PORT=your_port
DATABASE_URI=your_database_uri
ACCESS_TOKEN_SECRET=your_access_token_secret
REFRESH_TOKEN_SECRET=your_refresh_token_secret

Adjust the values according to your preferences.

Create a .env file in the client directory and set the following environment variable:

REACT_APP_SERVER_URL=your_server_url

Editing allowedOrigins.js

In the server/config directory, edit the allowedOrigins.js file:

// server/config/allowedOrigins.js

const allowedOrigins = [
    'https://www.yoursite.com',
    'http://localhost:3000'
];

export default allowedOrigins;

This configuration indicates that your server will allow requests from https://www.yoursite.com and http://localhost:3000.

Editing allowedFileTypes.js

The allowedFileTypes.js configuration is specifying which types of files accepted for sending in messages and uploading profile pictures within your chat application.

In the server/config directory, Modify the content of allowedFileTypes.js to specify the types of files that are allowed. For example, you might have:

// server/config/allowedFileTypes.js

const allowedFileTypes = {
    messages: [
        'image/jpeg',
        'image/jpg',
        'image/png',
        'application/pdf',
    ],
    profilePictures: [
        'image/jpeg',
        'image/jpg',
        'image/png',
    ],
};

export default allowedFileTypes

This configuration provides a structured approach, allowing you to define specific file types for messages and profile pictures. Adjust the file types based on your application's requirements.

Why These Configurations Matter

These configurations are essential for security and access control. The allowedFileTypes configuration determines which types of files are accepted by your server, and the allowedOrigins configuration restricts requests to your server from specific domains. Adjust these configurations based on your project's requirements and security policies.

Usage

Start the server and client:

# In the server directory
$ npm start

# In the client directory
$ npm start

This will run the server on the specified port and the client on its respective port.

Using Docker

Configuring Environment Variables

Before building the Docker images, make sure to configure the environment variables in the Dockerfiles according to your requirements.

Server Dockerfile (server/Dockerfile)

...

# Set environment variables
ENV PORT=your_port \
    DATABASE_URI=your_database_uri \
    ACCESS_TOKEN_SECRET=your_access_token_secret \
    REFRESH_TOKEN_SECRET=your_refresh_token_secret

...

Client Dockerfile (client/Dockerfile)

...

# Set environment variables
ENV REACT_APP_SERVER_URL=your_server_url

...

Building Docker Images

To build Docker images for both the server and client applications, navigate to the respective directories (server and client) and run:

$ docker build -t chat-server ./server
$ docker build -t chat-client ./client

Replace chat-server and chat-client with your desired image names.

Running Docker Containers

After building the Docker images, you can run Docker containers for the server and client applications using the following commands:

Server Container

$ docker run -d -p 3001:3001 --name chat-server chat-server

Client Container

$ docker run -d -p 3000:3000 --name chat-client chat-client

Replace chat-server and chat-client with your image names, and adjust the port mappings (-p) as needed.

The syntax for the -p option is -p HOST_PORT:CONTAINER_PORT.

• HOST_PORT: This is the port on your host machine (the machine running Docker) that you want to map to.
• CONTAINER_PORT: This is the port inside the Docker container that you want to expose.

Accessing Your App

Once the containers are running, you can access your application at the following URLs:

• Server: http://localhost:3001
• Client: http://localhost:3000

Docker Compose

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

DB_USER=your_mongodb_username
DB_PASSWORD=your_mongodb_password
DB_NAME=your_mongodb_database_name

Run the following command to start the services defined in the docker-compose.yml file:

$ docker-compose up -d

Once the services are up and running, you can access the chat application at http://localhost:3000 in your web browser.

Screenshots

Here are some screenshots showcasing the Chat App:

License

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