Skip to content
codexa

Web apps · React

Product inventory

Know what is on the shelf: stock levels, unit costs, suppliers and what needs reordering.

Use this templateRemix
Product inventory starter, as built from its own files
Starter screenshot captured from this template's own build at 1440×900. It shows the template as it ships, not output generated from a prompt.

What you get

An inventory list for a small shop or workshop: products with SKU, quantity on hand, unit cost and supplier, grouped by stock status so low and out-of-stock items stand out. The fields and sample products live in src/app.ts.

Files

Exactly what is copied into a new project: 12 files, nothing generated.

Raw data: GET /api/v1/templates/app-inventory

Explorer 12

src/app.ts
src/app.ts
import type { AppSpec } from "./types"; /** Everything this app shows. Edit freely. */export const app: AppSpec = {  "brand": "Stockroom",  "icon": "box",  "storageKey": "stockroom-products-v1",  "entity": {    "singular": "Product",    "plural": "Products"  },  "title": "Inventory",  "subtitle": "Ceramics shop, main storeroom",  "currency": "$",  "titleKey": "product",  "statusKey": "status",  "tones": {    "In stock": "good",    "Low stock": "warn",    "Out of stock": "bad",    "Discontinued": "neutral"  },  "views": [    "table",    "board"  ],  "fields": [    {      "key": "product",      "label": "Product",      "type": "text",      "required": true    },    {      "key": "sku",      "label": "SKU",      "type": "text"    },    {      "key": "quantity",      "label": "On hand",      "type": "number"    },    {      "key": "unitCost",      "label": "Unit cost",      "type": "money"    },    {      "key": "supplier",      "label": "Supplier",      "type": "text"    },    {      "key": "reorder",      "label": "Reorder by",      "type": "date"    },    {      "key": "status",      "label": "Status",      "type": "select",      "options": [        "In stock",        "Low stock",        "Out of stock",        "Discontinued"      ]    }  ],  "summary": [    {      "label": "Products",      "kind": "count"    },    {      "label": "Units on hand",      "kind": "sum",      "field": "quantity"    },    {      "label": "Low stock",      "kind": "count",      "status": "Low stock"    },    {      "label": "Out of stock",      "kind": "count",      "status": "Out of stock"    }  ],  "seed": [    {      "product": "Speckled stoneware mug, 12 oz",      "sku": "MUG-SPK-12",      "quantity": 148,      "unitCost": 6.4,      "supplier": "Riverside Kilnworks",      "reorder": "2026-12-01",      "status": "In stock"    },    {      "product": "Matte white dinner plate",      "sku": "PLT-WHT-27",      "quantity": 22,      "unitCost": 9.8,      "supplier": "Riverside Kilnworks",      "reorder": "2026-11-04",      "status": "Low stock"    },    {      "product": "Ash glaze serving bowl",      "sku": "BWL-ASH-L",      "quantity": 0,      "unitCost": 18.5,      "supplier": "Hollow Oak Pottery",      "reorder": "2026-10-30",      "status": "Out of stock"    },    {      "product": "Linen napkin set of 4",      "sku": "NAP-LIN-4",      "quantity": 64,      "unitCost": 11.2,      "supplier": "Weft & Warp",      "reorder": "2026-12-15",      "status": "In stock"    },    {      "product": "Terracotta herb pot, small",      "sku": "POT-TER-S",      "quantity": 9,      "unitCost": 4.75,      "supplier": "Hollow Oak Pottery",      "reorder": "2026-11-02",      "status": "Low stock"    },    {      "product": "Olive wood spoon",      "sku": "SPN-OLV",      "quantity": 210,      "unitCost": 3.1,      "supplier": "Grove Woodcraft",      "reorder": "2027-01-10",      "status": "In stock"    },    {      "product": "Blue rim pasta bowl",      "sku": "BWL-BLU-M",      "quantity": 14,      "unitCost": 12,      "supplier": "Riverside Kilnworks",      "reorder": "2026-11-20",      "status": "Discontinued"    },    {      "product": "Stoneware teapot, 1 L",      "sku": "TEA-STN-1L",      "quantity": 0,      "unitCost": 24,      "supplier": "Hollow Oak Pottery",      "reorder": "2026-10-31",      "status": "Out of stock"    }  ]};

Remix

Remix this template

Describe what to change and the agent starts from Product inventory's files. The box is already started for you: finish “Start from Product inventory and …”

Agent ready

Creates a free account first; your idea is carried over.

Dependencies

Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.

  • react^19.1.0
  • react-dom^19.1.0
  • vite^6.3.0
  • @vitejs/plugin-react^4.4.0
  • tailwindcss^4.1.0
  • @tailwindcss/vite^4.1.0
  • typescript^5.8.0

How it runs

Framework
Vite + React + TypeScript
Dev command
npm run dev
Build command
npm run build
Output directory
dist
Port
5173
Entry route
/

Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.

Keep browsing

All templates

Build on Product inventory

Create a free account, start from this template, and ask the AI agent to turn it into your app.

Use this templateAll templates