Project Structure

Understanding the directory layout helps you navigate the codebase, locate files quickly, and make changes in the right place.

Root directory tree

jumbo-react-vite/
├── @jumbo/                  # First-party layout and component framework
│   ├── components/          # JumboLayout, JumboTheme, JumboNavbar, etc.
│   ├── shared/              # Shared low-level components (Link, Div, etc.)
│   ├── types/               # TypeScript type definitions
│   ├── utilities/           # helpers, constants, cookies, formatHelpers, etc.
│   └── vendors/             # Third-party bridges (react-hook-form)
│       └── react-hook-form/ # JumboForm, JumboInput, JumboSelect, etc.
├── @assets/
│   └── fonts/
│       └── noir-pro/        # NoirPro font face declarations (styles.css + woff2)
├── src/                     # Application source code
├── public/                  # Static assets served as-is (images, favicon)
├── dist/                    # Production build output (git-ignored)
├── index.html               # Vite entry HTML
├── vite.config.ts           # Vite configuration and path aliases
├── vitest.config.ts         # Vitest configuration (mirrors vite aliases)
├── tsconfig.json            # TypeScript compiler options
├── tsconfig.node.json       # TypeScript config for Node context (vite config files)
├── eslint.config.ts         # ESLint flat config (TypeScript ESLint strict)
├── .prettierrc.json         # Prettier formatting rules
├── .nvmrc                   # Node.js version pin (20)
├── vercel.json              # Vercel SPA rewrite rules and cache headers
└── package.json             # Dependencies, scripts, packageManager declaration

`src/` directory tree

src/
├── main.tsx                 # React entry point — mounts App into #root
├── App.tsx                  # Root component — provider tree + RouterProvider
├── i18n.ts                  # i18next initialisation with all language resources
├── routes/
│   ├── index.tsx            # createBrowserRouter — maps URL prefixes to layouts
│   ├── demo-routes.tsx      # Shared page routes used by StretchedLayout + Demo1/4
│   ├── demo2-routes.tsx     # Page routes for Demo2Layout
│   ├── demo3-routes.tsx     # Page routes for Demo3Layout
│   ├── demo4-routes.tsx     # Page routes for Demo4Layout
│   └── solo-routes.tsx      # Auth and extra-pages routes (login, 404, etc.)
├── layouts/
│   ├── StretchedLayout/     # Default layout (persistent sidebar, header, footer)
│   ├── Demo1Layout/         # Layout without sidebar, taller header
│   ├── Demo2Layout/         # Temporary drawer sidebar, spreadOut header
│   ├── Demo3Layout/         # Right sidebar enabled, footer hidden
│   ├── Demo4Layout/         # Demo3 variant with HeroSection
│   ├── SoloLayout/          # Minimal layout for auth and error pages
│   ├── SettingsLayout/      # Nested layout for /user/settings/* routes
│   ├── ContentLayout/       # Standalone content wrapper
│   └── NewLayout1/          # Extensible custom layout scaffold
├── pages/
│   ├── auth/                # Login, signup, forgot-password, reset-password pages
│   ├── dashboards/          # Misc, Crypto, Listing, CRM, Intranet, Ecommerce, News
│   ├── apps/                # Chat, Contacts, Mail, Invoice, Plan subscription
│   ├── extensions/          # CKEditor, Tiptap, DnD, Dropzone
│   ├── modules/
│   │   ├── calendars/       # react-big-calendar examples
│   │   ├── charts/          # Recharts + MUI X Charts examples
│   │   └── maps/            # @react-google-maps/api examples
│   ├── user/                # Profiles, social wall, settings subtree
│   ├── extra-pages/         # 404, 500, lock-screen
│   ├── grid-views/          # Project and user grid views
│   ├── list-views/          # Project and user list views
│   ├── metrics/             # Metrics page
│   ├── widgets/             # Widget showcase
│   └── onboarding-*/        # Three onboarding flows
├── components/
│   ├── AuthProvider/        # AuthContext, AuthProvider, useAuth hook
│   ├── AppProvider/         # AppContext — customizer visibility, custom layout flag
│   ├── AppSnackbar/         # SnackbarProvider wrapper (notistack)
│   ├── CustomizerSettings/  # Runtime theme/layout switcher drawer
│   ├── LoginForm/           # Login form using JumboForm + Zod
│   ├── Page/                # Generic page wrapper; applies withAuth HOC
│   ├── Spinner/             # Loading spinner component
│   ├── maps/                # MapProvider + Google Maps wrappers
│   └── ...                  # Feature-specific components
├── config/
│   ├── index.ts             # Exports CONFIG.THEME built from theme files
│   └── layouts/
│       ├── default.ts       # defaultLayoutConfig used by StretchedLayout
│       └── index.ts         # Re-exports all layout configs
├── themes/
│   ├── main/
│   │   ├── default.ts       # Light theme (primary #7352C7, NoirPro font)
│   │   ├── dark.ts          # Dark mode theme overrides
│   │   └── semi-dark.ts     # Semi-dark theme overrides
│   ├── header/              # Header-specific theme overrides (default, dark, semi-dark)
│   ├── sidebar/             # Sidebar-specific theme overrides
│   └── footer/              # Footer-specific theme overrides
├── translations/
│   ├── en.ts                # English translation strings
│   ├── ar.ts                # Arabic
│   ├── es.ts                # Spanish
│   ├── fr.ts                # French
│   ├── it.ts                # Italian
│   └── zh.ts                # Chinese
├── hooks/
│   ├── useAuth.ts           # Reads AuthContext
│   └── useApp.ts            # Reads AppContext
├── hoc/
│   └── withAuth.tsx         # HOC — redirects unauthenticated users to /auth/login-1
├── utilities/
│   ├── helpers/
│   │   └── index.tsx        # generateChildRoutes() and other app-level helpers
│   └── constants/
│       ├── paths.ts         # ASSET_IMAGES and other path constants
│       └── icons.ts         # Icon map constants
├── styles/
│   ├── style.css            # Global CSS resets and base styles
│   └── scrollbar.css        # Custom scrollbar styles
└── test/
    ├── setup.ts             # Vitest setup — imports @testing-library/jest-dom
    └── renderWithProviders.tsx  # Test utility wrapping LocalizationProvider + ThemeProvider + BrowserRouter

