Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/abdullah-moiz/mern-chat-app

A Chat Applicattion Help you communicate with each other privately as well as Create groups with your friends
https://github.com/abdullah-moiz/mern-chat-app

chat chat-application chatapp mern-chatapp mern-stack mongodb nodejs open-source open-source-project socket-io

Last synced: 13 days ago
JSON representation

A Chat Applicattion Help you communicate with each other privately as well as Create groups with your friends

Awesome Lists containing this project

README

        

###### Chat Application Using MERN STACK & SocketIO

- don't forget to leave a star ! :)

## Authors

- [Abdullah Moiz](https://www.github.com/Abdullah-moiz)
- [YassineAzedine](https://github.com/YassineAzedine)

## Features
- Login ✔
- Register ✔
- Private (1 v 1 Chat) ✔
- Detect Typing and display user name ✔
- group Chat ✔
- Add people to group ✔
- Remove people from group ✔
- online user Detection ✔
- Send Emoji ✔
- Dark & Light Mode ✔

#### Technologies

- React + vite
- Node js
- mongoDB
- socket.io
- redux toolkit


#### Environment Variables

To run this project, you will need to add the following environment variables to your .env file

`ConnectionUrl` = Your MongoDB Connection String
`JWT_SECREAT` = your secure secreat key

#### Screenshots

##### Login
![image](https://github.com/Abdullah-moiz/mern-chat-app/assets/90745903/9e700bc2-cf2b-477a-a744-7fe3273bc13e)

##### Register
![image](https://github.com/Abdullah-moiz/mern-chat-app/assets/90745903/8425d01c-06f1-4cbb-a254-8f7813c99dfb)

##### Main Page

![image](https://github.com/Abdullah-moiz/mern-chat-app/assets/90745903/b91ab8e3-12ae-45ba-8d0f-06a286f31278)

![image](https://github.com/Abdullah-moiz/mern-chat-app/assets/90745903/08eb8c71-35ae-4845-b57b-82a7b3d9e91c)

##### Groups

![image](https://github.com/Abdullah-moiz/mern-chat-app/assets/90745903/7bc9ae24-aa77-4602-a4e0-755356a86c03)

##### Create Groups

![image](https://github.com/Abdullah-moiz/mern-chat-app/assets/90745903/cb194d66-0c33-4114-905f-ec34caa62ade)

##### New Group Added

![image](https://github.com/Abdullah-moiz/mern-chat-app/assets/90745903/bff6d502-2486-4577-863a-ada3872fa748)

##### Admin Can Delete group

![image](https://github.com/Abdullah-moiz/mern-chat-app/assets/90745903/07b45b9d-9c95-4dcb-91eb-ca51f2d5f08b)

##### Delete Messages from ME

![image](https://github.com/Abdullah-moiz/mern-chat-app/assets/90745903/a4994dc0-dc74-4946-bcb5-84bd5f675d1e)

##### Typing Detection in both Group and One - One Chat

![image](https://github.com/Abdullah-moiz/mern-chat-app/assets/90745903/2facbf19-e6b3-4712-984a-3439d08a471c)

##### Search Groups / Search Users

![image](https://github.com/Abdullah-moiz/mern-chat-app/assets/90745903/b9ffb7f7-70d1-4fa8-b3f3-a6b945145b87)

##### Online User Detection

![image](https://github.com/Abdullah-moiz/mern-chat-app/assets/90745903/e5b6c919-9f6d-45f2-b0aa-de912eb52a41)