# Folder Structure
Do not make any changes in the
src/@core folder unless suggested by our support team. It is the core functionality of the template which is responsible to run the template and will be updated with every new update. Use
src/layouts folder to override core layouts and components.
Understand folder structure of the template and what every folder contains.
Before checking folder structure it is better you know some stuff related to folder structure.
src/@corefolder contains core files of template which shall not get modified unless our support team guide you to do it.
- Outside of
src/@corefolder are files you can move and modify as per your wish. Basically that is your playground where you can modify anything.
src/@fake-dbfolder just contains dummy data which we get in response of API call. This enables us to take step forward in providing API ready template.
src/layoutsfolder outside of
src/@coreare your layouts which you can modify however you like. Template will always render these layouts.
# Main Package
├── public │ ├── images -> Static assets │ ├── locales -> Translations │ └── other files ├── src │ ├── @core -> Template's core files │ ├── @fake-db -> Fake Database for mocking axios requests (Fake API Calls) │ ├── configs -> Configuration files │ │ ├── acl.ts -> Your Access Control file/configurations │ │ ├── auth.ts -> Your authentication file/configurations │ │ ├── i18n.ts -> i18n configurations and initialization │ │ └── themeConfig.ts -> Template configurations │ ├── context -> Your context files go here │ ├── hooks -> Your hooks go here │ ├── layouts -> Your layouts │ │ ├── components -> Your components, layout components │ │ ├── UserLayout.tsx -> File responsible to render layout & template │ │ └── UserThemeOptions.ts -> Your theming file to override core theming │ ├── navigation -> Vertical & Horizontal static navigation menu files │ │ ├── horizontal │ │ └── vertical │ ├── pages -> View files that render all the pages │ │ ├── _app.tsx -> Main file responsible to render layout │ │ ├── _document.tsx -> HTML document & emotions configurations │ │ └── index.tsx -> Application entry file │ ├── store -> Redux store │ ├── types -> All types (only in the typescript version) │ └── views -> View files that are included in pages folder ├── styles -> Global styling ├── .env -> Environment file ├── next.config.js -> Next js configurations ├── next.d.ts -> Next js global types configurations ├── package.json -> All the dependencies require to run the template ├── .gitignore -> gitignore (ignore files and folder to sync with repo) ├── .eslintrc.js -> ESLint configurations (Linting code) ├── .prettierrc.js -> Prettier configurations (editor code formatting) ├── .tsconfig.json -> TypeScript configurations
# @core folder
src/@core folder is the core of our template which contains core layouts, components and theming where you should not make any change but override them with the help of our layout docs in case of any changes required in core files.
src/@core folder isn't meant to get modified. When you will update our template replacing this
src/@core folder will hopefully update the template with minimum changes.
It's a good idea to have a look at it and know what it contains to use stuff we already invented so you don't have to reinvent the wheel.
# Understanding Core folder
src/@core folder will save your development time and you will know how to get most out of our template.
|components||It contains core components of the template. Make sure to check them all in our custom components section|
|context||Settings context which is responsible for live template customization|
|hooks||useSettings is used to access settings context values, useBgColor is used to get different colors and useClipboard is used to copy some texts|
|layouts||All the layouts and layout components like menu, appBar and footer reside in this folder for any user to override from the @core folder|
|styles||MUI's stepper styled component and all the third party styled components reside in this folder|
|theme||All the MUI theming like palette, breakpoints, typography, component's styling etc. are done in this folder|
|utils||All the helpful functions used in whole template. Users can also import and use these useful functions.|