Able Pro
React
React
  • ✨Overview
  • 🌱Pre-requisites
  • 🚀Quick Start
  • 📂Folder Structure
  • 🌀State Management
  • 🔒Authentication
    • Switch to Auth0
    • Switch to Firebase
    • Switch to AWS Cognito
  • 🛣️Routing
  • 📡Axios API Calls
  • 🌐Internationalization
  • 🎭Theme/Style Configuration
  • 🎨Color Presets
  • 🛠️Project Configuration
  • 📚How to's
    • Login as First Page
    • Dashboard as First Page
    • Render Menu from the backend
    • Remove menu render from Backend
    • Remove Auth
  • 🤝Integration
    • Seed
    • Comparison
  • 📦Dependencies
  • 🖌️Figma
  • 🆘Support
  • 🗓️Roadmap
  • 📅Changelog
Powered by GitBook
On this page

Folder Structure

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

Under theablepro-material-react/ directory, You will find the following folder structure.

..
├── public
├── src
│   ├── api                -> Mock JSON data to be used for working apps
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   ├── third-party    -> Third-party styles
│   ├── components         -> Common components used across a theme
│   │   ├── @extended      -> Extended components of MUI
│   │   ├── cards          -> Cards used at different locations
│   │   ├── logo
│   │   ├── third-party
│   │   ├── Customization  -> live customizer
│   │   ├── ...
│   ├── contexts           -> State context for Login management and config
│   ├── data               -> Static data
│   ├── hooks              -> Custom hooks
│   ├── layout
│   │   ├── Auth           -> Layout for login method showcase
│   │   ├── Component      -> Layout for components showcase
│   │   ├── Dashboard      -> Layout for Dashboard
│   │   ├── Pages          -> Layout for Sass pages
│   │   ├── Simple         -> Layout for simple    
│   ├── menu-items         -> menu items
│   ├── pages              -> View files for all pages
│   ├── routes             -> different routes based on layouts
│   ├── sections           -> This contains different sections used only for pages
│   ├── themes             -> Contains application style and theme
│   │   ├── overrides      -> MUI overrides for each component
│   │   ├── theme          -> different theme preset
│   │   ├── ...            -> Other theme-related setups
│   ├── types              -> Common types for Typescript 
│   ├── utils
│   │   ├── locales        -> different locale JSON files
│   │   ├── route-guard    -> Auth guard to prevent unexpected navigations
│   ├── App.tsx
│   ├── config.ts         -> different theme config
│   ├── index.tsx
├── eslint.config.mjs
├── .prettierrc
├── tsconfig.json
├── package-lock.json      -> Package lock file.
├── package.json           -> Package json file.
├── README.md
├── yarn.lock              -> yarn lock file.
..
├── public
├── src
│   ├── api                -> Mock JSON data to be used for working apps
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   ├── third-party    -> Third-party styles
│   ├── components         -> Common components used across a theme
│   │   ├── @extended      -> Extended components of MUI
│   │   ├── cards          -> Cards used at different locations
│   │   ├── logo
│   │   ├── third-party
│   │   ├── Customization  -> live customizer
│   │   ├── ...
│   ├── contexts           -> State context for Login management and config
│   ├── data               -> Static data
│   ├── hooks              -> Custom hooks
│   ├── layout
│   │   ├── Auth           -> Layout for login method showcase
│   │   ├── Component      -> Layout for components showcase
│   │   ├── Dashboard      -> Layout for Dashboard
│   │   ├── Pages          -> Layout for Sass pages
│   │   ├── Simple         -> Layout for simple    
│   ├── menu-items         -> menu items
│   ├── pages              -> View files for all pages
│   ├── routes             -> different routes based on layouts
│   ├── sections           -> This contains different sections used only for pages
│   ├── themes             -> Contains application style and theme
│   │   ├── overrides      -> MUI overrides for each component
│   │   ├── theme          -> different theme preset
│   │   ├── ...            -> Other theme-related setups
│   ├── utils
│   │   ├── locales        -> different locale JSON files
│   │   ├── route-guard    -> Auth guard to prevent unexpected navigations
│   ├── App.jsx
│   ├── config.js         -> different theme config
│   ├── index.jsx
├── eslint.config.mjs
├── .prettierrc
├── jsconfig.json
├── package-lock.json      -> Package lock file.
├── package.json           -> Package json file.
├── README.md
├── yarn.lock              -> yarn lock file.
..
├── public
├── src
│   ├── api                -> Mock JSON data to be used for working apps
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   ├── third-party    -> Third-party styles
│   ├── components         -> Common components used across a theme
│   │   ├── @extended      -> Extended components of MUI
│   │   ├── cards          -> Cards used at different locations
│   │   ├── logo
│   │   ├── third-party
│   │   ├── Customization  -> live customizer
│   │   ├── ...
│   ├── contexts           -> State context for Login management and config
│   ├── data               -> Static data
│   ├── hooks              -> Custom hooks
│   ├── layout
│   │   ├── Auth           -> Layout for login method showcase
│   │   ├── Component      -> Layout for components showcase
│   │   ├── Dashboard      -> Layout for Dashboard
│   │   ├── Pages          -> Layout for Sass pages
│   │   ├── Simple         -> Layout for simple    
│   ├── menu-items         -> menu items
│   ├── pages              -> View files for all pages
│   ├── routes             -> different routes based on layouts
│   ├── sections           -> This contains different sections used only for pages
│   ├── themes             -> Contains application style and theme
│   │   ├── overrides      -> MUI overrides for each component
│   │   ├── theme          -> different theme preset
│   │   ├── ...            -> Other theme-related setups
│   ├── types              -> Common types for Typescript 
│   ├── utils
│   │   ├── locales        -> different locale JSON files
│   │   ├── route-guard    -> Auth guard to prevent unexpected navigations
│   ├── App.tsx
│   ├── config.ts         -> different theme config
│   ├── index.tsx
├── eslint.config.mjs
├── .prettierrc
├── tsconfig.json
├── package-lock.json      -> Package lock file.
├── package.json           -> Package json file.
├── README.md
├── yarn.lock              -> yarn lock file.
..
├── public
├── src
│   ├── api                -> Mock JSON data to be used for working apps
│   ├── assets
│   │   ├── fonts
│   │   ├── images
│   │   ├── third-party    -> Third-party styles
│   ├── components         -> Common components used across a theme
│   │   ├── @extended      -> Extended components of MUI
│   │   ├── cards          -> Cards used at different locations
│   │   ├── logo
│   │   ├── third-party
│   │   ├── Customization  -> live customizer
│   │   ├── ...
│   ├── contexts           -> State context for Login management and config
│   ├── data               -> Static data
│   ├── hooks              -> Custom hooks
│   ├── layout
│   │   ├── Auth           -> Layout for login method showcase
│   │   ├── Component      -> Layout for components showcase
│   │   ├── Dashboard      -> Layout for Dashboard
│   │   ├── Pages          -> Layout for Sass pages
│   │   ├── Simple         -> Layout for simple    
│   ├── menu-items         -> menu items
│   ├── pages              -> View files for all pages
│   ├── routes             -> different routes based on layouts
│   ├── sections           -> This contains different sections used only for pages
│   ├── themes             -> Contains application style and theme
│   │   ├── overrides      -> MUI overrides for each component
│   │   ├── theme          -> different theme preset
│   │   ├── ...            -> Other theme-related setups
│   ├── types              -> Common types for Typescript 
│   ├── utils
│   │   ├── locales        -> different locale JSON files
│   │   ├── route-guard    -> Auth guard to prevent unexpected navigations
│   ├── App.tsx
│   ├── config.ts         -> different theme config
│   ├── index.tsx
├── eslint.config.mjs
├── .prettierrc
├── tsconfig.json
├── package-lock.json      -> Package lock file.
├── package.json           -> Package json file.
├── README.md
├── yarn.lock              -> yarn lock file.
PreviousQuick StartNextState Management

Last updated 3 months ago

📂