Realtime Chat App

A real-time chat application whose style is heavily inspired by WhatsApp. Built using the MERN Stack (MongoDB, Express.js, React, Node.js) with Firebase for file storage and Socket.IO for instant messaging.

Warning

Messages sent in direct messages and group chats are not encrypted and are stored as plain text in the database. DO NOT share sensitive information, such as passwords, financial details, or any private data that you use in other applications or accounts. Use this chat app only for the purpose of previewing a demo application.

🚩 Live Demo

Current version running at: https://realtime-chat-app-one-topaz.vercel.app

Note

It may take up to 1 minute for the site to be brought up while the loading indicator is displayed, since free instances in Render will spin down with inactivity which can delay requests by 50 seconds or more.

✨ Features

• signing up & signing in
• setting up your profile info when signing in for the first time
• updating your profile info
• adding new friends to chat with by sending them friend requests
• approving or rejecting the received friend requests
• creating group messages
• real-time chatting with your friends in direct messages and groups
• sending images and other files in chats
• filtering your chats for displaying all chats, DMs or groups
• searching for a specific chat in direct messages and groups or a request in friend requests
• viewing the contact information, groups in common and files shared between you in your friends' profile
• viewing the creation date, members and files shared of the groups you are in

⚙ Setup

• create a .env file in the server folder

PORT=3001
JWT_KEY="YOUR_JWT_KEY"
ORIGIN="http://localhost:3000"
DATABASE_URL="YOUR_DATABASE_URL"
PEPPER_STRING="YOUR_PEPPER_STRING"

• create a .env file in the client folder

VITE_FIREBASE_API_KEY="YOUR_API_KEY"
VITE_FIREBASE_AUTH_DOMAIN="YOUR_AUTH_DOMAIN"
VITE_FIREBASE_PROJECT_ID="YOUR_PROJECT_ID"
VITE_FIREBASE_STORAGE_BUCKET="YOUR_STORAGE_BUCKET"
VITE_FIREBASE_MESSAGING_SENDER_ID="YOUR_MESSAGING_SENDER_ID"
VITE_FIREBASE_APP_ID="YOUR_APP_ID"
VITE_SERVER_URL="http://localhost:3001"

🏃‍♂️ Running in local development mode

• server

cd server
npm install
npm run dev

• client

cd client
npm install
npm run dev

open http://localhost:3000 with your browser to see the result.

📷 Screenshots

SIGNING UP & SIGNING IN:

SETTING UP YOUR PROFILE:

SENDING & VIEWING FRIEND REQUESTS:

DIRECT MESSAGING:

GROUP MESSAGING:

SEARCH FUNCTIONALITY:

UPDATING YOUR PROFILE:

VIEWING FRIEND & GROUP PROFILE: