\n \n \n \n\n",[120,112],"03db2873f136f6f4a708f524102d75103a52d6d41f5643743d6690793e83c649","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[120,112],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/favicon.svg",{"_32":139,"_13":133,"_82":140,"_84":123,"_85":33,"_86":141,"_88":26,"_34":142,"_40":90,"_91":116,"_93":143,"_66":48,"_95":-5,"_96":-7,"_75":144,"_98":145},{"_32":132,"_13":133,"_82":134,"_84":114,"_85":58,"_86":20,"_88":26,"_34":135,"_40":90,"_91":116,"_93":136,"_66":48,"_95":-5,"_96":-7,"_75":137,"_98":138},"88ceb9ca-5680-11f1-ad78-ee650bb23af1","favicon.svg","019e53ec-d349-7646-9450-132e38c5c2e6",["D",1779524547616],"\n\n",[120,133],"acf96f711277c1fc463282bbb8531233b10deb004a4492ff836831bb528f3039","82a730d4-3261-11f0-aa46-569c3dd06744","6f196b86-3261-11f0-9a3d-569c3dd06744",45,["D",1747405483360],"\n",[120,133],"1b9cfa9bc87dc0db12471f908bb8438c469ac9b2a59379157b627909cb30fc53","frontend/components/App.tsx",{"_32":160,"_13":150,"_82":161,"_84":162,"_85":33,"_86":163,"_88":26,"_34":164,"_40":165,"_91":155,"_93":166,"_66":48,"_95":-5,"_96":-7,"_75":167,"_98":168},{"_32":149,"_13":150,"_82":151,"_84":152,"_85":58,"_86":153,"_88":26,"_34":154,"_40":90,"_91":155,"_93":156,"_66":48,"_95":-5,"_96":-7,"_75":157,"_98":158},"74d59f38-5680-11f1-ab0b-ee650bb23af1","App.tsx","019e53ec-d349-7646-9450-0588b658e5b6","019e53ec-d349-7646-9450-0c610207137f",4,["D",1779524514097],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { JoinScreen } from \"./JoinScreen.tsx\";\nimport { ChatRoom } from \"./ChatRoom.tsx\";\n\nexport function App() {\n const [username, setUsername] = useState(null);\n\n if (!username) {\n return ;\n }\n\n return setUsername(null)} />;\n}\n",[120,159,150],"8192d6ae4d93638ae0dc73cf65b7c4d07c47de601f33a76fbcb438b05849bed0","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[120,159,150],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":178,"_13":169,"_82":179,"_84":-5,"_85":33,"_86":180,"_88":48,"_34":181,"_40":182,"_91":116,"_93":183,"_66":48,"_95":-5,"_96":-7,"_75":184,"_98":185},{"_32":172,"_13":169,"_82":173,"_84":-5,"_85":58,"_86":57,"_88":26,"_34":174,"_40":90,"_91":116,"_93":175,"_66":48,"_95":-5,"_96":-7,"_75":176,"_98":177},"94cb3712-5680-11f1-8d4d-ee650bb23af1","019e53ec-d349-7646-9450-205558c88142",["D",1779524567723],"# 💬 Real-Time Chat\n\nA real-time chat room built with React + Hono on Val Town. Users enter a username and start chatting instantly — messages appear in real-time via polling.\n\n## Features\n\n- **Username-based join** — enter a name to start chatting\n- **Real-time updates** — messages poll every 1.5 seconds for new content\n- **Persistent history** — last 50 messages loaded on join\n- **Color-coded usernames** — each user gets a unique color\n- **Dark theme** — modern chat UI with bubble-style messages\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts (Hono)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| React[\"App.tsx\"]\n React -->|join screen| Join[\"JoinScreen.tsx\"]\n React -->|chat room| Chat[\"ChatRoom.tsx\"]\n Chat -->|\"GET /api/messages\"| API[\"REST API\"]\n Chat -->|\"POST /api/messages\"| API\n API -->|read/write| DB[\"SQLite\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend + API routes\nfrontend/\n index.html ← HTML shell\n index.tsx ← React entrypoint\n favicon.svg ← Chat icon\n components/\n App.tsx ← Root component (routing)\n JoinScreen.tsx ← Username entry screen\n ChatRoom.tsx ← Chat interface with polling\n```\n",[169],"9da46402ebc3c5678fd925cd6a278451b24279d1c9a606a11e360b2fdb2a5eb9","1a3cc642-3997-11f1-a3f8-42b51c65c3df","a50c3760-f53e-11ef-bd6d-569c3dd06744",87,["D",1776345656810],30,"# 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**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",[169],"8094bd638fc012f5239882eebeb86eee1944c60d49719e6e20139500b7aaf24e",{"_75":187,"_77":188,"_79":-7},"frontend/components/Counter.tsx",{"_32":189,"_13":190,"_82":191,"_84":162,"_85":33,"_86":192,"_88":26,"_34":193,"_40":194,"_91":155,"_93":195,"_66":48,"_95":-5,"_96":-7,"_75":196,"_98":197},"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df",73,["D",1776345330366],0,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[120,159,190],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66",{"_75":209,"_77":-7,"_79":210},{"_75":200,"_77":-7,"_79":201},"frontend/components/JoinScreen.tsx",{"_32":202,"_13":203,"_82":204,"_84":152,"_85":58,"_86":165,"_88":26,"_34":205,"_40":194,"_91":155,"_93":206,"_66":48,"_95":-5,"_96":-7,"_75":207,"_98":208},"7a7cd4ce-5680-11f1-ab0b-ee650bb23af1","JoinScreen.tsx","7a7cd5be-5680-11f1-ab0b-ee650bb23af1",["D",1779524523587],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function JoinScreen({ onJoin }: { onJoin: (name: string) => void }) {\n const [name, setName] = useState(\"\");\n\n const handleSubmit = (e: Event) => {\n e.preventDefault();\n const trimmed = name.trim();\n if (trimmed.length > 0 && trimmed.length <= 30) {\n onJoin(trimmed);\n }\n };\n\n return (\n

