https://github.com/atilmohamine/chat-app
A real-time chat application built with Express.js, Socket.io, React, MongoDB, and JWT authentication.
https://github.com/atilmohamine/chat-app
chat jwt jwt-authentication mern react real-time socket-io
Last synced: 10 months ago
JSON representation
A real-time chat application built with Express.js, Socket.io, React, MongoDB, and JWT authentication.
- Host: GitHub
- URL: https://github.com/atilmohamine/chat-app
- Owner: AtilMohAmine
- License: gpl-3.0
- Created: 2024-01-12T14:52:48.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-19T17:26:45.000Z (almost 2 years ago)
- Last Synced: 2024-02-19T19:17:27.418Z (almost 2 years ago)
- Topics: chat, jwt, jwt-authentication, mern, react, real-time, socket-io
- Language: JavaScript
- Homepage: https://chat-app-fj7r.onrender.com/
- Size: 979 KB
- Stars: 16
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
$ git clone https://github.com/AtilMohAmine/Chat-App.git
```
Navigate to the project directory:
```bach
$ cd chat-app
```
Install dependencies for both the server and client:
```bach
$ 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:
```env
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:
```env
REACT_APP_SERVER_URL=your_server_url
```
### Editing allowedOrigins.js
In the server/config directory, edit the `allowedOrigins.js` file:
```javascript
// 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 and .
### 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:
```javascript
// 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:
```bach
# 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)
```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)
```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:
```bash
$ 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
```bash
$ docker run -d -p 3001:3001 --name chat-server chat-server
```
Client Container
```bash
$ 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:
```env
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:
```bash
$ 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](https://github.com/AtilMohAmine/Chat-App/blob/main/LICENSE) file for details.