A complete, data-driven admin dashboard built with React and Codehooks.io. Define your data model once in JSON, and get a full admin interface with CRUD, authentication, and a visual editor — ready to deploy in minutes.

Collection List View	Detail View

Visual Datamodel Editor	Data Relations

Building admin dashboards from scratch is repetitive. You end up writing the same CRUD forms, list views, auth flows, and user management over and over. This template eliminates that boilerplate — you describe your data model in a single JSON file, and the app generates everything dynamically: collections, forms, search, filters, and relationships.

It's designed as a starting point for real projects. The datamodel is editable at runtime through a visual editor or JSON, so you can iterate without redeploying. Want to build something completely new? Copy the built-in prompt to your favorite AI agent, describe your system, paste the result back — and your new application is live in seconds. Authentication and role-based access control are built in, with a clean separation that makes it easy to swap in Clerk.com or another auth provider later.

A monorepo with a React frontend and a Codehooks.io serverless backend that work together to deliver:

• Dynamic CRUD — Collections, list views, detail panels, and forms generated from datamodel.json, with a full REST API and dynamic OpenAPI/Swagger documentation at https://<YOUR_APP_URL>.codehooks.io/docs that automatically reflects the current datamodel
• Authentication — JWT-based login with cookie sessions, two roles (admin/user), user management UI
• Visual Datamodel Editor — Add/remove collections and fields, configure relationships, edit as JSON with syntax highlighting, version history with rollback
• AI-Powered Design — Copy the built-in prompt to ChatGPT, Claude, or any AI agent, describe what you need, paste the generated datamodel JSON back into the editor, hit Save — and your new app is live instantly
• Lookup Fields — Reference fields across collections with live search (single and multi-select)
• Calculated Fields — Server-computed formula fields (price * quantity) with autocomplete editor, dependency ordering, and automatic recalculation
• Tree View — Hierarchical data with expandable tree lists, nested sub-items in detail view, and inline child creation
• Related Collections — Show linked records with configurable filters and inline create
• Activity Log — Audit trail for all create, update, and delete operations
• File Uploads — Image and file upload with preview
• Dashboard — Collection stats and recent activity overview
• Dark Mode — Theme toggle with system preference support
• Responsive — Collapsible sidebar, mobile-friendly layout

┌─────────────────────────────────────────────┐
│              datamodel.json                 │
│  (collections, schemas, relationships)      │
└──────────┬──────────────────┬───────────────┘
           │                  │
           ▼                  ▼
┌──────────────────┐ ┌──────────────────────┐
│  Backend         │ │  Frontend            │
│  (Codehooks.io)  │ │  (React + Vite)      │
│                  │ │                      │
│  - JWT auth      │ │  - Dynamic CRUD UI   │
│  - REST API      │ │  - Datamodel editor  │
│  - User mgmt     │ │  - Role-based views  │
│  - Activity log  │ │  - Dashboard         │
│  - File storage  │ │  - Activity log      │
│  - Schema valid. │ │  - User management   │
└──────────────────┘ └──────────────────────┘

The datamodel.json file is only used for initial bootstrap — on first deploy, it seeds the datamodel into the database. From that point on, all schema changes are stored in the database with full version history and easy rollback. The frontend fetches the live datamodel at runtime via /api/datamodel and renders the UI dynamically. Changes made through the visual editor take effect immediately without redeploying.

npm i -g codehooks
coho login

coho create myadmin --template react-admin-dashboard
mv config.json backend
cd myadmin

Or install into an existing directory:

mkdir myadmin && cd myadmin
coho install react-admin-dashboard

coho set-env JWT_ACCESS_TOKEN_SECRET $(openssl rand -hex 32)
coho set-env JWT_REFRESH_TOKEN_SECRET $(openssl rand -hex 32)

npm run install:all

Get your project URL:

coho info

Update frontend/vite.config.js with your project URL:

const BACKEND_URL = 'https://YOUR_PROJECT.api.codehooks.io/dev';

Note: The BACKEND_URL (including the space path, e.g. /dev) is only used by the Vite dev server to proxy API calls during local development. It is not used in production.

