File Structure

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

File Structures is the Organization of Data in Secondary Storage Device in such a way that minimizes 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.

materially/
└── src/
    ├── assets/
    |    ├── images/
    |    ├── scss/           -> Template SCSS files, check folder structure below  
    ├── components/          -> Template custom components
    ├── contexts/        
    ├── firebase/            -> Firebase login lib
    ├── hooks/               -> Custom hooks
    ├── layout/
    |    ├── MainLayout      -> Layout components & routers
    |    ├── MinimalLayout   -> Minimal Layout components
    |    ├── App.jsx
    ├── routes/              -> Add pages router/
    ├── services/            -> Data services 
    ├── store/               -> Redux actions, reducers & types
    ├── 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
    ├── menu-item.jsx        -> Allication menu data
    ├── reportWebVitals.js
    ├── serviceWorker.js
    ├── vite-env.d.js
├── .env                     -> Store configuration settings and environment variables
├── eslint.rc                -> To configure ESLint rules
├── .prettiertc              -> To Code formatting style rules
├── favicon.svg
├── 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   
    

JSS with SCSS Structure

Under the materially/src/assets/scss/the folder you will find the following folder structure.

SCSS/
├── custom/                   -> 
├── plugins/                  -> Third party plugins customisation scss
├── _themes-vars.module.scss  -> theme veriables
├── style.scss                -> Application main file