> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/materially-react-material-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/materially-react-material-documentation/file-structure.md).

# File Structure

A File Structure allows applications to read, write and modify data.

File Structures are the organisation of Data in Secondary Storage devices in such a way that minimises the access time and the storage space. A File Structure is a combination of representations for data in files and of operations for accessing the data.

## Project structure

Under the `materially/`the folder, you will find the project folder structure.

{% tabs %}
{% tab title="Typescript" %}

```typescript
materially/
└── src/
    ├── assets/
    |    ├── images/
    ├── components/          -> Template custom components
    ├── contexts/        
    ├── data
    ├── hooks/               -> Custom hooks
    ├── layouts/
    |    ├── MainLayout      -> Layout components & routers
    |    ├── MinimalLayout   -> Minimal Layout components
    ├── menu-items/
    ├── routes/              -> Add pages router/
    ├── sections/            
    ├── states/              
    ├── themes/              -> Material default theme
    ├── utils/               -> Locale json files
    ├── views/               -> View files for all pages
    ├── App.tsx
    ├── config.ts            -> Template constant value and live customization  
    ├── main.tsx            -> Application root ts file
    ├── vite-env.d.ts
├── .env                     -> Store configuration settings and environment variables
├── eslint.config.mjs        -> To configure ESLint rules
├── .prettierrc              -> To Code formatting style rules
├── index.html
├── ...
├── tsconfig.json
├── package-lock.json        -> File generated by npm
├── package.json             -> Contains metadata (name, version, dependencies, scripts, and other)
├── README.md
├── yarn.lock   
```

{% endtab %}

{% tab title="Javascript" %}

```javascript
materially/
└── src/
    ├── assets/
    |    ├── images/
    ├── components/          -> Template custom components
    ├── contexts/        
    ├── data/            
    ├── hooks/               -> Custom hooks
    ├── layout/
    |    ├── MainLayout      -> Layout components & routers
    |    ├── MinimalLayout   -> Minimal Layout components
    ├── menu-items           -> Application menu data
    ├── routes/              -> Add pages router/
    ├── sections/     
    ├── states/        
    ├── themes/              -> Material default theme
    ├── utils/               -> Locale json files
    ├── views/               -> View files for all pages
    ├── config.js            -> Template constant value and live customization  
    ├── index.jsx            -> Application root js file
    ├── vite-env.d.js
├── .env                     -> Store configuration settings and environment variables
├── eslint.config.mjs        -> To configure ESLint rules
├── .prettierrc              -> To Code formatting style rules
├── index.html
├── jsconfig.json
├── package-lock.json        -> File generated by npm
├── package.json             -> Contains metadata (name, version, dependencies, scripts, and other)
├── README.md
├── yarn.lock   
    
```

{% endtab %}
{% endtabs %}