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!
Copy link