Folder Structure

Search…
Folder Structure
Simple intuitive folder structure helps you to navigate easily without any hassle.
Folder Structure
If you prefer reading docs, continue reading below instead of watching videos.
​
Under theberry-material-react/ directory, You will find the following folder structure.
Folder Structure (CRA)
nextJS
1
berry-material-react
2
..
3
├── package.json           -> Package json file.
4
├── public
5
├── README.md
6
├── src
7
│   ├── _mockApis          -> Mock Json data to be used for working apps
8
│   ├── assets
9
│   │   ├── images
10
│   │   ├── scss           -> Template SCSS files
11
│   │       ├── style.scss -> Application main file
12
│   │       ├── _themes-vars.module.scss
13
│   ├── contexts           -> State context for Login management
14
│   ├── hooks              -> Custom hooks
15
│   ├── layout
16
│   │   ├── DocsLayout     -> Layout for docs components & routers
17
│   │   ├── MainLayout     -> Layout for main components & routers
18
│   │   ├── MinimalLayout  -> Layout for mimimal components & routers
19
│   │   ├── NavigationScroll.js
20
│   │   ├── NavMotion.js
21
│   ├── menu-items         -> menu items
22
│   ├── routes             -> different route based on layouts
23
│   ├── store              -> Redux actions, reducers
24
│   │   ├── slices         -> different slices of toolkit
25
│   ├── themes             -> Contains application style and theme
26
│   ├── types              -> common types for Typescript. Exist only in Typescript
27
│   ├── ui-component       -> Template custom & reusable components
28
│   ├── utils
29
│   │   ├── locales        -> different locale json files
30
│   │   ├── route-guard    -> Auth guard to prevent unexpected navigations
31
│   └── views              -> View files for all pages
32
├── App.js                 -> starting point of application
33
├── config.js              -> Template constant value and live customization  
34
├── index.js               -> Application root js file
Copied!
1
berry-material-react
2
..
3
├── package.json           -> Package json file.
4
├── public
5
│   ├── assets             -> images in different directories
6
│   │   ├── auth
7
│   │   ├── cards
8
│   │   ├── docs
9
│   │   ├── ...
10
├── README.md
11
├── src
12
│   ├── components         -> components used in different pages
13
│   │   ├── application
14
│   │   ├── authentication
15
│   │   ├── contact-us
16
│   │   ├── dashboard
17
│   │   ├── ...
18
│   ├── contexts           -> State context for Login and other
19
│   ├── hooks              -> Custom hooks
20
│   ├── layout
21
│   │   ├── Customization
22
│   │   ├── MainLayout     -> Layout for main components & routers
23
│   │   ├── MinimalLayout  -> Layout for minimal components & routers
24
│   │   ├── NavigationScroll.js
25
│   │   ├── NavMotion.js
26
│   │   ├── GuestGuard.js
27
│   ├── menu-items         -> menu items for each main menu
28
│   │   ├── application.js
29
│   │   ├── dashboard.js
30
│   │   ├── ...
31
│   ├── pages              -> next js pages
32
│   ├── scss               -> styles-themes
33
│   ├── store              -> Redux actions, reducers
34
│   │   ├── slices         -> different slices of toolkit
35
│   ├── themes             -> Contains application style and theme
36
│   ├── types              -> common types for Typescript. Exist only in Typescript
37
│   ├── utils
38
│   │   ├── locales        -> different locale json files
39
│   │   ├── route-guard    -> Auth guard to prevent unexpected navigations
40
├── config.js              -> Template constant value and live customization  
Copied!
Quick Start
State Management
Last modified 2mo ago
Copy link