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.

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

Last updated

Was this helpful?