💬

Real-Time Chat

Enter a username to join the conversation

\n );\n}\n",[120,159,203],"9797398c4e38dac8c0fc8f8bb7fed95b6f561e8ab78b0f020d9423749fcdb4ce","frontend/components/ChatRoom.tsx",{"_32":211,"_13":212,"_82":213,"_84":152,"_85":58,"_86":214,"_88":26,"_34":215,"_40":194,"_91":155,"_93":216,"_66":48,"_95":-5,"_96":-7,"_75":217,"_98":218},"855874f2-5680-11f1-ad78-ee650bb23af1","ChatRoom.tsx","855875a6-5680-11f1-ad78-ee650bb23af1",6,["D",1779524541809],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ninterface Message {\n id: number;\n username: string;\n content: string;\n created_at: string;\n}\n\nexport function ChatRoom({ username, onLeave }: { username: string; onLeave: () => void }) {\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [sending, setSending] = useState(false);\n const bottomRef = useRef(null);\n const lastIdRef = useRef(0);\n\n // Scroll to bottom\n const scrollToBottom = useCallback(() => {\n bottomRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, []);\n\n // Load initial messages\n useEffect(() => {\n fetch(\"/api/messages\")\n .then((r) => r.json())\n .then((msgs: Message[]) => {\n setMessages(msgs);\n if (msgs.length > 0) {\n lastIdRef.current = msgs[msgs.length - 1].id;\n }\n setTimeout(scrollToBottom, 100);\n });\n }, []);\n\n // Poll for new messages every 1.5s\n useEffect(() => {\n const interval = setInterval(async () => {\n try {\n const res = await fetch(`/api/messages?after=${lastIdRef.current}`);\n const newMsgs: Message[] = await res.json();\n if (newMsgs.length > 0) {\n lastIdRef.current = newMsgs[newMsgs.length - 1].id;\n setMessages((prev) => [...prev, ...newMsgs]);\n setTimeout(scrollToBottom, 100);\n }\n } catch {}\n }, 1500);\n return () => clearInterval(interval);\n }, [scrollToBottom]);\n\n const sendMessage = async (e: Event) => {\n e.preventDefault();\n const content = input.trim();\n if (!content || sending) return;\n\n setSending(true);\n setInput(\"\");\n try {\n await fetch(\"/api/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username, content }),\n });\n } catch (err) {\n console.error(\"Failed to send:\", err);\n setInput(content);\n } finally {\n setSending(false);\n }\n };\n\n const formatTime = (dateStr: string) => {\n const d = new Date(dateStr + \"Z\");\n return d.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n };\n\n // Generate consistent color from username\n const getColor = (name: string) => {\n const colors = [\n \"text-blue-400\", \"text-green-400\", \"text-yellow-400\", \"text-pink-400\",\n \"text-purple-400\", \"text-cyan-400\", \"text-orange-400\", \"text-red-400\",\n ];\n let hash = 0;\n for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);\n return colors[Math.abs(hash) % colors.length];\n };\n\n return (\n

