Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/mukulsomukesh/chat-application

This is a full-stack Chat Application built using React.js, Node.js, Express.js, MongoDB, Tailwind CSS, and Redux. It offers a user-friendly interface for real-time conversations, including features like sign up, sign in, logout, profile image customization, user search, one-to-one chat, group creation, group chat, group administration, and message
https://github.com/mukulsomukesh/chat-application

chat-application express-js mongodb-atlas node-js reactjs redux socket-io tailwind-css

Last synced: about 7 hours ago
JSON representation

This is a full-stack Chat Application built using React.js, Node.js, Express.js, MongoDB, Tailwind CSS, and Redux. It offers a user-friendly interface for real-time conversations, including features like sign up, sign in, logout, profile image customization, user search, one-to-one chat, group creation, group chat, group administration, and message

Awesome Lists containing this project

README

        

# Chat Application


Bluefly-Clone

Welcome to the Chat Application! This is a full-stack project built using React.js, Node.js, Express.js, MongoDB, Tailwind CSS, and Redux. The application provides an intuitive and user-friendly interface for users to engage in real-time conversations with others. It incorporates a range of features such as sign up, sign in, logout, profile image customization, user search, one-to-one chat, group creation, group chat, group administration, and message notifications.

## Features
- **User Authentication**: Users can sign up for an account, log in, and log out securely.
- **Profile Customization**: Users can personalize their profiles by changing their profile images.
- **User Search**: Users can search for other users to connect with.
- **One-to-One Chat**: Users can engage in real-time private conversations with each other.
- **Group Creation**: Users can create groups for collaborative discussions.
- **Group Chat**: Users can participate in group conversations, allowing multiple members to interact simultaneously.
- **Group Administration**: Administrators have the authority to rename groups and manage group membership by adding or removing users.
- **Message Notifications**: Users receive real-time notifications for new messages.

## Technologies Used
- **Front-end**: React.js, Redux, Tailwind CSS
- **Back-end**: Node.js, Express.js
- **Database**: MongoDB

## Screenshots
**Sign up**
![Sign up](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1689146231/lxipjhn3pdvkf5h6it98.png)

**Sign in**
![Sign In](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1689146246/pntbaaigxkup1puqgjwa.png)

**Home**
![home](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1689146043/p7obaxsyrz5l074jkyj7.png)

**Users Chat**
![home](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1689145934/ipqp3jb0qyb32nip6osj.png)

**User Profile**
![user_profile](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1689146213/wvyx7ndxisaxpkgopxnh.png)

**Search User**
![search_user](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1689146068/utilpiyhlxikhju36c7d.png)

**Notfication**
![notification](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1689146057/b85aapingyke67r41vvb.png)

**Create Group**
![create_group](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1689145950/afzfrs7dxuxij2z24vgy.png)

**Group Information**
![group_information](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1689145976/bd8wyctt2tw4ukgwuoht.png)

**Group Admin Options**
![group_admin_option](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1689146029/rbkuo9dgrym9y3ayymz4.png)

**Change Group Name Only For Admin**
![rename](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1689146017/da8y031jf7twpxlp2ipy.png)

**Remove User From Group Only For Admin**
![remove_user](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1689146005/ymitbkdkz2mlfvrb9gvl.png)

**Add Users To Group Only For Admin**
![Add_user](https://res.cloudinary.com/dfrhy6m3m/image/upload/v1690197588/lehnw0hfqfnxu8ktajys.png)

Backend Installation



  • clone repo

  • cd backend

  • npm install

  • node index.js

Frontend Installation



  • clone repo

  • cd frontend

  • npm install

  • npm start

Team Members



  • Mukul Jatav

Let's Connect




https://www.linkedin.com/in/mukul-jatav/

Show Your Support


Give a ⭐️ if you like this project!