ChattingPro 👇👇👇

Live Demo:- Coming Soon...........

The Socket Chat Application is a real-time messaging platform designed to provide seamless communication between users. This application leverages socket programming for instant message delivery and ensures a smooth user experience with an intuitive and visually appealing user interface.

Features

• User Registration and Authentication
• User List
• Chatting
• Audio Calling
• Video Calling
• Reply to Messages
• Delete Messages
• User Interface

Demo

Home Chat

Emogi Expression:-

Video

VideoCalling.webm

videochat.webm

Acknowledgements

• Nodejs
• Reactjs
• Socket-io

I would like to express my gratitude to the open-source community and the developers who contributed to the technologies used in this project: Node.js, React.js, Socket.IO, MySQL, Sequelize, and Tailwind CSS.

Appendix

• Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine.

• React.js: A JavaScript library for building user interfaces.

• Socket.IO: A library for real-time web applications.

• MySQL: A relational database management system.

• Sequelize: A promise-based Node.js ORM for MySQL.

• Tailwind CSS: A utility-first CSS framework.

Documentation

User Registration and Authentication

Registration: New users can register by providing their email, username, and password.
Login: Registered users can log in using their credentials.
Authentication: Secure authentication mechanisms to protect user data.

User List

Active Users: Display a list of users who are currently online.
User Status: Show the online/offline status of users.
Search: Ability to search for specific users in the user list.

Chatting

Direct Messaging: Users can send direct messages to each other.
Real-Time Updates: Messages are delivered and displayed in real-time using socket connections.
Typing Indicators: Show when a user is typing a message.

Reply to Messages

Message Threads: Users can reply to specific messages, creating a thread for easy conversation tracking.

Delete Messages

Message Deletion: Users can delete their own messages.

Audio Calling

Initiate and receive audio calls with other users.

Video Calling

Initiate and receive video calls with other users.

User Interface

Intuitive Design: A user-friendly interface with easy navigation.

Responsive Layout:

Optimized for various devices, including desktops, tablets, and smartphones.
Customizable Themes: Users can choose from different themes to personalize their chat experience.

FAQ

What is Socket Chat Application?

The Socket Chat Application is a real-time messaging platform that allows users to communicate seamlessly through text, audio, and video messages.

Which technologies are used in Socket Chat Application?

The application is built using Node.js, React.js, Socket.IO, MySQL, Sequelize, Tailwind CSS, HTML, and CSS.

How do I register and authenticate in the application?

Users can register by providing necessary details on the registration page and authenticate using their credentials on the login page.

Can I delete messages after sending them?

Yes, users can delete their messages even after they have been sent.

How do I reply to a specific message?

Users can reply to a specific message by clicking the reply button next to the message.

Is there a feature to make audio and video calls?

Yes, the application supports both audio and video calling between users.

Installation

Install my-project with npm

  git clone https://github.com/armanali0786/SocketChatApp.git

Navigate to the project directory:

cd socket-chat-app

Install server-side dependencies:

cd server
npm install

Install client-side dependencies:

cd client
npm install

Run Locally

Navigate to the server directory:

cd server

Go to the project Start the server:

npm start

nodemon index.js

Navigate to the client directory:

  cd client

Start the client

  npm start

Deployment

To deploy this project run

  npm run build

After generating build you need to upload on netlify to get updated web application.

Authors

🎓 I have completed my Bachelor's in Information Technology in 2023.

🎓 I am having 1+ years of Experience in MERN Stack Development..

🌱 I’m currently learning Data Structures and Algorithms.

👯 I’m looking to collaborate on OpenSource Projects