\n {/* Header */}\n

\n 💬\n

Chat Room

\n \n Logged in as {username}\n \n \n Leave\n \n

\n\n {/* Messages */}\n

\n {messages.length === 0 && (\n

🎉

No messages yet. Say hello!

\n )}\n {messages.map((msg) => {\n const isMe = msg.username === username;\n return (\n

\n {!isMe && (\n

\n {msg.username}\n

\n )}\n

{msg.content}

\n {formatTime(msg.created_at)}\n

\n );\n })}\n

\n\n {/* Input */}\n

\n );\n}\n",[120,159,212],"cf1d31b5ce18033783a5bff159ff6bb7296daf165a1bdb0715fd54e5ce3fb013",["D",1779524490014],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","userId","503383bb-44d6-4aa6-a014-21f330fe6e5b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019e53b7-d26f-77df-a9a5-b27ea7159f07","tursoName","66797a04568011f1ab0bee650bb23af1","tursoHostname","66797a04568011f1ab0bee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789469441210],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_261":257},"org",{"_11":12,"_254":255,"_256":257,"_225":226,"_258":259,"_260":48},"branch","displayName","Ümid Mustafayev","avatar","https://lh3.googleusercontent.com/a/ACg8ocIjsW0Zjpdz3dC0a7SrfiqmDfm5UCtbRYO9GWjwTapf8dgSoQ=s96-c","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":349,"_46":-5,"_220":48,"_49":50,"_221":50,"_222":223,"_224":-5,"_225":226,"_227":83,"_228":26,"_229":-5,"_230":-5,"_231":194,"_53":232,"_233":234,"_235":236,"_237":350,"_239":-5,"_240":241,"_242":241,"_243":244,"_245":244,"_246":244,"_247":241,"_248":241,"_249":351,"_251":352,"_253":353,"_47":48},"tree",[311,319,320],"files",[311,312,313,314,315,316,317,318,319,320],"counts",{"_301":194,"_302":90,"_303":194,"_304":305,"_306":307},"contents",[290,291,292],"upstreamProject",{"_32":39,"_13":56,"_222":223,"_224":287,"_49":50,"_249":288},"upstreamBranch",{"_32":33,"_34":285,"_36":286,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789538399&sig=d91a7ef87f90c894c3b8d0b9fb95840fd02478ac34a646812058e001671e6ecb",{"_11":52,"_261":289},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789538399&sig=ed57122c136965e1015088c1b79a18d1d4e6250d1eb81abacde1e740f48894e7",{"_32":297,"_13":120,"_82":114,"_84":-5,"_85":58,"_86":90,"_88":26,"_34":298,"_40":194,"_91":299,"_93":-5,"_66":48,"_95":-5,"_75":300},{"_32":172,"_13":169,"_82":173,"_84":-5,"_85":58,"_86":57,"_88":26,"_34":295,"_40":90,"_91":116,"_93":175,"_66":48,"_95":-5,"_75":296},{"_32":81,"_13":76,"_82":83,"_84":-5,"_85":58,"_86":87,"_88":26,"_34":293,"_40":90,"_91":92,"_93":94,"_66":48,"_95":-5,"_75":294},["D",1779524502132],[76],["D",1779524567723],[169],"6680e5c8-5680-11f1-ab0b-ee650bb23af1",["D",1779524490014],"directory",[120],"pulls","branches","forks","envVars",{"_308":194,"_310":194},"connections",{"_308":194,"_309":194},"count","unfilledCount","emptyCount",{"_32":297,"_13":120,"_82":114,"_84":-5,"_85":58,"_86":90,"_88":26,"_34":346,"_40":194,"_91":299,"_93":-5,"_66":48,"_95":-5,"_96":347,"_75":348},{"_32":342,"_13":159,"_82":152,"_84":114,"_85":58,"_86":90,"_88":26,"_34":343,"_40":194,"_91":299,"_93":-5,"_66":48,"_95":-5,"_96":344,"_75":345},{"_32":149,"_13":150,"_82":151,"_84":152,"_85":58,"_86":153,"_88":26,"_34":154,"_40":90,"_91":155,"_93":156,"_66":48,"_95":-5,"_96":340,"_75":341},{"_32":211,"_13":212,"_82":213,"_84":152,"_85":58,"_86":214,"_88":26,"_34":215,"_40":194,"_91":155,"_93":216,"_66":48,"_95":-5,"_96":338,"_75":339},{"_32":202,"_13":203,"_82":204,"_84":152,"_85":58,"_86":165,"_88":26,"_34":205,"_40":194,"_91":155,"_93":206,"_66":48,"_95":-5,"_96":336,"_75":337},{"_32":132,"_13":133,"_82":134,"_84":114,"_85":58,"_86":20,"_88":26,"_34":135,"_40":90,"_91":116,"_93":136,"_66":48,"_95":-5,"_96":334,"_75":335},{"_32":111,"_13":112,"_82":113,"_84":114,"_85":58,"_86":22,"_88":26,"_34":115,"_40":90,"_91":116,"_93":117,"_66":48,"_95":-5,"_96":332,"_75":333},{"_32":325,"_13":326,"_82":327,"_84":114,"_85":58,"_86":90,"_88":26,"_34":328,"_40":194,"_91":155,"_93":329,"_66":48,"_95":-5,"_96":330,"_75":331},{"_32":172,"_13":169,"_82":173,"_84":-5,"_85":58,"_86":57,"_88":26,"_34":174,"_40":90,"_91":116,"_93":175,"_66":48,"_95":-5,"_96":323,"_75":324},{"_32":81,"_13":76,"_82":83,"_84":-5,"_85":58,"_86":87,"_88":26,"_34":89,"_40":90,"_91":92,"_93":94,"_66":48,"_95":-5,"_96":321,"_75":322},[],[76],[],[169],"6680e2a8-5680-11f1-ab0b-ee650bb23af1","index.tsx","019e53ec-d349-7646-9450-1a1034e4e713",["D",1779524490014],"/** @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();",[],[120,326],[],[120,112],[],[120,133],[],[120,159,203],[],[120,159,212],[],[120,159,150],"6680d7c2-5680-11f1-ab0b-ee650bb23af1",["D",1779524490014],[313,314,315],[120,159],["D",1779524490014],[312,316,317,318],[120],["D",1779524490014],["D",1789469441210],{"_11":12,"_261":257},{"_11":12,"_254":255,"_256":257,"_225":226,"_258":259,"_260":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_249":-5,"_282":387,"_388":389,"_390":391,"_392":48,"_393":48,"_394":48,"_395":26,"_396":-5,"_397":-7,"_398":-7,"_399":194,"_400":48,"_401":48,"_402":-5,"_403":48,"_404":48,"_405":48,"_406":-5},"ENV",{"_358":359,"_360":361,"_362":16,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386},"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"]

Compare

Mergemidmustafayev/mainintotemplates/main

README.md+22-38

frontend/components/App.tsx+10-10

frontend/favicon.svg+3-3

frontend/index.html+4-6

Hindex.ts+47-11

frontend/components/ChatRoom.tsx+162-0

frontend/components/JoinScreen.tsx+47-0

frontend/components/Counter.tsx+0-18