Introduction

Minia is a fully featured premium admin dashboard template in ReactJs with Redux Hooks With Typescript with Firebase/fake-backend with Google and Facebook authentication and developer-friendly codes.
Note: You need to fill firebase credentials and Social ( Google / Facebook ) credentials in the .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.tsx
Now just uncomment the below firebase setup code in the App.tsx file.

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

//api config
// import config from "./config";

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(config["firebase"]);

Fake-Backend

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

import fakeBackend from "./helpers/AuthType/fakeBackend"

// Activating fake backend
fakeBackend();

Social Authentication

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

i18n Language translation settings

How to add new language? Lets 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.ts file
   
   

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

3. Now add the new option of French language in the topbar language dropdown menu src/components/CommonForBoth/TopbarDropdown/LanguageDropdown.tsx
4. You must have to write all text like {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.ts file
   
   

   i18n
       .use(detector)
       .use(reactI18nextModule) // passes i18n down to react-i18next
       .init({
           resources,
           lng: "fr",
           fallbackLng: "fr", // 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 20 or greater.

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