🌐 Live at: https://live-chat-bde08.firebaseapp.com.

Real Time Web Messaging Application

Technologies used: React TS, Firebase and Tailwind CSS.

Features

Real time - Messages are updated in real time for everybody.
Users authentication - Users need to sign in. Auth state is managed in the context of the whole app.
Concurrent accounts - Application handles any number of concurrent accounts.
Multiple categories - Each user may write different messages in each.
Messages deletion - Users may delete their own messages.
Mail any sender - Clicking on a user's name starts the action of sending him a mail through G-Mail.
Nice to have - Search categories bar, clear text button, auto scroll buttons.
Custom pages - Custom Loading, Error and NotFound pages.

Dark theme - Users may choose between light and dark theme. Choice is remembered between sessions.

Mobile ready - Fully responsive UI which works well on any device.

Back-end's security

I'm using Firebase for user's authentication, data storage(Firestore - NoSQL DB), and deployment.
Firestore provides rules for accessing the data and I've configured it as follows:

• No data may be accessed by an unauthenticated user.
• Categories are read-only for all authenticated users. Only the admin may configure them.
• Messages may be created and deleted only by the specific authenticated user who requested that(meaning, an authenticated user is not capable to create or delete messages in the name of others). Messages may be read by all authenticated users.
  

Tailwind, Dark Mode, CSS Selectors and Custom Scroll Bar

• Tailwind's layers were extended such as to have a small color palette and some base styling.
• Dark mode is handled with a combination of Tailwind and CSS variables with values set by CSS selectors.
• A fancy scroll bar was configured for webkit using -webkit-scrollbar.

Automatic CI/CD on GitHub

• Any push and merged pull request into the main branch will automatically trigger an action on GitHub which updates the deployed application at Firebase.