[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_285":286,"_287":288},"routes/_app.x.$handle.$name",{"_109":108,"_38":50,"_118":95,"_33":119,"_13":14,"_120":-5,"_11":121,"_122":123,"_124":125,"_126":127,"_128":129,"_26":-5,"_130":131,"_132":133,"_134":31,"_135":136,"_137":65,"_138":-5,"_139":-5,"_140":141},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",11,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","a9865f3d-2506-4ad5-87bf-eadf1764b9fc","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","019f60ae-3a0b-7638-a394-339ae031064b","name","fileType","content","# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n","# Val Store\n\nA basic storefront scaffold with a product catalog, category filtering, and a\nshopping cart — built with React + Hono on Val Town.\n\n## Features\n\n- 📦 Product catalog stored in SQLite (auto-seeded on first load)\n- 🏷️ Category filter pills\n- 🛒 Slide-out cart drawer with quantity controls\n- 🎨 Tailwind styling via Twind (zero build step)\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|GET /| Hono[\"index.ts (Hono)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|GET /api/products| Hono\n Hono -->|queries| DB[\"db.ts → SQLite\"]\n App -->|renders| Grid[\"ProductCard.tsx\"]\n App -->|renders| Cart[\"Cart.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono server (API + static files)\ndb.ts ← SQLite schema, seed data, queries\nfrontend/\n index.html ← HTML shell (Twind + React)\n index.tsx ← React entrypoint\n components/\n App.tsx ← Root: layout, state, data fetching\n Header.tsx ← Sticky header with cart button\n ProductCard.tsx ← Single product card\n Cart.tsx ← Slide-out cart drawer\n```\n\n## API endpoints\n\n| Method | Path | Description |\n|--------|------|-------------|\n| GET | `/api/products` | List all products (optional `?category=` filter) |\n| GET | `/api/products/:id` | Get a single product |\n| GET | `/api/categories` | List distinct categories |\n\n## Next steps\n\n- Add a product detail page\n- Wire up checkout (Stripe, etc.)\n- Add an admin panel for product CRUD\n- Persist cart in localStorage\n- Add user authentication via `std/oauth`\n","createdAt",["D",1784033532347],"branchVersion","branchId","ab1d8fe1-997f-4502-8b3e-0a661f4e8795","id","c27f35f7-55b7-4a43-82bb-3f5208bbb8e0","storefront",["D",1784033458626],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Storefront scaffold with product catalog, cart, and SQLite","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789534799&sig=2fe932419d898cd124d0961cab25a5a9c3bd76c8b30cb3b9e71257c7b34e60a2","65ff630e-a0de-4e5b-89b8-81e539f3f5e5","pinnedFileId","019f60ae-3a0b-7638-a394-373fee1ee941","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f514b-ab16-7228-9e83-fc4fd7410df2","tursoName","c27f35f755b74a4382bb3f5208bbb8e0","tursoHostname","c27f35f755b74a4382bb3f5208bbb8e0-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789471840176],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_109":108,"_117":113},"org",{"_109":108,"_110":111,"_112":113,"_19":61,"_114":115,"_116":31},"branch",{"_13":14,"_38":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"isOwned","main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","nrg3k","handle","displayName","David Mark","avatar","https://lh3.googleusercontent.com/a/ACg8ocJPll0Xu0o18YsRjrtshzairZ1Ki_bnPS9Tv2zt8grl0pnhCipB=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_38":50,"_43":280,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":281,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":282,"_90":283,"_92":284,"_94":31},"tree",[195,204,205,206],"files",[195,196,197,198,199,200,201,202,203,204,205,206],"counts",{"_185":69,"_186":163,"_187":69,"_188":189,"_190":191},"contents",[153,154,155,156],"upstreamProject",{"_48":103,"_38":149,"_57":150,"_59":60,"_54":55,"_88":151},"upstreamBranch",{"_48":98,"_43":142,"_143":144,"_38":95,"_96":103,"_13":145,"_97":-5,"_99":-5,"_146":147,"_52":-5,"_94":31,"_54":55,"_107":148,"_70":105,"_106":149},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_109":148,"_117":152},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789534799&sig=94d49ad984a50880ef894a3794e08842e7b9b626be771ff48da114d7d9a149ed",{"_48":179,"_38":180,"_36":181,"_159":-5,"_46":47,"_45":163,"_161":65,"_43":182,"_13":69,"_39":183,"_40":-5,"_30":31,"_166":-5,"_33":184},{"_48":176,"_38":34,"_36":37,"_159":-5,"_46":47,"_45":14,"_161":65,"_43":177,"_13":163,"_39":26,"_40":42,"_30":31,"_166":-5,"_33":178},{"_48":168,"_38":169,"_36":170,"_159":-5,"_46":47,"_45":171,"_161":65,"_43":172,"_13":69,"_39":173,"_40":174,"_30":31,"_166":-5,"_33":175},{"_48":157,"_38":158,"_36":63,"_159":-5,"_46":47,"_45":160,"_161":65,"_43":162,"_13":163,"_39":164,"_40":165,"_30":31,"_166":-5,"_33":167},"890ef356-b839-4bd0-8de6-6c735b1e7001","index.ts","parentId",6,"latest",["D",1784033507736],1,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { initDB, getProducts, getProduct, getCategories } from \"./db.ts\";\n\nconst app = new Hono();\n\n// Initialize database on first load\napp.use(\"*\", async (_c, next) => {\n await initDB();\n await next();\n});\n\n// --- API routes ---\n\napp.get(\"/api/products\", async (c) => {\n const category = c.req.query(\"category\") ?? \"all\";\n const products = await getProducts(category);\n return c.json(products);\n});\n\napp.get(\"/api/products/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const product = await getProduct(id);\n if (!product) return c.json({ error: \"Not found\" }, 404);\n return c.json(product);\n});\n\napp.get(\"/api/categories\", async (c) => {\n const categories = await getCategories();\n return c.json(categories);\n});\n\n// --- Static file serving ---\n\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[158],"427e7a74-c442-4b12-b2c1-bb8b6f2d7008","db.ts","ba675052-7f82-11f1-9dca-1607ee4eb77e",4,["D",1784033487407],"script","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport interface Product {\n id: number;\n name: string;\n description: string;\n price: number;\n image: string;\n category: string;\n}\n\nexport async function initDB() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS products (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n description TEXT NOT NULL,\n price REAL NOT NULL,\n image TEXT NOT NULL,\n category TEXT NOT NULL\n )\n `);\n\n // Seed sample products if table is empty\n const count = await sqlite.execute(\"SELECT COUNT(*) as n FROM products\");\n if (count.rows[0].n === 0) {\n await sqlite.batch([\n { sql: \"INSERT INTO products (name, description, price, image, category) VALUES (?, ?, ?, ?, ?)\", args: [\"Wireless Headphones\", \"Noise-cancelling over-ear headphones with 30hr battery.\", 129.99, \"🎧\", \"Electronics\"] },\n { sql: \"INSERT INTO products (name, description, price, image, category) VALUES (?, ?, ?, ?, ?)\", args: [\"Mechanical Keyboard\", \"Hot-swappable 75% mechanical keyboard with RGB backlight.\", 89.00, \"⌨️\", \"Electronics\"] },\n { sql: \"INSERT INTO products (name, description, price, image, category) VALUES (?, ?, ?, ?, ?)\", args: [\"Coffee Mug\", \"Ceramic 12oz mug, dishwasher safe.\", 12.50, \"☕\", \"Home\"] },\n { sql: \"INSERT INTO products (name, description, price, image, category) VALUES (?, ?, ?, ?, ?)\", args: [\"Notebook\", \"Hardcover dotted notebook, 192 pages.\", 18.00, \"📔\", \"Stationery\"] },\n { sql: \"INSERT INTO products (name, description, price, image, category) VALUES (?, ?, ?, ?, ?)\", args: [\"Desk Plant\", \"Small succulent in a terracotta pot.\", 15.99, \"🪴\", \"Home\"] },\n { sql: \"INSERT INTO products (name, description, price, image, category) VALUES (?, ?, ?, ?, ?)\", args: [\"USB-C Cable\", \"Braided 6ft USB-C to USB-C cable, 100W.\", 9.99, \"🔌\", \"Electronics\"] },\n { sql: \"INSERT INTO products (name, description, price, image, category) VALUES (?, ?, ?, ?, ?)\", args: [\"Water Bottle\", \"Insulated stainless steel 24oz bottle.\", 24.00, \"🍶\", \"Home\"] },\n { sql: \"INSERT INTO products (name, description, price, image, category) VALUES (?, ?, ?, ?, ?)\", args: [\"Pen Set\", \"Set of 5 gel pens, 0.5mm black ink.\", 7.50, \"🖊️\", \"Stationery\"] },\n ]);\n }\n}\n\nexport async function getProducts(category?: string): Promise {\n if (category && category !== \"all\") {\n const result = await sqlite.execute({\n sql: \"SELECT * FROM products WHERE category = ? ORDER BY id\",\n args: [category],\n });\n return result.rows as Product[];\n }\n const result = await sqlite.execute(\"SELECT * FROM products ORDER BY id\");\n return result.rows as Product[];\n}\n\nexport async function getProduct(id: number): Promise {\n const result = await sqlite.execute({\n sql: \"SELECT * FROM products WHERE id = ?\",\n args: [id],\n });\n return (result.rows[0] as Product) ?? null;\n}\n\nexport async function getCategories(): Promise {\n const result = await sqlite.execute(\"SELECT DISTINCT category FROM products ORDER BY category\");\n return result.rows.map((r) => r.category as string);\n}\n",[169],"4683fa9c-7e83-4d59-b194-82ae63b20cf6",["D",1784033532347],[34],"5f51aab6-c403-4f1c-b0d3-b20d97e5a17b","frontend","019f60ae-3a0b-7638-a394-2ee8129f18ff",["D",1784033458626],"directory",[180],"pulls","branches","forks","envVars",{"_192":69,"_194":69},"connections",{"_192":69,"_193":69},"count","unfilledCount","emptyCount",{"_48":179,"_38":180,"_36":181,"_159":-5,"_46":47,"_45":163,"_161":65,"_43":277,"_13":69,"_39":183,"_40":-5,"_30":31,"_166":-5,"_208":278,"_33":279},{"_48":273,"_38":248,"_36":243,"_159":181,"_46":47,"_45":163,"_161":65,"_43":274,"_13":69,"_39":183,"_40":-5,"_30":31,"_166":-5,"_208":275,"_33":276},{"_48":265,"_38":266,"_36":267,"_159":243,"_46":47,"_45":268,"_161":65,"_43":269,"_13":163,"_39":173,"_40":270,"_30":31,"_166":-5,"_208":271,"_33":272},{"_48":257,"_38":258,"_36":259,"_159":243,"_46":47,"_45":260,"_161":65,"_43":261,"_13":69,"_39":173,"_40":262,"_30":31,"_166":-5,"_208":263,"_33":264},{"_48":249,"_38":250,"_36":251,"_159":243,"_46":47,"_45":252,"_161":65,"_43":253,"_13":69,"_39":173,"_40":254,"_30":31,"_166":-5,"_208":255,"_33":256},{"_48":240,"_38":241,"_36":242,"_159":243,"_46":47,"_45":229,"_161":65,"_43":244,"_13":69,"_39":173,"_40":245,"_30":31,"_166":-5,"_208":246,"_33":247},{"_48":233,"_38":234,"_36":235,"_159":181,"_46":47,"_45":163,"_161":65,"_43":236,"_13":69,"_39":26,"_40":237,"_30":31,"_166":-5,"_208":238,"_33":239},{"_48":224,"_38":225,"_36":226,"_159":181,"_46":47,"_45":227,"_161":65,"_43":228,"_13":229,"_39":26,"_40":230,"_30":31,"_166":-5,"_208":231,"_33":232},{"_48":217,"_38":218,"_36":219,"_159":181,"_46":47,"_45":163,"_161":65,"_43":220,"_13":69,"_39":173,"_40":221,"_30":31,"_166":-5,"_208":222,"_33":223},{"_48":176,"_38":34,"_36":37,"_159":-5,"_46":47,"_45":14,"_161":65,"_43":214,"_13":163,"_39":26,"_40":42,"_30":31,"_166":-5,"_208":215,"_33":216},{"_48":168,"_38":169,"_36":170,"_159":-5,"_46":47,"_45":171,"_161":65,"_43":211,"_13":69,"_39":173,"_40":174,"_30":31,"_166":-5,"_208":212,"_33":213},{"_48":157,"_38":158,"_36":63,"_159":-5,"_46":47,"_45":160,"_161":65,"_43":207,"_13":163,"_39":164,"_40":165,"_30":31,"_166":-5,"_208":209,"_33":210},["D",1784033507736],"children",[],[158],["D",1784033487407],[],[169],["D",1784033532347],[],[34],"3fb6cd30-3f9e-462d-9f4f-7db70e01ce31","index.tsx","019f60ae-3a0b-7638-a394-29f38674337b",["D",1784033458626],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[180,218],"d244209a-bf70-4f50-97e6-e6da756768e3","index.html","019f60ae-3a0b-7638-a394-255b497f2a66",9,["D",1784033532330],2,"\n\n \n \n \n Val Store — Shop\n \n \n \n \n

\n \n \n \n",[],[180,225],"b03a1c56-183e-48a8-ab19-4eadd4cbd79c","favicon.svg","019f60ae-3a0b-7638-a394-22f8e3388e8f",["D",1784033458626],"\n",[],[180,234],"8d46797b-aa95-4ca6-8793-af0590ae7a7d","ProductCard.tsx","ba59b44c-7f82-11f1-a62e-1607ee4eb77e","019f60ae-3a0b-7638-a394-1cc1195556ec",["D",1784033487395],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport interface Product {\n id: number;\n name: string;\n description: string;\n price: number;\n image: string;\n category: string;\n}\n\ninterface ProductCardProps {\n product: Product;\n onAddToCart: (product: Product) => void;\n}\n\nexport function ProductCard({ product, onAddToCart }: ProductCardProps) {\n return (\n

\n {product.image}\n

{product.name}

\n \n {product.category}\n \n

{product.description}

\n \n ${product.price.toFixed(2)}\n \n onAddToCart(product)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n Add to Cart\n \n

\n );\n}\n",[],[180,248,241],"components","0ae110c1-ec06-420d-b35f-77fa04f2bfb0","Header.tsx","ba602804-7f82-11f1-bb4e-1607ee4eb77e",3,["D",1784033487397],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface HeaderProps {\n cartCount: number;\n onCartClick: () => void;\n}\n\nexport function Header({ cartCount, onCartClick }: HeaderProps) {\n return (\n

