Chat Room

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

Chat Room



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

Technologies

• 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.