Skip to content

This is a chat app which is made using MERN stack technology and socket io

License

Notifications You must be signed in to change notification settings

Avijit200318/Chat-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ChatPlus

Live Link: https://mern-chatplus.onrender.com

License

image

Overview

ChatPlus is a real-time chat application built using the MERN stack (MongoDB, Express.js, React, Node.js) and Socket.io. This platform enables users to communicate with each other seamlessly through instant messaging. In addition to text messages, ChatPlus supports the sharing of various file types, including PDFs, images, PowerPoint presentations (PPT), and Word documents, making it a versatile tool for both casual conversations and professional collaborations.

Table of Contents

Features

  • Real-Time Messaging: Experience instantaneous communication with other users, powered by Socket.io for real-time updates and smooth interactions.

  • File Sharing: Easily share a variety of file types, including PDFs, images, PowerPoint presentations (PPT), and Word documents, directly within the chat.

  • User Authentication: Secure user login and registration system to protect user data and ensure a personalized experience.

  • Search Functionality: Quickly find messages and files within the chat using the built-in search feature.

  • Responsive Design: A clean, intuitive, and responsive user interface built with React, providing a seamless experience across all devices.

  • Typing Indicators: See when other users are typing a message, adding to the real-time communication experience.

  • PWA: Added PWA(Progressive Web App) functionality so anyone can install the website like a normal mobile application.

    image

Technologies Used

  • MERN Stack: Leveraging MongoDB for database management, Express.js for server-side development, React for frontend UI, and Node.js for backend operations.

  • Firebase: Utilizing Firebase for user authentication and storage ensuring a secure and reliable infrastructure.

  • Redux Toolkit: Managing application state efficiently with Redux Toolkit, ensuring a smooth and consistent user experience.

  • Tailwind CSS: Styling the frontend interface with Tailwind CSS, providing a modern and responsive design.

  • Socket Io: Enables real-time, bidirectional communication between clients and servers, ensuring instant message delivery and live updates.

Usage

ChatPlus offers a straightforward and enjoyable experience for communicating and sharing files with others. Follow these steps to make the most out of your chat experience:

  1. Sign Up / Log In:

    • Begin by navigating to the ChatPlus homepage.
    • Create a new account by signing up with your email and password, or log in using your existing credentials.
  2. Set Up Your Profile:

    • Customize your user profile by adding a profile picture and updating your personal information.
    • This helps other users recognize you in conversations.
  3. Start a Chat:

    • Navigate to the chat interface.
    • Start a new conversation by selecting an existing contact or searching for a user by their username or email.
  4. Send Messages:

    • Type your message in the chat input box and hit enter to send it.
    • Use emojis to add expressions and reactions to your messages.
  5. Share Files:

    • Click on the file attachment icon in the chat interface.
    • Select the type of file you want to share (PDF, image, PPT, or Word document) and upload it from your device.
    • The file will be sent and shared within the chat for all participants to access.
  6. Search and History:

    • Use the search functionality to quickly find past messages or files shared in the chat.
  7. Real-Time Communication:

    • Enjoy real-time messaging with instant delivery and updates, thanks to Socket.io integration.
    • See typing indicators and read receipts to know when other users are typing or have read your messages.
  8. Responsive Design:

    • ChatPlus is designed to be fully responsive, ensuring a seamless experience across devices, from desktops to mobile phones.

Contributing

We welcome contributions from the community! Whether you're reporting a bug, submitting a feature request, or contributing code, your input is highly valued.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Releases

No releases published

Packages

No packages published

Languages