\n \n \n \n",[],[172,252],"008bcbfe-1533-11f1-aa5e-42dde27851f2","favicon.svg","019ca7f5-af18-74e8-a9ff-ac34c1920ced",["D",1772344422078],"",[],[172,259],"008bb9d4-1533-11f1-aa5e-42dde27851f2","019ca7f5-af18-74e8-a9ff-a8679610273e",["D",1772344422078],"# Frontend\n\nThis template is a classic client-side-only React app.\n\n## `index.html`\n\nThe **entrypoint** for the frontend is\n[`/frontend/index.html`](/frontend/index.html). This is the HTML page that is\nreturned at the root from [`../index.ts`](../index.ts).\n\nThis HTML file imports `/frontend/style.css` from [`/public/style.css`] and\n`/frontend/favicon.svg` from `/frontend/favicon.svg`. Everything in `/frontend/`\nis mapped to `/public` by `/backend/index.ts`. This is just a convention. You\ncould import & serve everything out of the same folder name.\n\nThis HTML file has a `

`, which is where we mount the React\napp.\n\nThis HTML file imports `/frontend/index.tsx` from `/public/index.tsx`, which is\nthe **entrypoint** for all frontend JavaScript, including all the React. It is\nnot a problem that it imports a file with a `.tsx` extension becaues browsers\nignore file extensions. They only pay attention to content-types, which is\ngreat, because all these files will be returned as transpiled JS with the\nappropriate JS content type by\n[std/utils](https://www.val.town/x/std/utils/code) functions.\n\n## [`index.tsx`](./index.tsx)\n\nThis file is the **entrypoint** for frontend JavaScript. It imports the React\napp from `/frontend/components/App.tsx` and mounts it on\n`

