Folder Structure

A straightforward and easy-to-navigate folder structure simplifies the process of finding what you need.

Watch this video - "Helps you to understand the directory structure of whole Berry Template"

If you prefer reading docs, continue reading below instead watching the above video.

Under theberry-material-react/ directory, You will find the following folder structure.

CRA

berry-material-react
..
├── package.json           -> Package json file.
├── public
├── README.md
├── src
│   ├── _mockApis          -> Mock Json data to be used for working apps
│   ├── assets
│   │   ├── images
│   │   ├── scss           -> Template SCSS files
│   │       ├── style.scss -> Application main file
│   │       ├── _themes-vars.module.scss
│   ├── contexts           -> State context for Login management
│   ├── hooks              -> Custom hooks
│   ├── layout
│   │   ├── Customization 
│   │   ├── MainLayout     -> Layout for main components & routers
│   │   ├── MinimalLayout  -> Layout for mimimal components & routers
│   │   ├── NavigationScroll.js
│   │   ├── NavMotion.js
│   ├── menu-items         -> menu items
│   ├── routes             -> different route based on layouts
│   ├── store              -> Redux actions, reducers
│   │   ├── slices         -> different slices of toolkit
│   ├── themes             -> Contains application style and theme
│   ├── types              -> common types for Typescript. Exist only in Typescript
│   ├── ui-component       -> Template custom & reusable components
│   ├── utils
│   │   ├── locales        -> different locale json files
│   │   ├── route-guard    -> Auth guard to prevent unexpected navigations
│   ├── views
│   ├── App.js             -> starting point of application
│   ├── config.js          -> Template constant value and live customization
│   └── index.js           -> Application root js file
├── .env                   -> Store configuration settings and environment variables
├── eslint.rc              -> To configure ESLint rules 
├── .prettiertc            -> To Code formatting style rules
├── vite-env.d.ts
├── yarn.lock              -> File generated by yarn

nextJS

berry-material-react
..
├── package.json           -> Package json file.
├── public
│   ├── assets             -> images in different directories
│   │   ├── auth
│   │   ├── cards
│   │   ├── docs
│   │   ├── ...
│   ├── favicon.ico
├── README.md
├── src
│   ├── app                -> next js pages
│   │   ├── dashboard
│   │   ├── minimal
│   │   ├── simple
│   │   ├── ...
│   ├── components         -> components used in different pages
│   │   ├── application
│   │   ├── authentication
│   │   ├── contact-us
│   │   ├── dashboard
│   │   ├── ...
│   ├── contexts           -> State context for Login and other
│   ├── hooks              -> Custom hooks
│   ├── Data               -> Custom data  
│   ├── layout
│   │   ├── Customization
│   │   ├── MainLayout     -> Layout for main components & routers
│   │   ├── MinimalLayout  -> Layout for minimal components & routers
│   │   ├── NavigationScroll.js
│   │   ├── NavMotion.js
│   │   ├── GuestGuard.js
│   ├── menu-items         -> menu items for each main menu
│   │   ├── application.js
│   │   ├── dashboard.js
│   │   ├── ...           
│   ├── scss               -> styles-themes
│   ├── store              -> Redux actions, reducers
│   │   ├── slices         -> different slices of toolkit 
│   │   ├── ...
│   ├── themes             -> Contains application style and theme
│   ├── types              -> common types for Typescript. Exist only in Typescript
│   ├── utils
│   │   ├── locales        -> different locale json files
│   │   ├── route-guard    -> Auth guard to prevent unexpected navigations
│   ├── views
│   │   ├── app
│   │   ├── authenticaion
│   │   ├── ...
├── config.js              -> Template constant value and live customization  

remix

berry-material-react
..
├── package.json           -> Package json file.
├── public
│   ├── assets             -> images in different directories
│   │   ├── landing
│   │   ├── profile
│   │   ├── users
├── README.md
├── app
│   ├── assets             
│   │   ├── images        -> images in different directories
│   │   │   ├── auth
│   │   │   ├── cards
│   │   │   ├── docs
│   │   │   ├── ...
│   │   ├── scss           -> styles-themes    
│   │   ├── styles.js      -> comman styles from different scss modules
│   ├── components         -> components used in different pages
│   │   ├── application
│   │   ├── authentication
│   │   ├── contact-us
│   │   ├── dashboard
│   │   ├── ...
│   ├── contexts           -> State context for Login and other
│   ├── hooks              -> Custom hooks
│   ├── layout
│   │   ├── Customization
│   │   ├── MainLayout     -> Layout for main components & routers
│   │   ├── MinimalLayout  -> Layout for minimal components & routers
│   │   ├── NavigationScroll.js
│   │   ├── NavMotion.js
│   │   ├── GuestGuard.js
│   ├── menu-items         -> menu items for each main menu
│   │   ├── application.js
│   │   ├── dashboard.js
│   │   ├── ...
│   ├── routes             -> remix js routes             
│   ├── store              -> Redux actions, reducers
│   │   ├── slices         -> different slices of toolkit
│   │   │   ├── api        -> api setup for different slices 
│   ├── themes             -> Contains application style and theme
│   ├── types              -> common types for Typescript. Exist only in Typescript
│   ├── utils
│   │   ├── locales        -> different locale json files
│   │   ├── route-guard    -> Auth guard to prevent unexpected navigations
├── config.js              -> Template constant value and live customization  
├── root.js                -> The main entry point of the router