npm run deploy

Navigate to your project URL. Default credentials:

• Admin: admin / admin ([email protected])
• User: user / user ([email protected])

On first deploy, the app automatically seeds these two users if the system_users collection is empty.

Codehooks.io provides two distinct URLs for each project. It's important to understand the difference:

The App URL has an auto-generated synthetic name (e.g. unyielding-desert-f8c4) and serves the static frontend files. This is where you open the app in your browser:

https://unyielding-desert-f8c4.codehooks.io

The API URL uses your logical project name (e.g. myproject) and includes the space sub-path (/dev, /prod, etc.). This is used for all API and auth requests:

https://myproject.api.codehooks.io/dev/api/customers
https://myproject.api.codehooks.io/dev/auth/login

The React app handles this routing internally — API calls use the space path automatically. You only need the API URL in frontend/vite.config.js for the local dev server proxy.

Custom domains are supported by Codehooks.io. Point your own domain (e.g. admin.yourcompany.com) to the App URL and an automatic Let's Encrypt TLS certificate will be provisioned. Users then access the app via your custom domain, while API routing continues to work transparently.

Run the frontend dev server with hot reload:

npm run dev

The Vite dev server (port 5173) proxies /api and /auth requests to your Codehooks backend. Edit React components and see changes instantly.

To deploy after making changes:

npm run deploy

This builds the frontend into backend/dist/ and deploys everything to Codehooks.io.

The datamodel.json file seeds the initial datamodel into the database on first deploy. After that, all changes are managed through the visual Datamodel Editor (admin only) or the JSON tab — stored in the database with full version history and rollback support. No redeployment needed.

All datamodel updates (via the editor or PUT /api/datamodel) are validated against the master schema defined in backend/datamodel-schema.js. The structure below documents every property at each level.

The top-level datamodel object:

app object:

Each collection (collections.<name>):

schema object (per collection):

Each field (schema.properties.<name>):

x-lookup object (for reference fields):

relatedCollections[] items:

filters[] items (inside relatedCollections):

treeView object (per collection):

{
  "app": {
    "title": "My App",
    "subtitle": "Admin Dashboard",
    "icon": "zap"
  }
}

The icon field accepts any key from the Lucide icon set that's included in the icon map (e.g., zap, shield, globe, star, home, briefcase, layers).

{
  "collections": {
    "customers": {
      "label": "Customers",
      "icon": "users",
      "schema": {
        "type": "object",
        "properties": {
          "name": { "type": "string", "title": "Full Name", "minLength": 1 },
          "email": { "type": "string", "format": "email", "title": "Email" },
          "status": { "type": "string", "enum": ["active", "inactive", "lead"], "title": "Status" }
        },
        "required": ["name"]
      },
      "listFields": ["name", "email", "status"],
      "searchFields": ["name", "email"],
      "defaultSort": { "name": 1 }
    }
  }
}

Reference records from other collections:

{
  "customer": {
    "type": "object",
    "title": "Customer",
    "properties": { "_id": { "type": "string" } },
    "x-lookup": {
      "collection": "customers",
      "displayField": "name",
      "searchFields": ["name", "email"]
    }
  }
}

Show linked records in the detail view:

{
  "relatedCollections": [
    {
      "collection": "orders",
      "foreignKey": "customer._id",
      "title": "Orders",
      "displayFields": ["orderNumber", "total", "status"],
      "sort": { "orderDate": -1 },
      "allowCreate": true,
      "filters": [
        { "field": "status", "value": "active", "label": "Active only", "active": true }
      ]
    }
  ]
}

Enable an expandable tree view for collections with hierarchical data — tasks with subtasks, categories with subcategories, page trees, org charts, etc. Add a self-referencing lookup field and a treeView config:

