Your Volt X Web-app Kit is a ready-to-use design and frontend framework for quick progress on design and development.  

Built with Next.js, TypeScript, and Ant Design, it allows clients to quickly connect their databases and create tables, dashboards, and analytics without having to build the system from scratch.  

Key use cases:
 

• Sign-in and Sign-up

• Landing Page - Dashboard

• Landing Page - Marketplace 

• Data Grid - Flat list

• Data Grid - Hierarchy View

• View Record Details in Side Panel

• View Record Details in Full Screen 

• Create Record - Single page form

• Create Record 

• Edit Record 

• Delete Single Record

• Delete Multiple Records

• Move Single Record

• Move Multiple Records

• Apply Filters

• Apply More Filters

• Column Management

• Save View

• Map One Record to One Record 

• Map One Record to Multiple Records 

• Map Multiple Records to One Record

• Map Multiple Records to Multiple Records

• Export All Records

• Export Selected Records 

• Import Records

• Side-by-Side Data Grid View

• Side by Side Hierarchy List View

• Track Record

• Payment and Management

​

One can customise these patterns to manage different record types in a web app.

The kit is installed and launched just like any standard Next.js application.

After purchase, you will receive a compressed ZIP file.

​

Unpack it and run the following commands in your terminal:

​

npm install

npm run dev

 

For building:

​

npm run build

​

For formatting and linting:

​

npm run lint

npm run format

App launch:

​

npm run dev

 

The application will be available at http://localhost.

When launched, the main navigation panel and module list will be displayed.

Users can sign in through the authentication system, import data, view tables, and configure pages via config/appNavigationTree.config.tsx.

Core:
 

• Next.js 14 — framework for SSR and routing;
   

• React 18 + TypeScript 5 — modern frontend foundation;
   

• Ant Design 5.24 — visual components and theming;
   

• Zustand 5.0 — lightweight state management;
   

• NextAuth — authentication with Microsoft, Google, and GitHub support.
   

Additional libraries:
 

• xlsx — Excel file import/export;
   

• dnd-kit / dragula — drag-and-drop interfaces;
   

• dayjs / lodash / axios / uuid — utilities and API handling;
   

• sass — modular SCSS styles with global variables;
   

• ​eslint + prettier + husky — formatting, linting, and pre-commit hooks.

The architecture is based on Atomic Design and enhanced with journey/component/sub-component/component patterns:

journey-pattern/

  → top-level components (e.g.,pages and screen, dashboard, table views )

component-pattern/

  → reusable blocks (filters blocks, navigation component with dropdown menu)

sub-component-pattern/

  → atomic functional elements (forms, modal windows, dropdown menu items collection)

component/

  → ready-to-use, assembled UI components ( buttons, icons, inputs, text)

 

Main directories:
 

• /app — Next.js pages and layouts (login, dashboard, settings, etc.);
   

• /config — navigation configs (appNavigationTree, pageActions, titles, tabs);
   

• /store — Zustand stores and providers;
   

• /theme — global Ant Design themes;
   

• /styles — global SCSS and variables;
   

• /utils — shared functions;
   

• /guards — route protection;
   

• /hooks — hooks for tables, navigation, and validation;
   

• /constants and /types — global constants and type definitions.

The customisation of the code depends on your choice of the routing mechanism. One can choose between two routing mechanisms:

A: via appNavigationTree.config.tsx  file

B: via app router folders
 

If you choose A, then the customisation can be done as follows:

The main customisation file — config/appNavigationTree.config.tsx.
 

It allows you to configure::
 

• Sider items (SIDERNAMECONFIG, SUBSIDERNAMECONFIG);
   

• Headers (HEADERTITLECONFIG);
   

• Page titles (PAGETITLECONFIG, SUBPAGETITLECONFIG);
   

• Tabs (TABSCONFIG);
   

• Page actions that can filter, delete and sort tables items (SUBPAGEACTIONSCONFIG);
   

Users can add new sections by modifying the structure sideritem → subSiderNavigation → headeritem.
 

If you choose Option B, then the customisation can be done as follows:
 

Each folder inside /app represents a route, and each page.tsx within it is a page.
 

If desired, you can manually create custom pages in /app, maintaining the Ant Design layout structure: StyleProvider → Layout → Sider → Content → Header.
 

To add a new page, simply create a new folder and include a page.tsx file inside it.

The kit uses:
 

• SCSS-modules (*.module.scss) for local styles;
   

• Global styles: styles/global.scss, globalVariables.scss;
   

• Ant Design theme (via ConfigProvider and StyleProvider);
   

Custom theme in theme/index.tsx, where colors, sizes, typography, and components are overridden.

Zustand

The /store directory contains:

auth-store.ts — stores user data and authentication token;

table-store.ts — manages table state;

filter-store.ts — manages table filters.

Each store is wrapped in a provider (/store/providers) for convenient use within components

Auth

Authentication via NextAuth:

Configured in /app/api/auth/[...nextauth]/route.ts;

Supports Microsoft, Google, GitHub logins;

Works through the SessionWrapper.

Storage

server.ts, middleware.ts — server logic and SSR integration.
 

For building:

​

npm run build

​

npm start

 

The application after building is ready for deployment

There are no special requirements beyond the standard Next.js settings.