`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_283":284,"_285":286},"routes/_app.x.$handle.$name",{"_99":98,"_32":44,"_108":89,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",11,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","01a08273-08cb-70b7-9190-4871f7cd3cc2","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[\"root.tsx\"]\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 root.tsx ← HTML shell (stamps immutable asset URLs)\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/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and 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\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n","# NYC Trip Finder\n\nFlight + hotel finder for one specific trip pattern: flying out of MSY on\nTuesdays into JFK or LGA (nonstop, Delta preferred, cheapest refundable\nfare), and boutique/4-star hotels under $350/night in SoHo, Nolita, Lower\nEast Side, Chelsea, or Greenwich Village.\n\nBuilt for one person's use, not a general-purpose app.\n\n## Current state\n\n- **Hotels tab**: real, hand-curated list in [`data/hotels.ts`](/data/hotels.ts) —\n free hotel-search APIs don't reliably return room square footage or\n \"boutique\" status, so this is a seed list from a Sept 2026 web search.\n Prices are \"from\" rates, not live. Refresh periodically and before booking.\n- **Flights tab**: **mock data** ([`flights.ts`](/flights.ts)) — no flight\n API key is configured yet. The UI, filters, and \"cheapest\" highlighting\n all work against fake prices so the wireframe can be reviewed before\n wiring in something real.\n\n## Going live on flights ($0/mo)\n\n1. Create a free account at [Amadeus for Developers](https://developers.amadeus.com/register)\n and make a \"Self-Service\" app — the free tier includes Flight Offers\n Search (2,000 calls/month).\n2. 👉 Add the key here: https://www.val.town/x/unlikelyarchivist/nyc-flight-hotel-finder/environment-variables?key=AMADEUS_API_KEY\n3. Replace the `throw` in `getFlights()` in [`flights.ts`](/flights.ts) with\n a real Flight Offers Search call (MSY → JFK/LGA, Tuesday departures).\n Refundability isn't in the base search response — it needs a follow-up\n call to the Flight Offers *Price* endpoint per offer, which costs extra\n quota, so budget for that before turning it on for every row.\n\nKnown limits of the free tier: Amadeus's free/test data can be thinner or\nslightly stale compared to what you'd see on Google Flights or Delta.com —\ntreat this as a \"which days look cheap\" signal, not a bookable price.\n\n## JFK vs LGA — which is better for MSY?\n\nWorth showing both rather than picking one:\n\n- **LGA** is Delta's home domestic hub in NYC — it usually has more Delta\n departures/day and connects to more of the network, so it's often the\n cheaper, more frequent nonstop option for domestic city pairs like MSY.\n- **JFK** is Delta's international/long-haul hub — still serves MSY\n nonstop, but with fewer daily frequencies; can occasionally undercut LGA\n on price depending on the week.\n\nSince price and nonstop availability swap back and forth week to week, the\napp queries both and lets the destination filter narrow it down, rather\nthan hard-coding one.\n\n## v2 ideas (not built)\n\n- Configurable origin airport (currently hardcoded to MSY)\n- Configurable destination city (currently hardcoded to JFK/LGA)\n- Alerts — folded into a combined morning-brief automation across this app\n and the client-appointment-tracker app once both exist\n- Live hotel pricing (would need a paid API or manual periodic refresh of\n `data/hotels.ts`)\n\n## File structure\n\n```\nindex.ts ← Hono backend: serves frontend + /api/flights + /api/hotels\nflights.ts ← Flight data source (mock; swap for Amadeus)\ndata/hotels.ts ← Curated hotel list\nfrontend/\n root.tsx ← HTML shell\n index.tsx ← React entrypoint\n components/\n App.tsx ← Tab layout (Flights / Hotels)\n FlightsPanel.tsx ← Flights tab UI\n HotelsPanel.tsx ← Hotels tab UI\n```\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n","createdAt",["D",1788895186402],"branchVersion","branchId","a2d83106-fb23-4e34-a53f-3748660d2df7","id","873d437b-aa07-4a6d-a8ae-cf25fc6517b4","nyc-flight-hotel-finder",["D",1788894971818],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Tuesday Delta fares + NYC boutique hotel finder","imageUrl","051b2cc5-9320-44ef-88e7-826bfa8daa60","pinnedFileId","01a08273-08cb-70b7-9190-4d3348710ba0","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019ee5b5-1072-70b4-8a0f-c844ad002ea1","tursoName","873d437baa074a6da8aecf25fc6517b4","tursoHostname","873d437baa074a6da8aecf25fc6517b4-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789502486629],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":54,"_104":105,"_106":25},"branch",{"_13":88,"_32":89,"_42":41,"_90":43,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":44,"_97":98},"isOwned",34,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","unlikelyarchivist","handle","displayName","Eryn Montgomery","avatar","https://lh3.googleusercontent.com/a/ACg8ocJEkHIy674nn2OrWifP7cPPXWj2A5ftzagptlIz_AXo3OPt_A=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_32":44,"_37":278,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":279,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":280,"_83":281,"_85":282,"_87":25},"tree",[186,188,196,197,198,199],"files",[186,187,188,189,190,191,192,193,194,195,196,197,198,199],"counts",{"_176":62,"_177":142,"_178":62,"_179":180,"_181":182},"contents",[130,131,132,133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":170,"_32":171,"_30":172,"_138":-5,"_40":41,"_39":173,"_140":58,"_37":174,"_13":62,"_33":168,"_34":-5,"_24":25,"_145":-5,"_27":175},{"_42":164,"_32":165,"_30":166,"_138":-5,"_40":41,"_39":142,"_140":58,"_37":167,"_13":62,"_33":168,"_34":-5,"_24":25,"_145":-5,"_27":169},{"_42":158,"_32":159,"_30":160,"_138":-5,"_40":41,"_39":142,"_140":58,"_37":161,"_13":62,"_33":20,"_34":162,"_24":25,"_145":-5,"_27":163},{"_42":155,"_32":28,"_30":31,"_138":-5,"_40":41,"_39":14,"_140":25,"_37":156,"_13":142,"_33":20,"_34":36,"_24":25,"_145":-5,"_27":157},{"_42":147,"_32":148,"_30":149,"_138":-5,"_40":41,"_39":150,"_140":25,"_37":151,"_13":62,"_33":152,"_34":153,"_24":25,"_145":-5,"_27":154},{"_42":136,"_32":137,"_30":56,"_138":-5,"_40":41,"_39":139,"_140":25,"_37":141,"_13":142,"_33":143,"_34":144,"_24":25,"_145":-5,"_27":146},"2090594c-fec4-42ba-970e-dfc2301f398c","index.ts","parentId",4,"latest",["D",1788895082040],1,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { getFlights } from \"./flights.ts\";\nimport { CURATED_HOTELS } from \"./data/hotels.ts\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/api/flights\", async (c) => {\n try {\n const flights = await getFlights();\n return c.json({ flights, live: !!Deno.env.get(\"AMADEUS_API_KEY\") });\n } catch (err) {\n return c.json({ flights: [], live: false, error: String(err) }, 200);\n }\n});\n\napp.get(\"/api/hotels\", (c) => c.json({ hotels: CURATED_HOTELS }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[137],"b3b8c42b-2c1a-42a3-875d-0620553c0c9a","flights.ts","fcb5f78e-abb9-11f1-ba48-1607ee4eb77e",3,["D",1788895072216],"script","// Flight search. Currently returns mock data — no flight API key is\n// configured yet (see README for how to add one for $0/mo on Amadeus).\n// getFlights() is the single function the API route calls; swap its body\n// for a real Amadeus Flight Offers Search call and nothing else changes.\n\nexport interface FlightOption {\n date: string; // ISO date, always a Tuesday\n destination: \"JFK\" | \"LGA\";\n price: number;\n airline: string;\n nonstop: boolean;\n refundable: boolean;\n}\n\nconst DESTINATIONS = [\"JFK\", \"LGA\"] as const;\n\nfunction nextNTuesdays(n: number): string[] {\n const dates: string[] = [];\n const d = new Date();\n d.setUTCHours(0, 0, 0, 0);\n while (d.getUTCDay() !== 2) d.setUTCDate(d.getUTCDate() + 1); // 2 = Tuesday\n for (let i = 0; i < n; i++) {\n dates.push(new Date(d).toISOString().slice(0, 10));\n d.setUTCDate(d.getUTCDate() + 7);\n }\n return dates;\n}\n\n// Deterministic pseudo-random price so mock data is stable across requests.\nfunction mockPrice(seed: string): number {\n let h = 0;\n for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;\n return 140 + (h % 220); // $140–$360\n}\n\nexport async function getFlights(): Promise {\n const apiKey = Deno.env.get(\"AMADEUS_API_KEY\");\n if (!apiKey) {\n // MOCK MODE — no live data source configured.\n const flights: FlightOption[] = [];\n for (const date of nextNTuesdays(8)) {\n for (const destination of DESTINATIONS) {\n const seed = `${date}-${destination}`;\n flights.push({\n date,\n destination,\n price: mockPrice(seed),\n airline: mockPrice(seed + \"air\") % 3 === 0 ? \"JetBlue\" : \"Delta\",\n nonstop: mockPrice(seed + \"ns\") % 4 !== 0,\n refundable: mockPrice(seed + \"rf\") % 2 === 0,\n });\n }\n }\n return flights;\n }\n\n // TODO: real Amadeus Flight Offers Search call, filtered MSY -> JFK/LGA,\n // Tuesday departures, nonstop, Delta preferred. Fare rules / refundability\n // requires a follow-up call to the Flight Offers Price endpoint per offer.\n throw new Error(\"Live flight API not implemented yet\");\n}\n",[148],"f4585b40-4461-457b-91a6-1826e46dd27a",["D",1788895186402],[28],"f3cde05a-882d-45c0-9e98-9c86f951c40d","CHANGELOG.md","01a08273-08cb-70b7-9190-443b3ac049cf",["D",1788894971818],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n

Diff · v11