Folder Structure
A straightforward and easy-to-navigate folder structure simplifies the process of finding what you need.
Under theberry-material-react/ directory, You will find the following folder structure.
berry-react-material-ts
...
├── src
│ ├── api -> Mock Json data to be used for working apps
│ ├── assets
│ │ ├── image
│ │ ├── scss -> Different theme preset
│ ├── contexts -> State context for Login management & config
│ ├── data -> Static data
│ ├── hook -> Custom hooks
│ ├── layout
│ │ ├── Customization
│ │ ├── MainLayout -> Layout for main components & routers
│ │ ├── MinimalLayout -> Layout for mimimal components & routers
│ │ ├── SimpleLayout -> Layout for simple components & routers
│ │ ├── NavigationScroll.tsx
│ │ ├── NavMotion.tsx
│ ├── 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
│ ├── ui-component -> Template custom & reusable components
│ ├── utils
│ │ ├── locales -> different locale JSON files
│ │ ├── route-guard -> Auth guard to prevent unexpected navigations
│ ├── views
│ ├── App.tsx -> starting point of application
│ ├── config.tsx -> Template constant value and live customization
│ └── index.tsx -> Application root js file
├── .env -> Store configuration settings and environment variables
├── eslint.config.mjs -> To configure ESLint rules
├── .prettiertc -> To Code formatting style rules
├── tsconfig.json
├── package-lock.json -> File generated by npm
├── package.json -> Contains metadata (name, version, dependencies, scripts, and other)
├── vite.config.mts
├── README.md
├── yarn.lock -> File generated by yarn
berry-react-material-JS
...
├── src
│ ├── api -> Mock Json data to be used for working apps
│ ├── assets
│ │ ├── image
│ │ ├── scss -> Different theme preset
│ ├── contexts -> State context for Login management & config
│ ├── data -> Static data
│ ├── hook -> Custom hooks
│ ├── layout
│ │ ├── Customization
│ │ ├── MainLayout -> Layout for main components & routers
│ │ ├── MinimalLayout -> Layout for mimimal components & routers
│ │ ├── SimpleLayout -> Layout for simple components & routers
│ │ ├── NavigationScroll.jsx
│ │ ├── NavMotion.jsx
│ ├── 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
│ ├── ui-component -> Template custom & reusable components
│ ├── utils
│ │ ├── locales -> different locale JSON files
│ │ ├── route-guard -> Auth guard to prevent unexpected navigations
│ ├── views
│ ├── App.jsx -> starting point of application
│ ├── config.jsx -> Template constant value and live customization
│ └── index.jsx -> Application root js file
├── .env -> Store configuration settings and environment variables
├── eslint.config.mjs -> To configure ESLint rules
├── .prettiertc -> To Code formatting style rules
├── jsconfig.json
├── package-lock.json -> File generated by npm
├── package.json -> Contains metadata (name, version, dependencies, scripts, and other)
├── vite.config.mjs
├── README.md
├── yarn.lock -> File generated by yarn
berry-react-material-next-ts
..
├── public
│ ├── assets/images -> images in different directories
│ │ ├── auth
│ │ ├── cards
│ │ ├── docs
│ │ ├── ...
│ ├── favicon.ico
├── src
│ ├── api -> Mock JSON data to be used for working apps
│ ├── app -> Next js pages
│ │ ├── (dashboard)
│ │ │ ├── apps
│ │ │ ├── forms
│ │ │ ├── ...
│ │ ├── (minimal)
│ │ │ ├── login
│ │ │ ├── ...
│ │ ├── (simple)
│ │ │ ├── pages
│ │ ├── ...
│ │ ├── page.tsx
│ ├── contexts -> State context for Login and other
│ ├── Data -> Custom data
│ ├── hooks -> Custom hooks
│ ├── layout
│ │ ├── Customization
│ │ ├── MainLayout -> Layout for main components & routers
│ │ ├── MinimalLayout -> Layout for minimal components & routers
│ │ ├── SimpleLayout -> Layout for simple components & routers
│ │ ├── NavigationScroll.tsx
│ │ ├── NavMotion.tsx
│ ├── menu-items -> menu items for each main menu
│ │ ├── application.tsx
│ │ ├── dashboard.tsx
│ │ ├── ...
│ ├── scss -> styles-themes
│ ├── store -> Redux actions, reducers
│ │ ├── slices -> different slices of toolkit
│ │ ├── ...
│ ├── themes -> Contains application style and theme
│ ├── types -> common types for Typescript
│ ├── ui-component -> Template custom & reusable components
│ ├── utils
│ │ ├── locales -> different locale json files
│ │ ├── route-guard -> Auth guard to prevent unexpected navigations
│ ├── views
│ │ ├── application
│ │ ├── dashboard
│ │ ├── ...
│ ├── config.ts -> Template constant value and live customization
├── .env -> Store configuration settings and environment variables
├── eslint.config.mjs -> To configure ESLint rules
├── .prettiertc -> To Code formatting style rules
├── tsconfig.json
├── next.config.ts -> To customize routes, webpack configurations, and more.
├── package-lock.json -> File generated by npm
├── package.json -> Contains metadata (name, version, dependencies, scripts, and other)
├── README.md
├── yarn.lock -> File generated by yarnberry-react-material-next-js
..
├── public
│ ├── assets/images -> images in different directories
│ │ ├── auth
│ │ ├── cards
│ │ ├── docs
│ │ ├── ...
│ ├── favicon.ico
├── src
│ ├── api -> Mock JSON data to be used for working apps
│ ├── app -> Next js pages
│ │ ├── (dashboard)
│ │ │ ├── apps
│ │ │ ├── forms
│ │ │ ├── ...
│ │ ├── (minimal)
│ │ │ ├── login
│ │ │ ├── ...
│ │ ├── (simple)
│ │ │ ├── pages
│ │ ├── ...
│ │ ├── page.jsx
│ ├── contexts -> State context for Login and other
│ ├── Data -> Custom data
│ ├── hooks -> Custom hooks
│ ├── layout
│ │ ├── Customization
│ │ ├── MainLayout -> Layout for main components & routers
│ │ ├── MinimalLayout -> Layout for minimal components & routers
│ │ ├── SimpleLayout -> Layout for simple components & routers
│ │ ├── NavigationScroll.jsx
│ │ ├── NavMotion.jsx
│ ├── menu-items -> menu items for each main menu
│ │ ├── application.jsx
│ │ ├── dashboard.jsx
│ │ ├── ...
│ ├── scss -> styles-themes
│ ├── store -> Redux actions, reducers
│ │ ├── slices -> different slices of toolkit
│ │ ├── ...
│ ├── themes -> Contains application style and theme
│ ├── ui-component -> Template custom & reusable components
│ ├── utils
│ │ ├── locales -> different locale json files
│ │ ├── route-guard -> Auth guard to prevent unexpected navigations
│ ├── views
│ │ ├── application
│ │ ├── dashboard
│ │ ├── ...
│ ├── config.ts -> Template constant value and live customization
├── .env -> Store configuration settings and environment variables
├── eslint.config.mjs -> To configure ESLint rules
├── .prettiertc -> To Code formatting style rules
├── jsconfig.json
├── next.config.js -> To customize routes, webpack configurations, and more.
├── package-lock.json -> File generated by npm
├── package.json -> Contains metadata (name, version, dependencies, scripts, and other)
├── README.md
├── yarn.lock -> File generated by yarnberry-material-react
..
├── app
│ ├── assets
│ │ ├── images
│ │ ├── scss
│ ├── components -> components used in different pages
│ │ ├── application
│ │ ├── authentication
│ │ ├── contact-us
│ │ ├── dashboard
│ │ ├── ...
│ ├── contexts -> State context for Login management & config
│ ├── hook -> 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
│ ├── config.js -> Template constant value and live customization
│ ├── constant.js
│ ├── entery-clint.js
│ ├── entery-server.js
│ ├── root.js
├── eslint.rc -> To configure ESLint rules
├── .prettiertc -> To Code formatting style rules
├── jsconfig.json
├── package-lock.json -> File generated by npm
├── package.json -> Contains metadata (name, version, dependencies, scripts, and other)
├── README.md
├── eslint.rc -> To configure ESLint rules
├── .prettiertc -> To Code formatting style rules
├── jsconfig.json
├── package-lock.json -> File generated by npm
├── package.json -> Contains metadata (name, version, dependencies, scripts, and other)
├── README.md
├── remix.config.js
Last updated
Was this helpful?