`.\n\nIt also looks for _bootstrapped_ JSON data at `window.__INITIAL_DATA`, and\npasses that only to the ``.\n\n## [`favicon.svg`](./favicon.svg)\n\nAs of this writing Val Town only supports text files, which is why the favicon\nis an SVG and not an .ico or any other binary image format. If you need binary\nfile storage, check out [Blob Storage](https://docs.val.town/std/blob/).\n\n## `components/`\n\nThis directory is where the React components are stored. They're pretty standard\nclient-side React components.",[],[172,160],"008bb1dc-1533-11f1-aa5e-42dde27851f2","MessageInput.tsx","019ca7f5-af18-74e8-a9ff-a1a2f8ee992b","019ca7f5-af18-74e8-a9ff-a43a26c53e65",["D",1772344422078],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../shared/types.ts\";\n\nexport function MessageInput({ onSubmit }: { onSubmit: () => void }) {\n const [message, setMessage] = React.useState(\"\");\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!message.trim()) return;\n\n try {\n const response = await fetch(\"/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ content: message }),\n });\n\n if (response.ok) {\n onSubmit();\n setMessage(\"\");\n }\n } catch (error) {\n console.error(\"Message submission failed\", error);\n }\n };\n\n return (\n

\n setMessage(e.target.value)}\n placeholder=\"Type a message...\"\n />\n \n \n );\n}",[],[172,279,272],"components","008ba8b8-1533-11f1-aa5e-42dde27851f2","App.tsx","019ca7f5-af18-74e8-a9ff-9cb9f659580d",["D",1772344422078],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\n\nexport function App(\n { initialMessages = [], thisProjectURL }: { initialMessages?: Message[]; thisProjectURL?: string },\n) {\n const [messages, setMessages] = React.useState(initialMessages);\n\n const fetchMessages = async () => {\n try {\n const response = await fetch(\"/messages\");\n const data = await response.json();\n setMessages(data.reverse());\n } catch (error) {\n console.error(\"Failed to fetch messages\", error);\n }\n };\n\n return (\n

💬 Message Board!

\n \n \n {thisProjectURL\n ? (\n \n )\n : null}\n

\n );\n}\n\nfunction MessageList({ messages }: { messages: Message[] }) {\n const displayedMessages = messages.slice(0, MESSAGE_LIMIT);\n return (\n

\n {displayedMessages.map((msg) => )}\n

\n );\n}\n\nfunction MessageItem({ message }) {\n const formattedDate = new Date(message.timestamp).toLocaleString();\n\n return (\n

{message.content}

\n {formattedDate}\n

\n );\n}",[],[172,279,281],"008bb86c-1533-11f1-aa5e-42dde27851f2",["D",1772344422078],[202,203],[172,279],["D",1772344422078],[201,204,205,206,207,208],[172],"8405645a-153c-11f1-9d28-42dde27851f2","api.ts","4d00b766-153c-11f1-9d28-42dde27851f2",9,["D",1772348508212],"// backend/api.ts — API routes\nimport { Hono } from \"https://esm.sh/hono@4.4.2\";\nimport { blankData, USERS } from \"../shared/types.ts\";\nimport { pullFromNotion, pushToNotion } from \"./notion.ts\";\n\nconst TMDB_IMG = \"https://image.tmdb.org/t/p/w185\";\nconst BLOB_KEY = \"watchqueue-data\";\n\nconst api = new Hono();\n\n// ── Helpers ──\nasync function loadData() {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const data = await blob.getJSON(BLOB_KEY);\n return data || blankData();\n}\n\nasync function saveData(data: any) {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n await blob.setJSON(BLOB_KEY, data);\n}\n\nfunction env(key: string): string {\n return Deno.env.get(key) || \"\";\n}\n\n// ── Data CRUD ──\napi.get(\"/data\", async (c) => {\n const data = await loadData();\n // Include config flags so frontend knows what's available\n return c.json({\n ...data,\n _config: {\n hasTmdb: !!env(\"TMDB_API_KEY\"),\n hasOmdb: !!env(\"OMDB_API_KEY\"),\n hasNotion: !!(env(\"NOTION_TOKEN\") && env(\"NOTION_DB_ID\")),\n },\n });\n});\n\napi.post(\"/data\", async (c) => {\n const body = await c.req.json();\n // Strip _config before saving\n const { _config, ...data } = body;\n await saveData(data);\n return c.json({ ok: true });\n});\n\n// ── TMDB Search ──\napi.get(\"/tmdb/search\", async (c) => {\n const q = c.req.query(\"q\");\n const apiKey = env(\"TMDB_API_KEY\");\n if (!apiKey) return c.json({ error: \"TMDB API key not configured\" }, 500);\n if (!q) return c.json({ results: [] });\n\n const url =\n `https://api.themoviedb.org/3/search/multi?api_key=${apiKey}&query=${\n encodeURIComponent(q)\n }&include_adult=false`;\n const res = await fetch(url);\n if (!res.ok) return c.json({ error: \"TMDB search failed\" }, res.status);\n const data = await res.json();\n\n const results = data.results\n .filter((r: any) => r.media_type === \"movie\" || r.media_type === \"tv\")\n .slice(0, 10)\n .map((r: any) => ({\n tmdbId: `${r.media_type}-${r.id}`,\n title: r.title || r.name,\n year: (r.release_date || r.first_air_date || \"\").slice(0, 4),\n type: r.media_type,\n poster: r.poster_path ? TMDB_IMG + r.poster_path : null,\n overview: r.overview || \"\",\n rating: r.vote_average || 0,\n }));\n\n return c.json({ results });\n});\n\n// ── TMDB + OMDB Metadata ──\napi.get(\"/tmdb/metadata/:tmdbId\", async (c) => {\n const tmdbId = c.req.param(\"tmdbId\");\n const tmdbKey = env(\"TMDB_API_KEY\");\n const omdbKey = env(\"OMDB_API_KEY\");\n if (!tmdbKey) return c.json({ error: \"TMDB API key not configured\" }, 500);\n\n const parts = tmdbId.split(\"-\");\n if (parts.length < 2) return c.json({ error: \"Invalid tmdbId\" }, 400);\n const mediaType = parts[0];\n const id = parts.slice(1).join(\"-\");\n\n // Fetch TMDB details with external IDs\n let tmdbData: any = null;\n try {\n const url =\n `https://api.themoviedb.org/3/${mediaType}/${id}?api_key=${tmdbKey}&append_to_response=external_ids`;\n const res = await fetch(url);\n if (res.ok) tmdbData = await res.json();\n } catch {}\n\n const result: any = {\n runtime: null,\n numSeasons: null,\n numEpisodes: null,\n episodeRuntime: null,\n criticScores: null,\n };\n\n if (tmdbData) {\n if (mediaType === \"movie\") {\n result.runtime = tmdbData.runtime || null;\n } else {\n result.numEpisodes = tmdbData.number_of_episodes || null;\n result.numSeasons = tmdbData.number_of_seasons || null;\n const ert = tmdbData.episode_run_time;\n result.episodeRuntime = Array.isArray(ert) && ert.length > 0\n ? Math.round(\n ert.reduce((a: number, b: number) => a + b, 0) / ert.length,\n )\n : null;\n }\n\n // Get IMDB ID for OMDB lookup\n const imdbId = tmdbData.external_ids?.imdb_id || tmdbData.imdb_id || null;\n\n if (imdbId && omdbKey) {\n try {\n const omdbUrl =\n `https://www.omdbapi.com/?i=${imdbId}&apikey=${omdbKey}`;\n const omdbRes = await fetch(omdbUrl);\n if (omdbRes.ok) {\n const omdb = await omdbRes.json();\n if (omdb.Response !== \"False\") {\n let rt = null, mc = null;\n if (omdb.Ratings) {\n for (const r of omdb.Ratings) {\n if (r.Source === \"Rotten Tomatoes\") {\n rt = parseInt(r.Value) || null;\n }\n if (r.Source === \"Metacritic\") mc = parseInt(r.Value) || null;\n }\n }\n if (mc == null && omdb.Metascore && omdb.Metascore !== \"N/A\") {\n mc = parseInt(omdb.Metascore) || null;\n }\n result.criticScores = { rt, mc, imdbId };\n // Fallback runtime from OMDB\n if (!result.runtime && omdb.Runtime && omdb.Runtime !== \"N/A\") {\n result.runtime = parseInt(omdb.Runtime) || null;\n }\n }\n }\n } catch {}\n } else if (imdbId) {\n result.criticScores = { rt: null, mc: null, imdbId };\n }\n }\n\n return c.json(result);\n});\n\n// ── Backfill metadata for all titles ──\napi.post(\"/tmdb/backfill\", async (c) => {\n const tmdbKey = env(\"TMDB_API_KEY\");\n if (!tmdbKey) return c.json({ error: \"TMDB API key not configured\" }, 500);\n\n const data: any = await loadData();\n const titles = Object.values(data.titles || {}) as any[];\n const missing = titles.filter(\n (t: any) =>\n (!t.criticScores || !t.runtime) && t.tmdbId &&\n !t.tmdbId.startsWith(\"manual-\") && !t.tmdbId.startsWith(\"netflix-\"),\n );\n\n let updated = 0;\n for (const title of missing) {\n try {\n // Reuse the metadata endpoint logic inline\n const parts = title.tmdbId.split(\"-\");\n const mediaType = parts[0];\n const id = parts.slice(1).join(\"-\");\n const url =\n `https://api.themoviedb.org/3/${mediaType}/${id}?api_key=${tmdbKey}&append_to_response=external_ids`;\n const res = await fetch(url);\n if (!res.ok) continue;\n const d = await res.json();\n\n if (mediaType === \"movie\") {\n if (d.runtime) title.runtime = d.runtime;\n } else {\n if (d.number_of_episodes) title.numEpisodes = d.number_of_episodes;\n if (d.number_of_seasons) title.numSeasons = d.number_of_seasons;\n const ert = d.episode_run_time;\n if (Array.isArray(ert) && ert.length > 0) {\n title.episodeRuntime = Math.round(\n ert.reduce((a: number, b: number) => a + b, 0) / ert.length,\n );\n }\n }\n\n const imdbId = d.external_ids?.imdb_id || d.imdb_id;\n const omdbKey = env(\"OMDB_API_KEY\");\n if (imdbId && omdbKey) {\n const omdbRes = await fetch(\n `https://www.omdbapi.com/?i=${imdbId}&apikey=${omdbKey}`,\n );\n if (omdbRes.ok) {\n const omdb = await omdbRes.json();\n if (omdb.Response !== \"False\") {\n let rt = null, mc = null;\n if (omdb.Ratings) {\n for (const r of omdb.Ratings) {\n if (r.Source === \"Rotten Tomatoes\") {\n rt = parseInt(r.Value) || null;\n }\n if (r.Source === \"Metacritic\") mc = parseInt(r.Value) || null;\n }\n }\n if (mc == null && omdb.Metascore && omdb.Metascore !== \"N/A\") {\n mc = parseInt(omdb.Metascore) || null;\n }\n title.criticScores = { rt, mc, imdbId };\n if (!title.runtime && omdb.Runtime && omdb.Runtime !== \"N/A\") {\n title.runtime = parseInt(omdb.Runtime) || null;\n }\n }\n }\n } else if (imdbId) {\n title.criticScores = { rt: null, mc: null, imdbId };\n }\n updated++;\n } catch {}\n await new Promise((r) => setTimeout(r, 300));\n }\n\n await saveData(data);\n return c.json({ updated, total: missing.length });\n});\n\n// ── Notion Sync ──\napi.post(\"/notion/push\", async (c) => {\n const token = env(\"NOTION_TOKEN\");\n const dbId = env(\"NOTION_DB_ID\");\n if (!token || !dbId) return c.json({ error: \"Notion not configured\" }, 500);\n\n const data: any = await loadData();\n const result = await pushToNotion(data, token, dbId);\n // Save back any new notionPageIds\n if (result.titles) {\n data.titles = result.titles;\n await saveData(data);\n }\n return c.json({ created: result.created, updated: result.updated });\n});\n\napi.post(\"/notion/pull\", async (c) => {\n const token = env(\"NOTION_TOKEN\");\n const dbId = env(\"NOTION_DB_ID\");\n if (!token || !dbId) return c.json({ error: \"Notion not configured\" }, 500);\n\n const rows = await pullFromNotion(token, dbId);\n const data: any = await loadData();\n\n for (const row of rows) {\n if (!row) continue;\n const { title, userData } = row;\n\n data.titles[title.tmdbId] = {\n ...(data.titles[title.tmdbId] || {}),\n ...title,\n };\n\n for (const u of USERS) {\n const ud = userData[u];\n if (!ud) continue;\n if (!data.watched[u]) data.watched[u] = {};\n data.watched[u][title.tmdbId] = ud.watched;\n if (!data.scores[u]) data.scores[u] = {};\n if (ud.score) data.scores[u][title.tmdbId] = ud.score;\n if (!data.userLists[u]) data.userLists[u] = [];\n if (!data.userUnranked[u]) data.userUnranked[u] = [];\n data.userLists[u] = data.userLists[u].filter((x: string) =>\n x !== title.tmdbId\n );\n data.userUnranked[u] = data.userUnranked[u].filter((x: string) =>\n x !== title.tmdbId\n );\n if (ud.rank != null && ud.rank > 0) {\n const insertAt = Math.min(ud.rank - 1, data.userLists[u].length);\n data.userLists[u].splice(insertAt, 0, title.tmdbId);\n } else if (ud.onList) {\n data.userUnranked[u].push(title.tmdbId);\n }\n }\n }\n\n await saveData(data);\n return c.json({ pulled: rows.length });\n});\n\nexport default api;",[],[177,295],"008b9576-1533-11f1-aa5e-42dde27851f2","019ca7f5-af18-74e8-a9ff-965ba58fef68",["D",1772344422078],"# Backend\n\nThis folder contains all backend-only code in this project. It's broken up into:\n\n- [`../index.ts`](../index.ts) - this is the **entrypoint** for this whole\n project, which is why it's in the folder above this one, even though it's\n technically part of the backend\n- `database/` - this contains the code for interfacing with the app's SQLite\n database table\n\n## Hono\n\nThis app uses [Hono](https://hono.dev/) as the API framework. You can think of\nHono as a replacement for [ExpressJS](https://expressjs.com/) that works in\nserverless environments like Val Town or Cloudflare Workers. If you come from\nPython or Ruby, Hono is also a lot like\n[Flask](https://github.com/pallets/flask) or\n[Sinatra](https://github.com/sinatra/sinatra), respectively.\n\n## Serving assets to the frontend\n\nThis backend HTTP server is responsible for serving all static assets to the\nbrowser to render the app, including HTML, JavaScript (including all client-side\nReact), CSS, and even the favicon SVG.\n\nWe use helper functions from [std/utils](https://www.val.town/x/std/utils/code)\nfor getting files and serving them.\n\n### `index.html`\n\nThe most complicated part of this backend API is serving index.html. In this app\n(like most apps) we serve it at the root, ie `GET /`.\n\nWe _bootstrap_ `index.html` with some initial data from the server, so that it\ngets dynamically injected JSON data without having to make another round-trip\nrequest to the server to get that data on the frontend. This is a common pattern\nfor client-side rendered apps.\n\n## CRUD API Routes\n\nThis app has two CRUD API routes: for reading and inserting into the messages\ntable. They both speak JSON, which is standard. They import their functions from\n`/backend/database/queries.ts`. These routes are called from the React app to\nrefresh and update data.\n\n## Errors\n\nHono and other API frameworks have a habit of swallowing up Errors. We turn off\nthis default behavior by re-throwing errors, because we think most of the time\nyou'll want to see the full stack trace instead of merely \"Internal Server\nError\". You can customize how you want errors to appear.",[],[177,160],"008b8c20-1533-11f1-aa5e-42dde27851f2","queries.ts","019ca7f5-af18-74e8-a9ff-8ec9374c4cbc","019ca7f5-af18-74e8-a9ff-938a93d3ff72",["D",1772344422078],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { type Message, MESSAGE_LIMIT } from \"../../shared/utils.ts\";\nimport { createTables, tableName } from \"./migrations.ts\";\n\n// This will create the database table if it doesn't exist.\n// This will run every time the app starts up. You can\n// comment out this line for a modest (30ms) perforamnce improvement\n// on cold starts. It's left in to ensure the database tables are\n// automatically set up correctly for users who fork this app.\nawait createTables();\n\nexport async function getMessages(limit = MESSAGE_LIMIT): Promise {\n const messages = await sqlite.execute(\n `SELECT * FROM ${tableName} \n ORDER BY timestamp DESC \n LIMIT ?`,\n [limit],\n );\n return messages.rows as unknown as Message[];\n}\n\nexport async function insertMessage(content: string) {\n await sqlite.execute(\n `INSERT INTO ${tableName} (content) \n VALUES (?)`,\n [content],\n );\n}",[],[177,316,309],"database","008b859a-1533-11f1-aa5e-42dde27851f2","migrations.ts","019ca7f5-af18-74e8-a9ff-8ac85485069d",["D",1772344422078],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nexport const tableName = \"reactHonoStarter_messages\";\n\nexport async function createTables() {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS ${tableName} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n content TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )`,\n /* Add any other tables or migrations you want here\n\n However, you should know that SQLite has much more limited\n support for altering existing tables as compared to other databases.\n Often it's easier to create new tables with the schema you want, and then\n copy the data over. */\n ]);\n}",[],[177,316,318],"008b5980-1533-11f1-aa5e-42dde27851f2","019ca7f5-af18-74e8-a9ff-84b93dac82e9",["D",1772344422078],"# Database\n\nThis app uses [Val Town SQLite](https://docs.val.town/std/sqlite/) to manage\ndata. Every Val Town account comes with a free SQLite database, hosted on\n[Turso](https://turso.tech/). This folder is broken up into two files:\n\n- [`migrations.ts`](./migrations.ts) - code to set up the database tables the\n app needs\n- [`queries.ts`](./queries.ts) - functions to run queries against those tables,\n which are imported and used in the main Hono server in `/backend/index.ts`\n\n## Migrations\n\nIn `backend/database/migrations.ts`, this app creates a new SQLite table\n`reactHonoStarter_messages` to store messages.\n\nThis \"migration\" runs once on every app startup because it's imported in\n`index.ts`. You can comment this line out for a slight (30ms) performance\nimprovement on cold starts. It's left in so that users who fork this project\nwill have the migration run correctly.\n\nSQLite has much more limited support for altering existing tables as compared to\nother databases. Often it's easier to create new tables with the schema you\nwant, and then copy the data over. Happily LLMs are quite good at those sort of\ndatabase operations, but please reach out in the\n[Val Town Discord](https://discord.com/invite/dHv45uN5RY) if you need help.\n\n## Queries\n\nThe queries file is where running the migrations happen in this app. It'd also\nbe reasonable for that to happen in index.ts, or as is said above, for that line\nto be commented out, and only run when actual changes are made to your database\nschema.\n\nThe queries file exports functions to get and write data. It relies on shared\ntypes and data imported from the `/shared` directory.",[],[177,316,160],"008b940e-1533-11f1-aa5e-42dde27851f2",["D",1772344422078],[195,196,197],[177,316],["D",1772344422078],[194,198,199],[177],["D",1772344422078],["D",1789542643120],{"_104":103,"_111":107},{"_104":103,"_105":-5,"_106":107,"_18":56,"_108":109,"_110":49},{"_13":89,"_32":90,"_43":42,"_91":44,"_92":93,"_94":95,"_96":51,"_97":98,"_99":100,"_101":45,"_102":103},"ctx",{"_82":-5,"_132":375,"_376":377,"_378":379,"_380":49,"_381":49,"_382":49,"_383":25,"_384":-5,"_385":-7,"_386":-7,"_387":63,"_388":49,"_389":49,"_390":-5,"_391":49,"_392":49,"_393":49,"_394":-5},"ENV",{"_346":347,"_348":349,"_350":90,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · v10