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.

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   

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