@developerankitkumar/create-reactforge

A CLI to scaffold a production-ready React + TypeScript admin dashboard starter — with MUI v9, SCSS architecture, authentication, server-side table, smart form fields, dynamic theming, and mock/real API support. License-verified download.

Quick Start

npx @developerankitkumar/create-reactforge my-new-app

Then run:

cd my-new-app
npm install
npm run dev

Requires a license key — format: AK-XXXXXXXX-XXXXXXXX-XXXXXXXX-XXXXXXXX

Interactive Setup

The CLI asks 4 questions:

| Step | Question | Options | |------|----------|---------| | 1 | Project name | Any lowercase name | | 2 | Default theme | System (recommended), Light, Dark | | 3 | API mode | Mock API (no backend needed), Real API | | 4 | Backend URL | Only asked when Real API is selected |

After answering, it:

1. Validates your license key against the license server
2. Downloads and extracts the starter template ZIP
3. Patches ThemeModeContext.tsx with your chosen theme
4. Creates .env with your API mode and base URL
5. Sets your project name in package.json
6. Generates a .gitignore

Stack

| Technology | Version | Purpose | |------------|---------|---------| | React | 19 | UI framework | | TypeScript | 5+ | Type safety | | Vite | 8 | Build tool | | MUI (Material UI) | v9 | UI component library | | React Router | v7 | Client-side routing | | SCSS | — | Styling architecture | | Axios | — | HTTP client | | Font Awesome Free | — | Icons |

Project Structure

src/
├── components/
│   ├── AppSnackbar/          → Global snackbar notification system
│   ├── CommonServerTable/    → Server-side table (search, sort, pagination, skeleton)
│   ├── ExcelImport/          → Excel file import with dialog preview
│   ├── FileDropZone/         → Drag-and-drop file upload zone
│   ├── ProtectedRoute.tsx    → Route guards (RequireAuth / RequireGuest)
│   ├── SectionHeading/       → Page section heading component
│   ├── SmartField/           → Unified form field (14+ kinds)
│   ├── StatusChip/           → Colored status badge chip
│   ├── TableActionBtn/       → Row action buttons (edit / delete / view)
│   ├── appButton/            → Custom styled MUI button wrapper
│   └── layout/
│       ├── Layout.tsx        → App shell with sidebar + topbar
│       ├── Sidebar/          → Collapsible sidebar navigation
│       └── Topbar/           → Top navigation bar with theme toggle
│
├── context/
│   ├── AuthContext.tsx       → Login state, user info, permissions
│   ├── PageHeaderContext.tsx → Dynamic page title/breadcrumb
│   └── ThemeModeContext.tsx  → Light / Dark / System theme + primary color
│
├── pages/
│   ├── Login/                → Login page with form validation
│   ├── dashboard/            → Overview/stats page
│   ├── users/                → User listing with CRUD (server-side table)
│   ├── components/           → Component showcase/demo page
│   └── NotFound/             → 404 page
│
├── services/
│   ├── httpClient.ts         → Axios instance with auth headers
│   ├── mockClient.ts         → Mock API client (reads from mock/ JSON)
│   ├── authApis.ts           → Login / logout / me API calls
│   └── userApis.ts           → User CRUD API calls
│
├── mock/
│   ├── login.json            → Mock login response
│   ├── me.json               → Mock current user
│   ├── users.json            → Mock user list
│   └── roles.json            → Mock roles list
│
├── interface/
│   ├── Auth.ts               → Auth types (LoginPayload, User, etc.)
│   ├── User.ts               → User model types
│   └── UserList.ts           → UserList response types
│
├── styles/
│   ├── main.scss             → Entry SCSS (imports all partials)
│   ├── abstracts/
│   │   ├── _variables.scss   → SCSS variables
│   │   ├── _mixins.scss      → SCSS mixins
│   │   └── _functions.scss   → SCSS functions
│   ├── base/
│   │   ├── _reset.scss       → CSS reset
│   │   ├── _global.scss      → Global styles + CSS token defaults
│   │   └── _typography.scss  → Typography scale
│   ├── layout/
│   │   ├── _dashboard.scss   → Dashboard layout styles
│   │   ├── _header.scss      → Header styles
│   │   └── _sidebar.scss     → Sidebar styles
│   └── themes/
│       ├── _light.scss       → Light theme CSS tokens
│       └── _dark.scss        → Dark theme CSS tokens
│
├── types/
│   └── global.ts             → Global TypeScript types
│
└── utils/
    ├── authHeaders.ts        → Helper to get auth headers
    ├── formatters.ts         → Date / currency formatters
    └── snackbar.ts           → Snackbar trigger helpers