\n 🛍️ Val Store\n

\n \n 🛒\n Cart\n {cartCount > 0 && (\n \n {cartCount}\n \n )}\n \n

\n );\n}\n",[],[180,248,250],"8512030c-baeb-4adc-876d-dbff547e02c8","Cart.tsx","ba740ce8-7f82-11f1-943d-1607ee4eb77e",5,["D",1784033487410],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport interface CartItem {\n id: number;\n name: string;\n price: number;\n image: string;\n quantity: number;\n}\n\ninterface CartProps {\n items: CartItem[];\n open: boolean;\n onClose: () => void;\n onRemove: (id: number) => void;\n onUpdateQty: (id: number, delta: number) => void;\n}\n\nexport function Cart({ items, open, onClose, onRemove, onUpdateQty }: CartProps) {\n const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);\n const totalItems = items.reduce((sum, item) => sum + item.quantity, 0);\n\n return (\n <>\n {/* Backdrop */}\n {open && (\n \n )}\n {/* Drawer */}\n \n

Your Cart ({totalItems})

\n \n ✕\n \n

\n\n {items.length === 0 ? (\n

\n 🛒\n

Your cart is empty

\n ) : (\n <>\n

\n {items.map((item) => (\n

\n {item.image}\n

{item.name}

${item.price.toFixed(2)}

\n onUpdateQty(item.id, -1)}\n class=\"w-7 h-7 rounded bg-gray-100 hover:bg-gray-200 text-gray-700 cursor-pointer\"\n >\n −\n \n {item.quantity}\n onUpdateQty(item.id, 1)}\n class=\"w-7 h-7 rounded bg-gray-100 hover:bg-gray-200 text-gray-700 cursor-pointer\"\n >\n +\n \n onRemove(item.id)}\n class=\"ml-2 text-xs text-red-500 hover:text-red-700 cursor-pointer\"\n >\n Remove\n \n

\n ${(item.price * item.quantity).toFixed(2)}\n

\n ))}\n

\n Total\n ${total.toFixed(2)}\n

\n \n

\n \n )}\n \n \n );\n}\n",[],[180,248,258],"e80e891e-7b6a-4e75-b86c-d7d61fa1372c","App.tsx","019f60ae-3a0a-756b-8c85-2fb2d98f992f",7,["D",1784033507740],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { Header } from \"./Header.tsx\";\nimport { ProductCard, type Product } from \"./ProductCard.tsx\";\nimport { Cart, type CartItem } from \"./Cart.tsx\";\n\nexport function App() {\n const [products, setProducts] = useState([]);\n const [categories, setCategories] = useState([]);\n const [activeCategory, setActiveCategory] = useState(\"all\");\n const [cartItems, setCartItems] = useState([]);\n const [cartOpen, setCartOpen] = useState(false);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n Promise.all([\n fetch(\"/api/products\").then((r) => r.json()),\n fetch(\"/api/categories\").then((r) => r.json()),\n ]).then(([prods, cats]) => {\n setProducts(prods);\n setCategories(cats);\n setLoading(false);\n });\n }, []);\n\n useEffect(() => {\n fetch(`/api/products?category=${activeCategory}`)\n .then((r) => r.json())\n .then(setProducts);\n }, [activeCategory]);\n\n const addToCart = useCallback((product: Product) => {\n setCartItems((prev) => {\n const existing = prev.find((i) => i.id === product.id);\n if (existing) {\n return prev.map((i) =>\n i.id === product.id ? { ...i, quantity: i.quantity + 1 } : i\n );\n }\n return [...prev, {\n id: product.id,\n name: product.name,\n price: product.price,\n image: product.image,\n quantity: 1,\n }];\n });\n }, []);\n\n const removeFromCart = useCallback((id: number) => {\n setCartItems((prev) => prev.filter((i) => i.id !== id));\n }, []);\n\n const updateQty = useCallback((id: number, delta: number) => {\n setCartItems((prev) =>\n prev\n .map((i) => i.id === id ? { ...i, quantity: i.quantity + delta } : i)\n .filter((i) => i.quantity > 0)\n );\n }, []);\n\n const cartCount = cartItems.reduce((sum, i) => sum + i.quantity, 0);\n\n return (\n

