Basekit Framework

A high-fidelity, production-grade framework engineered for technical excellence. Basekit enforces a strict, token-driven architecture designed to scale seamlessly while maintaining absolute logic isolation across both React and Next.js deployments.

Logic Isolation

Strict separation between Containers (logic) and Components (UI). Ensures maintenance velocity and structural purity.

Automated Generation

Single-source-of-truth routing that automatically constructs your navigation, menus, and breadcrumbs.

Quick Start

# Initialize via NPX

$npx create-basekit@latest my-app

# Navigate and Start

$cd my-app && npm run dev

Routing Mastery

Basekit supports a generator-driven routing system for React. You define your domain model in src/routes/, and the framework automatically maps them to the URL, Sidebar, and Breadcrumbs.

Case 01: Basic Sidebar Link

Standard

A simple route that appears in the sidebar and navigates to a component.

{
  icon: <Users />,       // Icon shown in sidebar
  name: "Employees",     // Name shown in sidebar
  path: "employees",     // URL: /admin/employees
  element: <Employees /> // Component to render
}

Case 02: Nested Layouts (Outlet)

Hierarchical

Use <Outlet /> to render child routes within a parent layout.

{
  name: "Overview",
  path: "overview",
  element: <Outlet />, // Renders children here
  children: [
    { index: true, element: <Dashboard /> },
    { name: "Analytics", path: "analytics", element: <Analytics /> }
  ]
}

Case 03: Hidden Detail Routes

Advanced

Omit the name property to hide a route from the sidebar (e.g., ID-based details).

{
  path: "employees",
  element: <Outlet />,
  children: [
    { index: true, element: <List /> },
    { path: ":id", element: <Details /> } // Hidden from Sidebar
  ]
}

Case 04: Infinite Recursive Nesting

Enterprise

Basekit supports infinite nesting. Each child can have its own children array, which the Sidebar Generator will render as multi-level dropdowns.

{
  name: "Level 1",
  path: "l1",
  children: [
    {
      name: "Level 2",
      path: "l2",
      children: [
        { name: "Level 3", path: "l3", element: <DeepPage /> }
      ]
    }
  ]
}

Loadable Core (Performance)

For Vite/React deployments, every page in Basekit is lazy-loaded by default using the Loadable HOC to keep initial bundles minimal.

The HOC Pattern

The Loadable component wraps React.lazy() in a Suspense boundary. You can pass a custom Skeleton fallback per page to maintain visual stability during transitions.

// src/utils/Loadable.tsx
const Loadable = (Component, Fallback = PageSkeleton) => (props) => (
  <Suspense fallback={<Fallback />}>
    <Component {...props} />
  </Suspense>
);

Generator Core

Basekit provides a suite of automated utilities in src/utils/Generator/ for React projects. These utilities consume your route config to drive the UI dynamically.

Routes

Maps nested configs to React Router v7 objects.

Menus

Builds recursive sidebar items with active states.

Breadcrumbs

Flattens tree routes for linear path indicators.

Architecture Deep-Dive

The Container Pattern

Containers are located in src/pages/[Feature]/[Feature].tsx. They are responsible for data fetching using RTK Query hooks and managing local state.

Presentational Isolation

Child components in src/pages/[Feature]/Components/ must be stateless. They receive data through props, making them highly testable and reusable.

API Intelligence

Basekit integrates RTK Query with automated cache invalidation. Use the providesTags and invalidatesTagsproperties to ensure your UI is always synchronized with the server.

The List Pattern

Always provide a LIST tag for collection queries. When a mutation occurs, invalidating the LIST tag will trigger an automatic refetch of all components observing that collection.

// providesTags LIST pattern
providesTags: (result) => 
  result 
    ? [...result.map(({ id }) => ({ type: 'User', id })), { type: 'User', id: 'LIST' }] 
    : [{ type: 'User', id: 'LIST' }]

Architectural Sovereignty

Basekit is not just a template; it is a philosophy of **Architectural Sovereignty**. It empowers developers to build complex enterprise applications by providing a rigid structure that paradoxically offers absolute freedom of logic. By isolating state, optimizing rendering paths, and automating the mundane, we allow you to focus on what matters: the user experience.

Zero Boilerplate

Route configs drive the entire UI system automatically.

Type Safe

Strict TypeScript across API, State, and UI boundaries.

Production Ready

Pre-configured for security, performance, and scaling.