Components

SmartField — Unified Form Field

One component for all form inputs. Supports 14+ kinds:

| kind | Value type | Description | |--------|-----------|-------------| | text | string | Plain text input | | password | string | Password with show/hide toggle | | email | string | Email input | | phone | string | Phone input with icon | | url | string | URL input with icon | | number | string \| number | Number input | | currency | string \| number | Number with currency symbol | | multiline / textarea | string | Multi-row text area | | date | string | MUI DatePicker (YYYY-MM-DD) | | time | string | Time input | | date-range | string | Two date pickers ("start,end") | | time-range | string | Two time inputs ("start,end") | | select | string \| string[] | Dropdown / multi-select / searchable | | radio | string | Radio button group | | toggle | boolean | Custom styled switch | | checkbox | boolean | Bordered checkbox (fully clickable) | | tags | string[] | Free-entry chip input | | slider | number | Range slider with percent display | | otp | string | Digit-by-digit OTP input | | rating | number | Star rating with value label | | file | string | File upload with filename display | | color | string | Color swatch picker (hex) |

Built-in: required validation, validate function, forceError, error (external), hint, size (small / medium), disabled.

CommonServerTable — Server-Side Data Table

Full-featured table with server-side search, sort, and pagination.

<CommonServerTable
  columns={columns}
  fetcher={fetchUsers}
  getRowId={(row) => row.id}
  actions={[editAction, deleteAction]}
  searchPlaceholder="Search users..."
  initialSortBy="name"
  reloadKey={reload}
/>

Features: skeleton loading, empty state, search debounce, column sort, page size selector, row action buttons.

AppSnackbar — Global Notifications

import { useSnackbar } from '@/utils/snackbar'

const snackbar = useSnackbar()
snackbar.success('Saved!')
snackbar.error('Something went wrong.')
snackbar.info('Loading...')
snackbar.warning('Check inputs.')

ExcelImport — Excel File Import

Drag-and-drop or click to select an .xlsx / .csv file. Shows a dialog preview of parsed rows before confirming import.

FileDropZone — File Upload Zone

Drag-and-drop zone for any file type. Configurable accept types, size limits, and upload callback.

StatusChip — Status Badge

<StatusChip status="active" />
<StatusChip status="inactive" />
<StatusChip status="pending" />

Color-coded MUI Chip with configurable status map.

TableActionBtn — Row Actions

<TableActionBtn
  actions={[
    { label: 'Edit',   icon: 'edit',   onClick: handleEdit   },
    { label: 'Delete', icon: 'delete', onClick: handleDelete },
  ]}
/>

SectionHeading — Page Section Title

<SectionHeading title="User Management" subtitle="Manage all registered users" />

AppButton — Styled Button

A wrapper around MUI Button that follows the project's theme color and size conventions.

Theming

The starter ships with Light, Dark, and System themes. Theme is toggled from the topbar.

CSS tokens (override in :root):

:root {
  --theme-color:      #6366f1;
  --surface:          #ffffff;
  --border:           #e2e8f0;
  --text-h:           #1e293b;
  --muted:            #94a3b8;
  --accent-tint:      #eef2ff;
  --secondary-color:  #ffffff;
}

You can also change the primary color at runtime — it updates MUI buttons, snackbars, and all SmartField accents dynamically.

Environment Variables

VITE_USE_MOCK=true            # true = Mock API, false = Real API
VITE_API_BASE_URL=            # Backend base URL (used when VITE_USE_MOCK=false)
VITE_NGROK_SKIP=              # Set to "true" to skip ngrok browser warning header

Authentication Flow

• Login page → calls /api/v1/auth/login (or mock)
• Token stored in localStorage
• AuthContext exposes user, isLoggedIn, login(), logout()
• RequireAuth / RequireGuest route guards redirect accordingly
• httpClient auto-attaches Authorization: Bearer <token> to every request

Mock API Mode

When VITE_USE_MOCK=true, all API calls are intercepted by mockClient.ts and return data from src/mock/*.json. No backend needed — ideal for frontend development and demos.

Pages

| Route | Page | Description | |-------|------|-------------| | /admin/login | Login | Auth page (guest only) | | /admin/dashboard | Dashboard | Stats overview | | /admin/users | Users | Server-side user table with CRUD | | /admin/components | Components | SmartField + component showcase | | * | NotFound | 404 page |

License

MIT — template requires a valid ReactForge license key to download.

Get your license key at ankitdeveloper.site