Folder Structure

Described below is the folder structure of the template and what it contains.

Understanding the src folder

The src folder contain all the assets, pages, constants, helpers, redux-store, etc files.

src/assets/ folder contain all fonts, images & scss files used in template.
src/components/ folder contain templates common components used on several pages.
src/constants folder contain all constants of the template i.e. layout constants. you can add the more constant files here. The constants folder added to the template for better performance, let's say if we will require to update the value of some variable which is used in many functionalities, then we do not need to update its value everywhere, we will just update the variable's value located in this folder, and use these constant in relatable functionality.
src/data contain dummy data files used in templates.
src/helpers/ contain functional files related to API integration, notifications, etc. i.e. Firebase, API core, etc.
src/hooks contain custom hooks used in the template. e.g. useProfile hook etc.
src/routes contain route configuration & all routes for the template.
src/utils contain the utility functions used in several modules.
src/pages contain template's pages, you can create/add/remove your pages here.
src/redux contain the template's global store. check the Global State page for more details.

Main Package

┌── public 
│   ├── favicon.ico                                  --> favicon icon
│   ├── index.html                                   --> main index html file
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── assets
│   │    ├── fonts                                   --> contain html fonts
│   │    ├── images                                  --> contain template images
│   │    └── scss                                    --> contain all scss files
│   │        ├── custom
│   │        ├── _variables.scss
│   │        ├── app.scss
│   │        ├── bootstrap.scss
│   │        ├── custom.scss                         --> you can add your scss in this file
│   │        └── theme.scss  
│   ├── components 
│   │    └── ...                                    --> all common components files
│   ├── constants 
│   │    ├── ... all constants files related to each modules
│   │    └── index.ts                                   
│   ├── data                                        --> All dummy data of the template
│   │    ├── ... all data files related to each modules
│   │    └── index.ts
│   ├── helpers                                    --> app helpers like notifications, firebase auth, fake-backend
│   ├── hooks 
│   │    ├── ... all custom hooks files
│   │    └── index.ts  
│   ├── layouts                                    --> contain template layouts
│   ├── pages                                      --> contain template pages
│   ├── redux                                      --> Global Redux Store
│   ├── routes                                     --> template routes
│   ├── utils 
│   │   ├── ... all utility functions
│   │   └── index.ts  
│   ├── App.tsx
│   ├── App.test.tsx
│   ├── config.ts                                  --> api key & all secret keys storage read from env
│   ├── index.tsx
│   ├── serviceWorker.tsx
│   └── setupTests.tsx
├── .env                                           --> api key & all secret keys storage
├── env.example                                    --> env. example file (env variables example file for the bit bucket pipelines)   
├── .gitignore
├── .prettierignore
├── .prettierrc                                    --> prettier plugin's rules
├── tsconfig.json                                  --> react typescript configuration file
├── package.json
└── yarn.lock