Berry React
v4.1.0
v4.1.0
  • Introduction
  • Package
  • Getting Started
    • Pre-requisites
    • Quick Start
    • Mock backend
    • Deployment
    • Licensing
  • Setup
    • Seed
    • To Existing Project
  • Folder Structure
  • State Management
  • Multi Language
  • Authentication
    • Firebase
    • Auth0
    • AWS Cognito
    • Supabase
  • API Calls
  • Routing
    • New Menu
    • Login as First Page
    • Skip Login
    • Render Menu from the backend
    • Remove menu render via backend
  • Theme
    • Configuration
    • Presets
    • Style
      • Color
      • Typography
      • Overrides
      • Shadows
    • Layouts
    • Logo
  • How to
    • Remove eslint
    • Remove prettier
  • Components
    • Avatar
    • AnimateButton
    • Accordion
    • Breadcrumbs
    • Chip
    • ImageList
    • MainCard
    • Transitions
    • SubCard
  • Dependencies
  • Support
    • Roadmap
    • Changelog
    • FAQ
  • Berry Eco System
Powered by GitBook
On this page

Was this helpful?

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 yarn
berry-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 yarn

Was this helpful?