{
  "tasks": {
    "label": "Tasks",
    "icon": "check-square",
    "treeView": {
      "parentField": "parent"
    },
    "schema": {
      "type": "object",
      "properties": {
        "title": { "type": "string", "title": "Title", "minLength": 1 },
        "parent": {
          "type": "object",
          "title": "Parent Task",
          "properties": { "_id": { "type": "string" } },
          "x-lookup": {
            "collection": "tasks",
            "displayField": "title",
            "searchFields": ["title"]
          }
        },
        "status": { "type": "string", "title": "Status", "enum": ["To Do", "Done"] }
      },
      "required": ["title"]
    },
    "listFields": ["title", "status"],
    "searchFields": ["title"]
  }
}

The parent field is a standard x-lookup that points to the same collection. The treeView.parentField tells the UI to render hierarchically instead of as a flat list.

List view — Records render as an indented tree with expand/collapse chevrons. Root items (no parent) appear at the top level. Hover any row to see a "+" button for adding a child. Search filters to matching items while preserving ancestor nodes so the tree structure stays valid.

Detail view — When viewing a record that has children, a "Sub-items" section appears below the form fields showing the nested tree. Each node has a "+" button, and a top-level "+ New" creates a direct child of the current record.

Visual editor — In the Model Editor's Options section, a Tree view dropdown appears automatically when a collection has a self-referencing lookup field. Select the parent field to enable, or "None" to disable.

Add server-computed fields to number or integer fields using the x-calculate property. Formulas are evaluated on the backend when records are created or updated, and the result is stored in the database — making calculated fields searchable and sortable like any other field.

{
  "schema": {
    "type": "object",
    "properties": {
      "price": { "type": "number", "title": "Unit Price" },
      "quantity": { "type": "integer", "title": "Quantity" },
      "subtotal": {
        "type": "number",
        "title": "Subtotal",
        "x-calculate": "price * quantity"
      },
      "tax": {
        "type": "number",
        "title": "Tax (25%)",
        "x-calculate": "subtotal * 0.25"
      },
      "total": {
        "type": "number",
        "title": "Total",
        "x-calculate": "subtotal + tax"
      }
    }
  }
}

Supported formula syntax:

Not supported:

• Functions (e.g., Math.round(), SUM(), IF())
• String operations or concatenation
• Comparison operators (>, <, ==)
• Conditional logic (if/else, ternary)
• Variables or assignments
• Aggregation across multiple records

How it works:

• Computed on write — Formulas run server-side on every create and update. The result is stored in the database, so you can search, sort, and filter on calculated fields just like regular fields.
• Dependency ordering — When multiple calculated fields reference each other (e.g., tax depends on subtotal), they are automatically evaluated in the correct order using topological sorting. Circular dependencies are detected and logged.
• Lookup resolution — Formulas can reference fields from lookup documents using dot notation (e.g., product.price). The full referenced document is fetched from the database before evaluation.
• Recalculation on schema change — When a formula is added, modified, or removed in the datamodel editor, all existing records in that collection are automatically recalculated via a background worker.
• Read-only in forms — Calculated fields are displayed with an "fx" indicator and cannot be edited manually.
• Precision — Results are rounded to 10 significant decimal places to avoid floating-point artifacts.
• Null propagation — If any referenced field is missing or not a number, the formula returns null (the field is not set).

Datamodel Editor — The visual editor provides a formula input with autocomplete for number and integer fields. Start typing to see suggestions for available field names and lookup subfields. Use Ctrl+Space to trigger suggestions manually.

The Datamodel Editor includes a Copy Prompt button that generates a context-rich prompt describing the current datamodel format, field types, and conventions. Use it with any AI agent to design new applications or modify existing ones:

1. Open the Datamodel Editor and click Copy Prompt
2. Paste it into ChatGPT, Claude, Cursor, or any AI tool
3. Describe what you want: "Build me a project management app with tasks, projects, and team members"
4. Copy the generated JSON datamodel from the AI response
5. Paste it into the JSON tab in the editor and click Save

Your new collections, fields, relationships, and UI are live instantly — no code changes, no redeployment. Combined with version history, you can experiment freely and roll back anytime.

The sidebar dynamically hides admin sections for non-admin users. Direct URL access to admin pages redirects to the dashboard.

The JWT token and auth responses (/auth/login, /auth/me) include username, email, and role. The user's email is available in the frontend via useAuth() as user.email, which is useful for custom features like filtering records by the logged-in user's email or auto-filling form fields.

