Yash's Chatapp

Yash's Chatapp

A real-time chat application built with the MERN stack and Socket.IO


View Demo · Report Bug · Request Feature

Table of Contents

• About the Project
  • Built With
• Features
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Demo Screenshots
• Contributing
• License
• Contact
• Acknowledgements

About The Project

SocketIO-MERN-ChatApp is a modern, real-time chat application built using the MERN (MongoDB, Express, React, Node.js) stack and Socket.IO. It allows users to communicate instantly. This is a project I made to just understand how to make and deploy fullstack applications. If you find any bugs feel free to approach me on any social media platform. I know the code is a bit messy 😅 but any feedback is welcome.

Please check it out and message me by following the instructions mentioned here : Usage

Built With

• MongoDB
• Express.js
• React.js
• Node.js
• Socket.IO
• Vite
• Firebase
• Google Gemini API

Features

• Real-time messaging with other users using Socket.IO
• User authentication with JWT
• Google OAuth 2.0 for signup / login
• Clean interface for chatting, with realtime sidebar updates and message updates
• Chat with Google Gemini API within the chat's interface
• Firebase integration for authenticating users ( login / signup )

Environment Variables

Required Variables

These are necessary for the basic functionality of the application:

• MONGODB_URI: Your MongoDB connection string
• JWT_SECRET: Secret key for JWT token generation
• VITE_GOOGLE_CLIENT_ID: Google OAuth client ID

Optional Features

The following variables enable additional features:

AI Chat Integration

• VITE_GEMINI_API: Google Gemini API key
  • When provided, enables AI chat functionality
  • The application will work without this, but AI chat features will be disabled

Firebase Authentication

The following variables enable Firebase authentication:

• VITE_FIREBASE_API
• VITE_FIREBASE_DOMAIN
• VITE_FIREBASE_PROJECT_ID
• VITE_FIREBASE_STORAGE_BUCKET
• VITE_FIREBASE_MESSAGING_SENDER_ID
• VITE_FIREBASE_APP_ID
• VITE_FIREBASE_MEASUREMENT_ID

If Firebase variables are not provided, the application will still work, but without the email/ password sign in.

Getting Started

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

Prerequisites

• npm

  npm install npm@latest -g

• MongoDB (Make sure you have MongoDB installed and running on your machine)
• Google Gemini API key
• Firebase project setup

Installation

1. Clone the repo

   git clone https://github.com/Yash456k/SocketIO-MERN-chatApp.git

2. Install NPM packages for both server and client

   cd SocketIO-MERN-chatApp
   npm install
   cd client
   npm install

3. Create .env files in both the root directory and the client directory. Add your environment variables:

   For the backend (root directory):

   PORT=4000
   MONGODB_URI=your_mongodb_uri
   JWT_SECRET=your_jwt_secret
   

   For the frontend (client directory):

   VITE_GEMINI_API=your_gemini_api_key
   VITE_FIREBASE_API=your_firebase_api_key
   VITE_FIREBASE_DOMAIN=your_firebase_domain
   VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
   VITE_FIREBASE_APP_ID=your_firebase_app_id
   VITE_FIREBASE_MEASUREMENT_ID=your_firebase_measurement_id
   

4. Start the development server

   npm run dev

Usage

Follow these steps to get started with the project:

1. Registration and Login

   • Visit the website.
   • Either register by creating a new account or use google OAuth to login via google ( recommended )

2. Adding a Contact

   • After logging in, you'll see your chat dashboard.
   • Look for the "Add / Find user" button.

• Enter the username "yash456k" or the email "yash456k@gmail.com" in the search field.
• Click on the search result to add me as a contact.

3. Starting a Conversation

   • From your contacts list, find and click on "yash456k" ( with the email "yash456k@gmail.com" ).
   • This will open the chat with me on the right side of the sidebar.
   • Type your message in the chat input field and press enter or click the send button.
   • You should see your message appear in the chat window in real-time.

4. Testing Real-Time Messaging

   • If I am online, you may receive a response. In the mean time you can test it out with google gemini.

5. Using the Gemini AI Interface

   • Look for a special chat option or button labeled "Gemini AI" or similar.
   • Click on this to start a conversation with the Gemini AI interface.
   
   

   

   • Type your questions or prompts as you would in a normal chat.
   • The Gemini AI will respond, demonstrating its capabilities.

Warning

Due to the gemini model being powered by the free tier provided in the API, you may not get a response sometimes. This is because of the message quota being exhausted.

Demo Screenshots

Contributing

Any contributions to this project are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License . See LICENSE for more information.

Contact

Contact me - Twitter - yash456k@gmail.com

Project Link: https://github.com/Yash456k/SocketIO-MERN-chatApp

Acknowledgements

Me - I made this shit brick by brick