`@jumbo/` directory tree

@jumbo/
├── components/
│   ├── JumboLayout/         # JumboLayout + JumboLayoutProvider + hooks
│   ├── JumboTheme/          # JumboTheme + sub-theme providers + useJumboTheme hooks
│   ├── JumboNavbar/         # JumboNavbar + JumboNavbarProvider + nav item components
│   ├── JumboDialog/         # JumboDialog + JumboDialogProvider + useJumboDialog
│   ├── JumboRTL/            # RTL support via Emotion CacheProvider + stylis-plugin-rtl
│   ├── JumboScrollbar/      # Custom scrollbar wrapper
│   └── index.ts             # Public surface re-exports
├── shared/
│   ├── Link/                # Smart link component
│   ├── Div/                 # Polymorphic div with sx support
│   ├── CardIconText/        # Icon + text card layout helper
│   └── ...
├── types/
│   ├── JumboTheme.ts        # JumboThemeConfig, extended MUI Theme type
│   ├── JumboLayoutTypes.ts  # LayoutOptions, LayoutContext, all sub-option interfaces
│   ├── JumboNavbar.ts       # NavbarItem, NavbarGroup, NavbarSection types
│   ├── JumboCard.ts         # JumboBgStyleProps, JumboHeaderProps
│   └── index.ts             # Re-exports all types
├── utilities/
│   ├── helpers.ts           # createJumboTheme(), nav type guards, style helpers
│   ├── constants.ts         # SIDEBAR_VARIANTS, SIDEBAR_STYLES, SIDEBAR_VIEWS, etc.
│   ├── cookies.ts           # getCookie(), setCookie(), eraseCookie(), getCookieValue()
│   ├── formatHelpers.ts     # Date and number formatting utilities
│   ├── styleHelpers.ts      # MUI sx style helpers
│   └── systemHelpers.ts     # Browser/environment detection helpers
└── vendors/
    └── react-hook-form/
        └── components/
            ├── JumboForm/       # RHF context wrapper with optional Zod resolver
            ├── JumboInput/      # MUI TextField bound to RHF
            ├── JumboOutlinedInput/
            ├── JumboCheckbox/
            └── JumboSelect/

Key directories explained

Directory	Purpose
`@jumbo/`	First-party framework — layout, theme, navbar, dialogs, forms, utilities
`src/routes/`	React Router 7 route definitions; add new routes here
`src/layouts/`	Layout shell components; each wraps `JumboLayout` with a specific config
`src/pages/`	Page-level components; the main place for feature work
`src/components/`	Shared UI components used across multiple pages
`src/config/`	Theme assembly and layout defaults
`src/themes/`	MUI `ThemeOptions` presets for light, semi-dark, and dark modes
`src/translations/`	i18n string resources for all six supported languages
`src/test/`	Test utilities — setup file and `renderWithProviders`

Key files explained

File	Purpose
`src/main.tsx`	Entry point; imports fonts, global CSS, i18n, and mounts `<App />`
`src/App.tsx`	Provider tree: `AuthProvider` → `JumboTheme` → `JumboRTL` → `RouterProvider`
`src/config/index.ts`	Assembles `CONFIG.THEME` using `createJumboTheme()`
`src/config/layouts/default.ts`	`defaultLayoutConfig` object for `StretchedLayout`
`src/routes/index.tsx`	`createBrowserRouter` with all top-level layout routes
`src/i18n.ts`	i18next initialisation — sets `lng: 'en'`, registers all language namespaces
`vite.config.ts`	Vite plugins and `@`, `@jumbo`, `@assets` path alias definitions
`vitest.config.ts`	Vitest configuration with jsdom, coverage thresholds, and included files
`vercel.json`	SPA `/` → `/index.html` rewrite + long-cache headers for `/assets/`

Naming conventions

Page components are PascalCase and live in src/pages/<category>/
Layout components are PascalCase with a Layout suffix, in src/layouts/<LayoutName>/
HOCs are camelCase functions prefixed with with, e.g. withAuth
Hooks are camelCase prefixed with use, e.g. useAuth, useJumboLayout
Context files separate provider and context: AuthProvider.tsx + AuthContext.ts
Test files are co-located with source files: UserCard.tsx → UserCard.test.tsx
Constants use UPPER_SNAKE_CASE enum values, e.g. SIDEBAR_VARIANTS.PERSISTENT
TypeScript: strict mode enabled; no any — use unknown, generics, or proper types

Project Structure

Root directory tree

src/ directory tree

@jumbo/ directory tree

Key directories explained

Key files explained

Naming conventions

`src/` directory tree

`@jumbo/` directory tree