Code Monkey home page Code Monkey logo

real-time-web-messaging-using-react-ts-firebase-and-tailwind-css's Introduction

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.

real-time-web-messaging-using-react-ts-firebase-and-tailwind-css's People

Contributors

danutgavrus avatar

Watchers

 avatar  avatar

Forkers

kalikex1

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.