πŸ“‚Folder Structure

Simple intuitive folder structure helps you to navigate easily without any hassle.

Under the able-pro-material-next/ In the directory, you will find the following folder structure.

able-pro-material-next-ts
..
β”œβ”€β”€ public
β”‚   β”œβ”€β”€ assets             -> images in different directories
β”‚   β”‚   β”œβ”€β”€ images
β”‚   β”‚   β”‚   β”œβ”€β”€ auth
β”‚   β”‚   β”‚   β”œβ”€β”€ cards
β”‚   β”‚   β”‚   β”œβ”€β”€ ...
β”‚   β”‚   β”œβ”€β”€ third-party
β”œβ”€β”€ src              
β”‚   β”œβ”€β”€ api
β”‚   β”œβ”€β”€ app                -> different routes based on layouts
β”‚   β”‚   β”œβ”€β”€ (auth)         
β”‚   β”‚   β”œβ”€β”€ (blank)     
β”‚   β”‚   β”œβ”€β”€ (component)    
β”‚   β”‚   β”œβ”€β”€ (dashboard)       
β”‚   β”‚   β”‚   β”œβ”€β”€ apps
β”‚   β”‚   β”‚   β”œβ”€β”€ charts
β”‚   β”‚   β”‚   β”œβ”€β”€ ...
β”‚   β”‚   β”œβ”€β”€ (simple)       -> Layout for simple
β”‚   β”œβ”€β”€ components         -> components used in different pages
β”‚   β”‚   β”œβ”€β”€ @extended
β”‚   β”‚   β”œβ”€β”€ cards
β”‚   β”‚   β”œβ”€β”€ customization
β”‚   β”‚   β”œβ”€β”€ logo
β”‚   β”‚   β”œβ”€β”€ ...
β”‚   β”œβ”€β”€ contexts           -> State context for Login and other
β”‚   β”œβ”€β”€ data               -> Static data
β”‚   β”œβ”€β”€ hooks              -> Custom hooks
β”‚   β”œβ”€β”€ layout
β”‚   β”‚   β”œβ”€β”€ ComponentLayout     -> Layout for components showcase
β”‚   β”‚   β”œβ”€β”€ DashboardLayout     -> Layout for Dashboard
β”‚   β”‚   β”œβ”€β”€ SimpleLayout        -> Layout for simple   
β”‚   β”œβ”€β”€ menu-items              -> menu items for each main menu
β”‚   β”‚   β”œβ”€β”€ application.js
β”‚   β”‚   β”œβ”€β”€ dashboard.js
β”‚   β”‚   β”œβ”€β”€ ...
β”‚   β”œβ”€β”€ sections           -> This contains different sections used only for pages
β”‚   β”œβ”€β”€ themes             -> Contains application style and theme
β”‚   β”œβ”€β”€ types              -> common types for Typescript. Exist only in Typescript
β”‚   β”œβ”€β”€ utils
β”‚   β”‚   β”œβ”€β”€ locales        -> different locale json files
β”‚   β”‚   β”œβ”€β”€ route-guard    -> Auth guard to prevent unexpected navigations
β”‚   β”‚   β”œβ”€β”€ ...
β”‚   β”œβ”€β”€ views              -> list of Next.js files and directory
β”‚   β”‚   β”œβ”€β”€ app
β”‚   β”‚   β”œβ”€β”€ dashboard
β”‚   β”‚   β”œβ”€β”€ ...
β”‚   β”œβ”€β”€ config.ts          -> Template constant value and live customization
β”œβ”€β”€ eslint.config.mjs
β”œβ”€β”€ .prettierrc
β”œβ”€β”€ tsconfig.json
β”œβ”€β”€ next.config.ts
β”œβ”€β”€ package-lock.json      -> Package lock file.
β”œβ”€β”€ package.json           -> Package json file.
β”œβ”€β”€ README.md
β”œβ”€β”€ yarn.lock              -> yarn lock file.  

Last updated