https://github.com/zeyu-li/chatter

A realtime React-Firebase/Firestore online chat room app 📢
https://github.com/zeyu-li/chatter

bootstrap chatter firebase react realtime-messaging

Last synced: 2 months ago
JSON representation

A realtime React-Firebase/Firestore online chat room app 📢

• Host: GitHub
• URL: https://github.com/zeyu-li/chatter
• Owner: Zeyu-Li
• Created: 2021-02-16T16:26:35.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2021-11-18T17:31:13.000Z (over 4 years ago)
• Last Synced: 2026-01-03T16:33:15.194Z (5 months ago)
• Topics: bootstrap, chatter, firebase, react, realtime-messaging
• Language: JavaScript
• Homepage: https://chatter.andrewli.site/
• Size: 8.16 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Chatter

![logo](public/img/logo.png)

![Vercel](https://vercelbadge.vercel.app/api/Zeyu-Li/chatter)

A realtime chatting app built on React-Firebase/Firestore that allows you to chat via text with other users.

See the live demo [here:](https://chatter-zeyu-li.vercel.app/) [chatter-zeyu-li.vercel.app](https://chatter-zeyu-li.vercel.app/)

## Demo

![demo](img/demo.gif)

![demo2](img/demo2.gif)

![login_page](img/new_login.png)

Login screen ^^

![chat2](img/chat2.png)

Chat Screen ^^

## Packages

* [react](https://reactjs.org/)

* [react-router-dom](https://reactrouter.com/web/guides/quick-start)

* [react-bootstrap](https://react-bootstrap.github.io/)

* [bootstrap](https://getbootstrap.com/)

* [react-icons](https://www.npmjs.com/package/react-icons)

* [react-google-recaptcha-v3](https://www.npmjs.com/package/react-google-recaptcha-v3)

* firebase

## Firebase

Firestore properties for user:

```firebase

rules_version = '2';

service cloud.firestore {

  match /databases/{database}/documents {

    match /{document=**} {

      allow write: if false;

      allow read: if request.auth.uid != null;

    }

    

    // allow user to change own data 

    match /user/{userId} {

    	allow write: if request.auth.uid == userId;

    }

  }

}

```