Introduction

Minible is a fully featured premium admin dashboard template in ReactJs and Firebase/fake-backend with Google and Facebook authentication and developer-friendly codes.
Note: You need to fill firebase credentials in .env file and for Social ( Google / Facebook ) credentials in the src/config.js 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();

Social Authentication

Set the social credentials in the src/config.js file and also check code in src/pages/Authentication/Login.js file.

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.