Introduction

Veltrix is a fully featured premium admin dashboard template in ReactJs with Redux/Hooks and Redux Redux Saga with Firebase/fake-backend and developer-friendly codes.
Note: You need to fill firebase credentials in .env file.

Firebase

Set REACT_APP_DEFAULTAUTH=firebase in the .env file.
Also fill all the firebase credentials in the .env file.
Remove the fake-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);

Fake-Backend

Set REACT_APP_DEFAULTAUTH=fakebackend in the .env file.
Remove the firebase setup code from the App.js file.
Now just uncomment the below fake-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 file src/locales/fr/translation.json
2. update the below code in the src/i18n.js file
   

       import translationGr from './locales/gr/translation.json';
                   
                       const resources = {
                           gr: {
                           translation: translationGr
                           }
                       }; 
                       

3. Now add the new option of French language in the topbar language dropdown menu src/components/CommonForBoth/TopbarDropdown/LanguageDropdown.js
4. 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.
5. 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:

• 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 10.

• 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.