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

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

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

• React Best Practices
• Figma Project
• Russo One Font
  • The font link was added in index.html, in order to be used through multiples css files.
• SVG icons
• UI Style guide
• Convert HEX color to CSS filter
• EsLint + Prettier setup