Folder Structure
Described below the folder structure of template and what is contains.
Understanding the src folder
the src folder contains all the
assets, pages, constants, helpers redux store etc
files.
-
the
data folder contains all the dummy data for whole template. each file's data is related to every mock api from Fake-backend. E.g. calender.js contains a dummy data which is used in Calendar module/page. -
the
src/components/HorizontalLayout/folder contains all the components files related to Horizontal layout, i.e. Navbar, Header, Footer. -
the
src/components/VerticalLayout/folder contains all the components files related to Vertical layout, i.e. Header, Footer, Sidebar, Sidebar Content. -
src/constantsfolder contains the all constants of the template i.e. layout constants. you can add more constant file here. The constants folder added to the template for better performance, let's say if we will require to update value of some variable which is used in many functionalities, then we do not need to update it's value everywhere, we will just update the variable's value located in this folder, and use these constant in relatable functionality. -
src/helpers/folder contains functional files related to api integration, i.e. firebase, api code, etc. check Internationalization page for more details. -
src/localesfolder contains international translation JSON files, you can add/remove language JSON files as per your need. -
src/pagescontains template's pages, you can create/add/remove you pages here. -
src/storecontains template's global store. check Redux page for more details.
React and Vite + React
├── Admin-Redux ├── Admin-Redux-Starterkit ├── Admin-Hooks ├── Admin-Hooks-Starterkit ├── Admin-Redux-Vite ├── Admin-Redux-Vite-Starterkit ├── Admin-Hooks-Vite ├── Admin-Hooks-Vite-Starterkit ├── Documentation --> Documentation ├── Sketch ├── xd ├── Skote.fig
├── Admin-Redux ├── public ├── favicon.ico --> favicon icon ├── index.html --> main index html file ├── logo192.png ├── logo512.png ├── manifest.json ├── robots.txt ├── src ├── assets ├── fonts --> contains html fonts ├── images --> contains template images └── scss --> contains all scss files ├── custom ├── rtl ├── _variables-dark.scss ├── _variables.scss ├── app-dark.scss ├── app.scss ├── bootstrap-dark.scss ├── bootstrap.scss ├── chartist.scss ├── datatables.scss ├── icons.scss ├── tasks.scss └── theme.scss --> you can add custom scss in this file ├── common ├── data --> All dummy data of the template ├── calender.js ├── chat.js ├── contacts.js ├── crypto.js ├── dashboard-saas.js ├── dashboard.js ├── ecommerce.js ├── index.js ├── invoices.js ├── mails.js ├── projects.js ├── tasks.js └── languages.js ├── components --> all common components of template ├── Common ├── CommonForBoth --> common components of both layouts ├── HorizontalLayout --> Horizontal layout's components ├── VerticalLayout --> Vertical layout's components └── NonAuthLayout.js --> Non Auth layout's file ├── constants --> contains whole template's constants ├── helpers --> for authentication firebase and jwt ├── locales --> all json files of i18n languages ├── pages --> contains template pages ├── routes --> contains template routes ├── store --> Global Redux Store ├── App.js ├── App.test.js ├── config.js --> api key & all secret keys storage read from .env ├── i18n.js --> main file for internationalization ├── index.js ├── serviceWorker.js ├── setupTests.js ├── .env --> api key & all secret keys storage ├── .eslintrc ├── .gitignore ├── .prettierignore ├── .prettierrc --> prettier plugin's rules ├── jsconfig.json ├── package.json └── yarn.lock
├── Admin-Hooks-Vite ├── src ├── assets ├── fonts --> contains html fonts ├── images --> contains template images └── scss --> contains all scss files ├── custom ├── rtl ├── _variables-dark.scss ├── _variables.scss ├── app-dark.scss ├── app.scss ├── bootstrap-dark.scss ├── bootstrap.scss ├── chartist.scss ├── datatables.scss ├── icons.scss ├── tasks.scss └── theme.scss --> you can add custom scss in this file ├── common ├── data --> All dummy data of the template ├── calender.js ├── chat.js ├── contacts.js ├── crypto.js ├── dashboard-saas.js ├── dashboard.js ├── ecommerce.js ├── index.js ├── invoices.js ├── mails.js ├── projects.js ├── tasks.js └── languages.js ├── components --> all common components of template ├── Common ├── CommonForBoth --> common components of both layouts ├── HorizontalLayout --> Horizontal layout's components ├── VerticalLayout --> Vertical layout's components └── NonAuthLayout.jsx --> Non Auth layout's file ├── constants --> contains whole template's constants ├── helpers --> for authentication firebase and jwt ├── locales --> all json files of i18n languages ├── pages --> contains template pages ├── routes --> contains template routes ├── store --> Global Redux Store ├── App.jsx ├── App.test.js ├── config.jsx --> api key & all secret keys storage read from .env ├── favicon.ico --> main file for internationalization ├── global.d.ts --> main file for internationalization ├── i18n.jsx --> main file for internationalization ├── main.jsx --> main file for internationalization ├── serviceWorker.jsx ├── setupTests.jsx ├── .env --> api key & all secret keys storage ├── .eslintrc ├── .gitignore ├── global.d.ts ├── index.html ├── package.json ├── viteconfig.json └── yarn.lock