The app includes a full CRUD REST API with interactive documentation. Open API Docs from the admin sidebar or navigate directly to https://<YOUR_APP_URL>.codehooks.io/docs to explore all endpoints via the built-in Swagger UI.

The OpenAPI specification is generated dynamically from the current datamodel stored in the database. When you add or modify collections through the Datamodel Editor (or PUT /api/datamodel), the API docs at /docs update automatically — no redeployment needed. Each collection gets its own set of CRUD endpoints with request/response schemas derived from the collection's field definitions.

List endpoints support:

• q — JSON query filter (e.g., q={"status":"active"})
• h — Hints object with $sort, $limit, $offset, $fields

Example: /api/customers?q={"status":"active"}&h={"$sort":{"name":1},"$limit":25}

├── datamodel.json              # Initial datamodel (seeds database on first deploy)
├── package.json                # Root scripts (dev, build, deploy, install:all)
│
├── backend/
│   ├── index.js                # Auth, CRUD API, user management, activity log
│   ├── calculate.js            # Safe expression evaluator for calculated fields
│   ├── schema-builder.js       # JSON Schema validation builder
│   ├── datamodel-schema.js     # Validation schema for datamodel updates
│   ├── hooks.js                # Placeholder for before/after CRUD hooks
│   └── package.json
│
└── frontend/
    ├── vite.config.js           # Vite config with backend proxy
    └── src/
        ├── App.jsx              # Routes with auth guards
        ├── api/
        │   └── collectionApi.js # API client (CRUD, auth, user mgmt)
        ├── contexts/
        │   └── AuthContext.jsx  # Auth state, login/logout, isAdmin
        ├── pages/
        │   ├── DashboardPage    # Stats and recent activity
        │   ├── CollectionPage   # Dynamic master-detail CRUD
        │   ├── DatamodelPage    # Visual + JSON datamodel editor
        │   ├── UsersPage        # User management (admin)
        │   ├── ActivityLogPage  # Audit trail with filters
        │   └── LoginPage        # Authentication
        ├── components/
        │   ├── AppSidebar       # Dynamic navigation from datamodel
        │   ├── Layout           # Shell with breadcrumbs
        │   ├── MasterList       # List view with search/pagination
        │   ├── DetailPanel      # Record detail with form
        │   ├── FormField        # Schema-driven input renderer
        │   ├── LookupField      # Single lookup with search
        │   ├── MultiLookupField # Multi-select lookup
        │   ├── FileField        # File/image upload
        │   ├── TreeList         # Hierarchical tree table view
        │   ├── ChildrenTree     # Sub-items tree in detail view
        │   ├── RelatedList      # Related collection records
        │   ├── FormulaEditor    # Formula input with autocomplete
        │   ├── OptionsEditor    # Datamodel options editor
        │   └── FieldEditorDrawer# Field type/validation editor
        └── lib/
            └── iconMap.js       # Lucide icon name mapping

Add entries to frontend/src/lib/iconMap.js:

import { Rocket } from 'lucide-react';

const iconMap = {
  // ... existing icons
  'rocket': Rocket,
};

If you created your project with coho create --template react-admin-dashboard and haven't modified the template code (only changed the datamodel), you can pull in the latest bugfixes and features by re-installing:

cd your-project
coho install react-admin-dashboard
npm run deploy

This overwrites the template files (backend/index.js, frontend/src/*, etc.) with the latest version. Your data, datamodel, and users are safe — they live in the Codehooks datastore, not in files. The datamodel.json file is only used for the initial seed; after first deploy, the database is the source of truth.

When this works:

• You've only customized the datamodel (via the visual editor or JSON)
• You haven't modified backend/index.js, frontend components, or other template files

When it doesn't work:

• You've added custom backend endpoints or changed auth logic
• You've modified frontend components or added new pages
• In those cases, review the commit history and apply specific changes manually

• Codehooks.io Documentation
• shadcn/ui Components
• Tailwind CSS
• Lucide Icons

MIT

For issues and questions:

• GitHub Issues