/MeChat

A web based chat application made using MERN stack

Primary LanguageJavaScript

MeChat

A web-based chat application built using the MERN stack.

ChatApp is a real-time chat application that enables users to log in using their Google credentials and communicate with other users in real-time. It provides a seamless chatting experience with features like user authentication, online status indicators, and message history. It was created with WhatsApp by Meta as inspiration.

Features

  • Google OAuth Login: Users can quickly log in using their Google accounts, ensuring a secure and easy authentication process.

  • Real-Time Messaging: Chat with other users in real-time, with instant message delivery.

  • Image Sharing: Share images with other users to enhance your conversations.

  • Online Status: See who's online and active with online status indicators next to user profiles.

  • Message History: Access your chat history to review previous conversations.

  • User Profiles: View user profiles, including their name and profile picture.

  • User Search: Find other users by searching for their usernames.

Future Plans and Scope

MeChat is continuously evolving. Here are some future plans and scopes for the application:

  • Voice Messages: I am working on implementing the ability for users to send voice messages, adding a new dimension to your conversations.

  • Group Chats: In the future, users will be able to create and participate in group chats, allowing for more collaborative and community-based communication.

  • Additional Features: I am actively exploring and developing more features like message reactions, video calls, and more to make ChatApp even more versatile.

Installation

  1. For running the app on localhost Clone the repository: git clone https://github.com/code-inhub/MeChat

  2. Navigate to the project directory: cd client_server

  3. There you will find three files named client, server, socket.

  4. Install all the dependencies for client, server, and socket and run them using npm start.

Deployment

To deploy the project, you can use the following steps:

  1. Deploy the frontend of the application from Frontend Repository.

  2. Deploy the backend of the application from Backend Repository.

  3. Deploy the socketIO of the application from socketIO Repository.

  4. Set up environmental variables for both the frontend and backend, including Google OAuth credentials.

  5. Integrate all the three Deployments and access the deployed frontend to start using the ChatApp.

Screenshots

  1. Login with Google OAuth:

    Screenshot 1

    Screenshot 2

  2. Chat Interface:

    Screenshot 3

  3. User Profile:

    Screenshot 4

  4. Message History:

    Screenshot 5

  5. Online Status Indicators(at the top-middle):

    Online Status