Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/seljukat/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.
https://github.com/seljukat/realtime-chat-app
firebase-storage mern-stack realtime-chat-app realtime-chat-webapp socket-io whatsapp-clone
Last synced: 9 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/seljukat/realtime-chat-app
- Owner: seljukat
- Created: 2024-10-23T18:07:05.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-12-24T14:52:55.000Z (about 1 month ago)
- Last Synced: 2024-12-24T15:46:43.243Z (about 1 month ago)
- Topics: firebase-storage, mern-stack, realtime-chat-app, realtime-chat-webapp, socket-io, whatsapp-clone
- Language: JavaScript
- Homepage: https://realtime-chat-app-one-topaz.vercel.app
- Size: 218 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 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](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`
```bash
cd server
npm install
npm run dev
```
- `client`
```bash
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:`
