Vexlora, from first install to production integration.

Start here

Vexlora is an admin-panel template, not a customer-facing storefront and not a production backend.

Recommended reading order

Installation

Use the lockfile for repeatable installs. The project declares Node.js >= 20.19.0.

Fresh install

npm ci
npm run dev

Open http://localhost:3000 . The default landing route redirects to /dashboard/executive .

Production verification

npm run typecheck
npm run lint
npm run build
npm start

Environment file

# macOS / Linux
cp .env.example .env.local

# Windows PowerShell
Copy-Item .env.example .env.local

The .env.example file is the source of truth for the environment-variable names shipped with your source package. These hooks only extend development origins, CSP connections and trusted frame ancestors. Never place secret API keys in browser-exposed environment variables.

Project structure

The route layer stays thin; shared UI, business features, data adapters and configuration have separate ownership.

Customize safely

Most buyer changes have a central entry point. Start there before editing many pages.

productConfig.name = "Your Admin"
productConfig.companyName = "Your Company"
productConfig.brand.logoSrc = "/brand/your-logo.svg"

Shell & navigation

Sidebar, breadcrumbs, command discovery and much of the topbar are driven by shared registries.

Add a permanent navigation item

npm run registry:generate
npm run check:routes
npm run check:screen-registry

The 19 dashboards

Dashboards share shell/theme/responsive foundations, but their composition, charts and operating questions are deliberately different.

How the modules relate

Vexlora avoids duplicating ownership. A business domain owns why something happens; shared control planes own cross-cutting execution.

Commerce order to money and fulfillment

SaaS customer lifecycle

Outgoing obligation

AI operating layer

Replace mock data with your API

Vexlora keeps presentation independent from a production database. Pages should depend on typed providers/repositories, not hardcoded fetch logic.

Expected list shape

type PaginatedResult<T> = {
  items: T[]
  page: number
  pageSize: number
  total: number
  totalPages: number
}

eCommerce & Online Store

The eCommerce suite owns product/order/inventory/checkout/marketplace operations. Online Store is an admin-side content/navigation configurator for a buyer-owned storefront.

Mega-menu flow

Static Pages

Use the Online Store Pages workspace for About, Privacy, Terms and other storefront pages. The HTML editor supports source/preview modes, inline/featured media, SEO and publication controls. Production HTML should be sanitized according to your backend policy.

Blog / media

Blog supports categories, archives, featured images, social-link handoff and Menu Builder sources. Browser image handling is sample-oriented; replace it with your media/CDN API for production.

Payments & money movement

Payment Core is provider-neutral infrastructure. Finance remains the accounting/reconciliation owner; business domains own the document that explains why money moves.

Payment Core workspaces

Transactions, Methods, Providers, Accounts, Marketplace, Checkout, Routing, Refunds & Disputes, Payout Routing and Domain Flows.

See PAYMENT_CORE.md , PAYMENT_INFRASTRUCTURE_2026.md and ECOMMERCE_CHECKOUT_PAYMENTS.md .

AI platform

AI is a flagship operating layer with dedicated workspaces plus contextual copilots across business modules.

Contextual action model

Start with AI_FLAGSHIP.md , AI_CROSS_MODULE.md and the specialized AI engineering notes in docs/AI_*.md .

Authentication, users & RBAC

The template includes complete identity/admin presentations, but real session issuance and authorization must be integrated by the buyer.

Reference: AUTH_RBAC.md and IDENTITY_ACCESS_2026.md .

Forms, tables & charts

Vexlora centralizes interaction engines so buyers change business content without forking foundations.

Engineering references: FORMS.md , DATA_TABLE.md , CHARTS.md .

Localization & RTL

Locale definitions and formatting are centralized. Direction uses logical start/end utilities so LTR and RTL share the same components.

npm run check:i18n-rtl

Responsive, accessibility & quality

Responsive adaptation is intentionally limited to 320–1280px. Above 1280px, preserve the original desktop composition; larger widths should be spot-checked for overflow or regressions without redesigning the layout.

Viewport verification matrix

npm run check:responsive
npm run check:accessibility

Security architecture

Vexlora includes defensive browser defaults and a buyer-facing Security Center, while clearly separating frontend safeguards from production security controls.

CSP environment hooks

# Copy .env.example to .env.local, then configure only the keys you need.
# Keep the exact variable names shipped in .env.example.

This keeps the documentation accurate if the product prefix is renamed in a future release; .env.example remains authoritative.

Reference: HIGH_SECURITY.md .

Media, images & asset credits

Sample assets are isolated so buyers can replace them without rewriting page logic. Redistribution evidence must be handled carefully before marketplace submission.

Open Assets & Credits →

Add a new page or module

Use the existing route group and shared foundations; do not create a parallel admin shell.

npm run registry:generate
npm run check
npm run test:critical
npm run typecheck
npm run lint
npm run build

Build & deployment

Vexlora is a standard Next.js application. Choose a host that supports the Next.js runtime you intend to use.

npm ci
npm run build
npm start

Updates & upgrade safety

Keep buyer customization centralized and use version control so source upgrades can be merged predictably.

npm run upgrade:preflight
npm run check:upgrade-preflight-safety
npm run check

Release QA & certification

The source includes a large automated regression suite in addition to TypeScript, ESLint and the Next.js production build.

Buyer release sequence

npm ci
npm run typecheck
npm run lint
npm run build
npm run check
npm run test:critical

# Combined project certification gate
npm run certify

Troubleshooting

Start with the exact failing command and message. Avoid deleting lockfiles or changing dependencies before understanding the error.

Frequently asked questions

Short answers to the questions buyers most often have when adapting a large admin template.

Engineering references included with the source

The docs/ directory contains detailed architecture notes for AI, payments, eCommerce, CRM, data layer, security, accessibility, responsive behavior, settings, reporting, industry suites and more. This buyer portal summarizes those contracts; the Markdown files provide implementation depth.