Skip to main content

Folder Structure

Heads Up

Do not make any changes in the src/@core, src/@layout and src/@menu folders unless suggested by our support team. It is the core functionality of the template which is responsible to run the template.

The src/@core, src/@layout and src/@menu folders will receive updates with each new release. Kindly handle these folders with utmost care, as they contain crucial elements that ensure the template runs properly. Unauthorized changes to them could result in conflicts with subsequent updates, potentially disrupting your project.

Understand folder structure of the template and what every folder contains.

Overview

Before checking folder structure it is better you know some stuff related to folder structure.

  • src/@core, src/@layout and src/@menu folders contains core files of template which shall not get modified unless our support team guide you to do it.
  • Outside of src/@core, src/@layout and src/@menu folders are files you can move and modify as per your wish. Basically that is your playground where you can modify anything.
  • src/fake-db folder 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/components folder outside of src/@layout are your layouts which you can modify however you like. Template will always render these layouts.
.
├── public -> Stores assets like images, accessible by the web server
├── src
│ ├── @core -> Template's core files
│ ├── @layouts -> Template's layout files
│ ├── @menu -> Template's menu files
│ ├── app -> App router to handle the template's routings
│ ├── assets -> Static assets, like Svg
│ ├── components -> Reusable components for the users
│ ├── configs -> Configuration files
│ │ ├── i18n.ts -> i18n configurations
│ │ ├── primaryColorConfig -> Primary color configurations
│ │ └── themeConfig.ts -> Template configurations
│ ├── contexts -> Your context files go here
│ ├── data -> Data files (navigation structure, search data, etc.)
│ │ ├── dictionaries -> Translation data for localization
│ │ ├── navigation -> Vertical & Horizontal static navigation menu data
│ │ └── searchData.ts -> Data related to search
│ ├── fake-db -> A mock database setup, usually for testing or development purposes
│ ├── hocs -> Higher Order Components
│ ├── hooks -> Custom hooks
│ | └── useIntersection -> Hook to detect when an element enters the viewport - used only for the front pages
│ ├── libs -> External libraries Third party libraries
│ │ ├── styles -> Styles for third party libraries
│ │ ├── ApexCharts -> Renders charts in client side
│ │ ├── Recharts -> Renders charts in client side
│ │ ├── ReactPlayer -> Renders video player in client side
│ │ └── auth.ts -> Authentication using NextAuth.js
│ ├── prisma -> Prisma ORM files, including database schema
│ │ ├── migrations -> Database schema change history
│ │ ├── dev.db -> SQLite database
│ │ └── schema.prisma -> Model and schema definitions for Prisma
| ├── redux-store -> Redux Store setup
| | └── ReduxProvider.tsx -> Redux provider
| | └── index.ts -> Central Redux store configuration, combines all reducers and configures middleware
| | └── slices -> Redux slices (individual pieces of state)
│ ├── remove-translation-scripts -> Script for removing translations from the template
│ ├── types -> Type definitions
│ ├── utils -> Utility functions
│ └── views -> Files that are included in app folder
├── .editorconfig -> Configuration file for the editor
├── .env.example -> Example environment variables file
├── .eslintrc.js -> ESLint configurations (Linting code)
├── .gitignore -> Specifies intentionally untracked files to ignore
├── .npmrc -> Configuration for npm
├── .prettierrc.json -> Prettier configuration for code formatting
├── .stylelintrc.json -> Stylelint configuration for style files
├── next.config.mjs -> Configuration file for Next.js
├── package.json -> Lists dependencies and project metadata
├── pnpm-lock.yaml -> Lock file for pnpm, ensuring consistent installations
├── postcss.config.mjs -> Configuration for PostCSS.
├── tailwind.config.ts -> Configuration for Tailwind CSS
└── tsconfig.json -> TypeScript configuration file

@core folder

src/@core folder is the core of our template which contains core components, contexts, hooks, styles, etc. where you should not make any change but override them with the help of our 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 the src/@core folder will hopefully update the template with minimum changes.

Heads Up

If you want to customize components, utilize the src/components folder, which is specifically intended for such modifications and provides a safer avenue for personalization without impacting the core structure of the template.

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 the folder

Understanding the src/@core folder will save your development time and you will know how to get most out of our template.

Folder/FileDescription
componentsIt contains core components of the template. Make sure to check them all in our custom components section
contextsSettings context which is responsible for live template customization
hooksuseSettings is used to access settings context values
stylesCustom styles for the navigation menus, table, all the third party library components and some MUI components
svgSVG components
tailwindTailwind CSS plugin to add our custom classes
utilsUtils classes and functions for core features
types.tsIt contains all the types of core features like layout, skin, mode etc.

@layout folder

src/@layout folder contains styles, svg, utils, layout components like Blank Layout, Vertical Layout, Horizontal Layout, Layout Wrapper, etc. where you should not make any changes but override them with the help of our docs in case of any changes required in layout files.

src/@layout folder isn't meant to get modified. When you will update our template, replacing the src/@layout folder will hopefully update the template with minimum changes.

Heads Up

If you want to customize/add any layout, create the src/layouts folder. You may copy any layout from the src/@layouts folder and paste in the newly created folder and customize it according to your needs.

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 the folder

Understanding the src/@layout folder will save your development time and you will know how to get most out of our template.

Folder/FileDescription
componentsIt contains layout components of the template like Navbar, Footer, etc.
stylesStyled components for horizontal & vertical layout components
svgSVG components
utilsUtils classes for layouts
BlankLayout.tsxBlank layout component
HorizontalLayout.tsxHorizontal layout component
LayoutWrapper.tsxWrapper component to conditionally render Vertical and Horizontal layout
VerticalLayout.tsxVertical layout component

src/@menu folder contains contexts, hooks, styles, svg, utils, components, etc. where you should not make any changes but override them with the help of our docs in case of any changes required in menu files.

src/@menu folder isn't meant to get modified. When you will update our template, replacing the src/@menu folder will hopefully update the template with minimum changes.

Heads Up

If you want to customize anything related to menu, create the src/menu folder. You may copy any file from the src/@menu folder and paste in the newly created folder and customize it according to your needs.

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 the folder

Understanding the src/@menu folder will save your development time and you will know about the menu structure of our template.

Folder/FileDescription
componentsIt contains components of the template for vertical & horizontal menu
contextsIt contains menu context which is responsible for menu state
hooksIt contains hooks to access menu context values
horizontal-menuHorizontal menu imports
stylesStyled components for horizontal & vertical menu components
svgSVG components
utilsUtils classes and functions for menu
vertical-menuVertical menu imports
defaultConfigs.tsDefault menu configs
types.tsIt contains all the types of menu features like menu item, menu config, etc.

src/app folder

src/app folder contains the layout, API routes and pages of the template.

Understanding the folder

Understanding and utilizing the src/app directory, learn the essentials of each component and file for effective customization and enhancement of your development.

app
├── [lang] -> A dynamic folder for language-specific content, adaptable based on different
| | language codes.
│ ├── (blank-layout-pages) -> Contains pages that use a blank layout, typically for minimalistic pages like login
│ ├── (dashboard) -> Houses the main template pages, central to your admin interface
│ ├── [...not-found] -> A catch-all directory for handling 404 or 'page not found' scenarios
│ ├── layout.tsx -> The main layout component, which wraps all pages
├── api -> Central location for API-related scripts and services
│ ├── auth -> Authentication-related scripts and services
│ └── login -> Specific scripts or functions related to the login process
├── globals.css -> A CSS file that contains global styles applicable across the entire application
└── favicon.ico -> The application's favicon