Introduction

Chatvia is a featured premium chat app in ReactJs with Redux/Hooks and for authentication we used Redux Redux Saga with Firebase/Fack-backend authentication and developer-friendly codes. We have managed the chat with json object with all details of chat, image, emoji and files.
Note: You need to fill firebase credentials in .env file if you would like to use firebase authentication.

Firebase

Set REACT_APP_DEFAULTAUTH=firebase in the .env file.
Also fill all credentials of firebase in the .env file.
Remove the fack-backend setup code from the App.js
Now just uncomment the below firebase setup code in the App.js file.

// Import Firebase Configuration file
import { initFirebaseBackend } from "./helpers/firebase_helper";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_APIKEY,
    authDomain: process.env.REACT_APP_AUTHDOMAIN,
    databaseURL: process.env.REACT_APP_DATABASEURL,
    projectId: process.env.REACT_APP_PROJECTID,
    storageBucket: process.env.REACT_APP_STORAGEBUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
    appId: process.env.REACT_APP_APPID,
    measurementId: process.env.REACT_APP_MEASUREMENTID,
};

// init firebase backend
initFirebaseBackend(firebaseConfig);

Fack-Backend

Set REACT_APP_DEFAULTAUTH=fackbackend in the .env file.
Remove the firebase setup code from the App.js
Now just uncomment the below fack-backend setup code in the App.js file.

import fakeBackend from './helpers/AuthType/fakeBackend';
// Activating fake backend
fakeBackend();

i18n Language translation settings

How to add new language? Let add French language in the existing language.

1. Create a new folder "fr" in the "src/locales/".
2. Create a new file src/locales/fr/translation.json. You can check the other languages translation file and update same formats in this file.
3. update the below code in the src/i18n.js file
   

       import translationFr from './locales/fr/translation.json';
               
       const resources = {
           fr: {
               translation: translationFr
           }
       }; 
   

4. Now add the new option of French language in the sidebar language dropdown menu src/layouts/AuthLayout/LeftSidebarMenu.js
5. How to use i18n?
   • In Hook base components
     Import i18n frst and intilize t variable for multi language implementation like below.

         import { useTranslation } from 'react-i18next';
         const { t } = useTranslation();

   • In class base component
     Import i18n frst and intilize t variable for multi language implementation like below.

         import { useTranslation } from 'react-i18next';
         const { t } = useTranslation();

     export your component with withTranslation();
6. You must have to write all text like {this.props.t('Search_keyword')} to make it working with all languages. Also make sure to add new words in all other language files src/locales/{language}/translation.json.
7. To change default language to german? update below code in the src/i18n.js file
   

   i18n
   .use(detector)
   .use(reactI18nextModule) // passes i18n down to react-i18next
   .init({
       resources,
       lng: "gr",
       fallbackLng: "gr", // use en if detected lng is not available
   
       keySeparator: false, // we do not use keys in form messages.welcome
   
       interpolation: {
           escapeValue: false // react already safes from xss
       }
   });
   

Prerequisites

Please follow below steps to install and setup all prerequisites:

• Yarn

  Make sure to have the Yarn installed & running in your computer. If you already have installed Yarn on your computer, you can skip this step. We suggest you to use Yarn instead of NPM.

• Nodejs

  Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 20.

• Git

  Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.