setCartOpen(true)} />\n\n

\n {/* Category filter */}\n

\n setActiveCategory(\"all\")}\n class={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap cursor-pointer transition-colors ${\n activeCategory === \"all\"\n ? \"bg-gray-900 text-white\"\n : \"bg-white border border-gray-200 text-gray-700 hover:border-gray-300\"\n }`}\n >\n All Products\n \n {categories.map((cat) => (\n setActiveCategory(cat)}\n class={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap cursor-pointer transition-colors ${\n activeCategory === cat\n ? \"bg-gray-900 text-white\"\n : \"bg-white border border-gray-200 text-gray-700 hover:border-gray-300\"\n }`}\n >\n {cat}\n \n ))}\n

\n\n {/* Product grid */}\n {loading ? (\n

\n Loading products…\n

\n ) : (\n

\n {products.map((product) => (\n \n ))}\n

\n )}\n\n \n

\n\n setCartOpen(false)}\n onRemove={removeFromCart}\n onUpdateQty={updateQty}\n />\n

\n );\n}\n",[],[180,248,266],"4594e29c-8aeb-4f7f-ad7d-c03400b7c811",["D",1784033458626],[197,198,199,200],[180,248],["D",1784033458626],[196,201,202,203],[180],["D",1784033458626],["D",1789471840176],{"_109":108,"_117":113},{"_109":108,"_110":111,"_112":113,"_19":61,"_114":115,"_116":31},{"_13":14,"_38":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"ctx",{"_88":-5,"_139":318,"_319":320,"_321":322,"_323":31,"_324":31,"_325":31,"_326":65,"_327":-5,"_328":-7,"_329":-7,"_330":69,"_331":31,"_332":31,"_333":-5,"_334":31,"_335":31,"_336":31,"_337":-5},"ENV",{"_289":290,"_291":292,"_293":95,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v11