https://github.com/moazam05/mern-chat-socket-io-app

Real-time chat application
https://github.com/moazam05/mern-chat-socket-io-app

cloudinary express formik material-ui mongodb nodejs reactjs reacttypescript redux-toolkit rtk-query socket-io

Last synced: 5 months ago
JSON representation

Real-time chat application

• Host: GitHub
• URL: https://github.com/moazam05/mern-chat-socket-io-app
• Owner: Moazam05
• Created: 2023-12-08T09:56:01.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-30T12:53:03.000Z (over 1 year ago)
• Last Synced: 2025-01-10T02:19:11.893Z (6 months ago)
• Topics: cloudinary, express, formik, material-ui, mongodb, nodejs, reactjs, reacttypescript, redux-toolkit, rtk-query, socket-io
• Language: TypeScript
• Homepage: https://mern-chat-app-g9i9.onrender.com
• Size: 313 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# MERN 📑 Chat App

Real-time chat application built with the MERN (MongoDB, Express.js, React, Node.js) stack, and for real-time communication, we used Scoket.io.

## Features

User Authentication

- Easily create an account with minimal information.

Friend Discovery

- Effortlessly find friends using the search bar.

- Initiate connections and expand your network.

Group Chat

- Users can create group chats for collaborative conversations.

- Receive real-time notifications for messages and updates within group chats.

- Admins have the authority to remove members from group chats for effective moderation.

Profile Update

- Easily updating your profile details.

## Tech Stack

**Client:** React, ReactTypeScript, Redux Toolkit, Material UI, Formik

**API Handlers:** RTK Query

**Server:** Node, Express

**Database:** Mongo DB

**Cloudinary:** For Image Uploading

**Real Time Communication:** Socket.io

## Screenshots

![signup](https://i.postimg.cc/90wQDG7b/Sign-Up.png)

![Sign in](https://i.postimg.cc/05hpcnc8/Login.png)

![Profile](https://i.postimg.cc/vZbxNN9d/Profile.png)

![Chat 1](https://i.postimg.cc/Cxc56LSj/Chat-1.png)

![Chat 2](https://i.postimg.cc/yNnmjzr5/Chat-2.png)

![Notification](https://i.postimg.cc/C17fYHVQ/notification.png)

![Group chat](https://i.postimg.cc/0QMCyBcB/Group-Chat.png)

![Group chat 2](https://i.postimg.cc/KvNtxbmY/Update-Group-Chat.png)

![Group Chat 3](https://i.postimg.cc/wMBRByqT/group.png)

## Environment Variables

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

### Backend ###

```bash

 NODE_ENV:  development

 PORT:      5000

 DATABASE:  Insert your MongoDB database connection link

 CLOUDINARY_CLOUD_NAME: 

 CLOUDINARY_API_KEY:

 CLOUDINARY_API_SECRET: 

```

### Frontend ###

```bash

 REACT_APP_API_URL:  'http://127.0.0.1:5000/api/v1/'

```