W-Chat: Real-time Chat Application

W-Chat is a full-stack, real-time chat application that allows users to sign in with their Google account, engage in one-on-one conversations, and create group chats. It features a modern, intuitive interface and persistent message history.

About The Project

This project is a dynamic and interactive chat application built with modern web technologies. It leverages Google OAuth for secure authentication, Socket.IO for real-time communication, and MongoDB for persistent data storage, providing a seamless and engaging user experience.

Built With

• Frontend:
  • React
  • TypeScript
  • Tailwind CSS
• Backend:
  • Node.js
  • Express
  • Socket.IO
• Database:
  • MongoDB
• Authentication:
  • Google OAuth

---

Features

• Secure Authentication: Users can easily and securely log in with their Google accounts.
• Sleek User Interface: A clean and intuitive UI for a seamless chatting experience.
• One-on-One & Group Chat: Engage in private, real-time conversations with other users or create group chats with multiple members.
• Start New Chats: Initiate a new conversation with any registered user by searching for their email address.
• Create New Groups: Easily create new groups, give them a name, and add members from the user list.
• Real-time Typing Indicators: See when a user is typing a message in both one-on-one and group chats, enhancing the real-time feel of the conversation.
• User & Group Information: View details about a specific user or see the member list and information for a group chat.

  User Information	Group Information

---

Project Structure

The project is organized into a client (frontend) and server (backend) directory. Images for the README are stored in client/img.

.
├── client
│   ├── ... (client files)
├── server
│   └── ... (server files)
└── README.md

---

Getting Started

To get a local copy up and running, follow these simple steps.

Prerequisites

Ensure you have the following installed on your local development machine:

• Node.js and npm (Node Package Manager)
• MongoDB (or a connection to a MongoDB Atlas cluster)
• A Google Cloud Platform project with OAuth 2.0 credentials (client ID and client secret)

Installation

1. Clone the repository

   git clone https://github.com/BasantaParajuli22/w-chat
   cd chat-app

2. Install backend dependencies

   cd server
   npm install

3. Install frontend dependencies

   cd ../client
   npm install

4. Set up environment variables

   • In the server directory, create a .env file and add the following:

     MONGO_URI=your_mongodb_connection_string
     GOOGLE_CLIENT_ID=your_google_client_id
     GOOGLE_CLIENT_SECRET=your_google_client_secret
     JWT_SECRET=a_strong_secret_for_your_jwt

   • In the client directory, create a .env file and add your Google Client ID:

     VITE_GOOGLE_CLIENT_ID=your_google_client_id

Running the Application

1. Start the backend server From the server directory, run:

   npm start

2. Start the frontend client In a separate terminal, from the client directory, run:

   npm run dev

Your application should now be running. Open your browser and navigate to the local address provided by the Vite development server (usually http://localhost:5173).

---

How to Use

1. Login: Click the login button and sign in with your Google account.
2. Select a Conversation: Once logged in, you will see a list of your existing one-on-one and group chats in the sidebar.
3. Start a New Chat: Click on "Add New" to search for a user by their email and start a new conversation.
4. Create a New Group: Click on "Create Group" to open a modal where you can name the group and add members.
5. Start Chatting: Click on any user or group to open the chat window and begin messaging. Your conversations will be saved and can be continued at any time.