Chat Room

This Chat application is currently active and used by many people on the Internet. 🤩

Chat Application full-stack chat application built with React, Firebase, and RSuite.

Features:

Sign in with Facebook and Google

Link your social media accounts and create one account

Upload/edit images to their profile

Cache user avatar images for 3 days

Edit their nickname through the use of reusable and editable input component

Update user nickname concurrently inside firebase storage

Create a new chat room

Like messages

Set online/offline status

See messages

Send new messages

Send files to chat rooms

Send audio files and play audio files

See room information

Role-based permissions, admin can edit room information

Broadcast message to send notifications to other members

Notifications for subscribing or unsubscribing from notifications

Only the admin user of the room can edit the room information and the admin can grant permission to another user

Chats are grouped by dates

Pagination and scroll to the bottom of the page when the user types a new message

REACT SUITE UI LIBRARY and SASS

React Context API withuseContexthook to get the username for sign-in and registration

Firebase Realtime database to store profiles, rooms, the status of the user(online/offline), and messages

Firebase Authentication with Facebook and Google

Firebase Storage to store profile avatar image, chat images, and audio

useRefhook to access Canvas element for an avatar image

Firebase Cloud Functions to add real-time data and send notifications to the user

FCM cloud functionsSend messages to multiple devices

Service Workerto get a background notification, even if the app is offline, users can get notifications.

use-context-selectorhook

Build presence in CLoud Firestore

useHoverhook

User avatar made with React avatar editor

react-mic for recording audio from a user's microphone

Link to the project website.

Link to GitHub code.