Skip to content

furqonat/react-firebase-chat

Repository files navigation

React Chat App with Firebase

This is a simple chat app built with React and Firebase. It uses Firebase's Firestore database to store messages and users. It also uses Firebase's authentication to allow users to sign in with their Google accounts and anonymously.

Artwork

Welcome page

Features

  • Sign in with Google
  • Sign in anonymously
  • Send messages
  • See who is online
  • Send a emoji
  • Send a location

Getting Started

  1. Clone the repository
git clone 
  1. Install dependencies
yarn install
  1. Create a Firebase project
  • Go to Firebase and create a new project
  • Go to the project settings and copy the config object
  • Copy credentials from the Firebase SDK snippet into .env file and look at file vite-env.d.ts for more information
  • Go to the Authentication section and enable Google sign-in method and Anonymous sign-in method
  • Go to the Firestore section and create a new database
  • Go to the Rules tab and change the rules to the following:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
        allow read: if true;
        allow read, write, update, delete: if request.auth.uid != null;
    }
  }
}
  1. Run the app
yarn dev

Deploying

  1. Install firebase-tools
npm install -g firebase-tools
  1. Login to Firebase
firebase login
  1. Initialize Firebase
firebase init
  1. Select Hosting and use the default options

  2. Build the app

yarn build
  1. Deploy the app
firebase deploy

License

GNU General Public License v3.0

Credits

Image by katemangostar on Freepik

Image by Freepik