Folder Structure

A simple, intuitive folder structure ensures easy navigation without any hassle.

Under thedatta-able-react-hook-reactstrap/ directory, You will find the following folder structure.

VITE ( TS )

datta-able-react-hook-reactstrap-ts

..
├── src
│   ├── api                     -> Mock JSON data to be used for working apps
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   ├── scss                -> Theme style 
│   ├── components              -> Common components used across a theme
│   │   ├── @extended           -> Extended components of MUI
│   │   ├── cards               -> Cards used at different locations
│   │   ├── third-party
│   │   ├── ...
│   ├── contexts                -> State context for Login management and config
│   ├── data                    -> Static data
│   ├── hooks                   -> Custom hooks
│   ├── layout
│   │   ├── Auth                -> Layout for login showcase
│   │   ├── Dashboard           -> Layout for dashboard
│   │   ├── Simple              -> Layout for landing and contact showcase
│   ├── menu-items              -> Menu items
│   ├── routes                  -> Different routes based on layouts 
│   ├── sections                -> This contains different sections used only for pages
│   ├── type                    -> common types for TypeScript
│   ├── utils
│   │   ├── locales             -> Different locale JSON files
│   │   ├── ...                 -> Other utils function
│   ├── views                   -> View files for all pages
│   ├── App.tsx
│   ├── config.ts               -> Different theme config
│   ├── global.scss
│   ├── index.scss
│   ├── index.tsx
├── .env                        -> Store configuration settings and environment variables
├── eslint.config.mjs           -> To configure ESLint rules
├── .prettierrc                 -> To Code formatting style rules
├── tsconfig.json
├── package-lock.json           -> File generated by npm
├── package.json                -> Contains metadata (name, version, dependencies, scripts, and other)
├── README.md
├── yarn.lock                   -> File generated by yarn

VITE ( JS )

datta-able-react-hook-reactstrap-js

..
├── src
│   ├── api                     -> Mock JSON data to be used for working apps
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   ├── scss                -> Theme style
│   ├── components              -> Common components used across a theme
│   │   ├── @extended           -> Extended components of MUI
│   │   ├── cards               -> Cards used at different locations
│   │   ├── third-party
│   │   ├── ...
│   ├── contexts                -> State context for Login management and config
│   ├── data                    -> Static data
│   ├── hooks                   -> Custom hooks
│   ├── layout
│   │   ├── Auth                -> Layout for login showcase
│   │   ├── Dashboard           -> Layout for dashboard
│   │   ├── Simple              -> Layout for landing and contact showcase
│   ├── menu-items              -> Menu items
│   ├── routes                  -> Different routes based on layouts 
│   ├── sections                -> This contains different sections used only for pages
│   ├── utils
│   │   ├── locales             -> Different locale JSON files
│   │   ├── ...                 -> Other utils function
│   ├── views                   -> View files for all pages
│   ├── App.jsx
│   ├── config.js               -> Different theme config
│   ├── global.scss
│   ├── index.scss
│   ├── index.jsx
├── .env                        -> Store configuration settings and environment variables
├── eslint.config.mjs           -> To configure ESLint rules
├── .prettierrc                 -> To Code formatting style rules
├── tsconfig.json
├── package-lock.json           -> File generated by npm
├── package.json                -> Contains metadata (name, version, dependencies, scripts, and other)
├── README.md
├── yarn.lock                   -> File generated by yarn