/firechat

Firebase + React chat application

Primary LanguageJavaScriptMIT LicenseMIT

Firechat

A chat app built with React 18 and Firebase

This project was built with the objective of being documented and taught in a video on Youtube

FIRECHAT Tutorial

The idea came after watch and built the application on this video, from the youtube channel Fireship.

Fireship video

So I decided to make a version with multiple rooms.

Setup

Follow the instruction to setup firebase on a js project

The config will live on an untracked file src/firebase/firebaseConfig.js with this code on it.

const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
  measurementId: ''
};

const defaultRoomConfig = {
  key: '',
  photoURL: '' // Url pointing to the photo uploaded on firebase storage, it will be the default photo fow new chats
}

export { firebaseConfig, defaultRoomConfig };

For this projects, the following services will be used, so enable them on firebase console:

  • Realtime Database: Chosen based on the firebase recommendation for the needs of this project. Database schema example

    {
  "chats": {
    "${chatUid}": {
      "lastMessage": "string",
      "name": "string",
      "photoURL": "string"
    }
  },
  "members": {
    "${chatUid}": {
      "${userUid}": true
    }
  },
  "messages": {
    "${chatUid}": {
      "${messageUid}": {
        "createdAt": "int (timestamp)",
        "message": "string",
        "senderUid": "string"
      }
    }
  },
  "users": {
    "${userUid}": {
      "chats": {
        "${chatUid}": true
      },
      "name": "string",
      "photoURL": "string"
    }
  }
}

  • Authentication ( Google auth )

  • Storage: To save user and groups profile images

Deploy

Made with firebase hosting following the vite instruction.

Tutorial

RESOURCES