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: chatter-zeyu-li.vercel.app

Demo

Login screen ^^

Chat Screen ^^

Packages

• react
• react-router-dom
• react-bootstrap
• bootstrap
• react-icons
• react-google-recaptcha-v3
• firebase

Firebase

Firestore properties for user:

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;
    }
  }
}