Community Message Board

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_251":252,"_253":254},"routes/_app.x.$handle.$name",{"_107":106,"_32":51,"_115":97,"_27":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_21":-5,"_127":-5,"_128":-5,"_129":25,"_130":131,"_132":25,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_49":50,"_32":51,"_37":52,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":59,"_60":-5,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":90,"_91":92,"_93":94,"_95":25},"version",6,"changes",[19,20],"aiChatInfo","userId",{"_21":42,"_23":-7,"_24":25,"_26":25,"_27":43,"_29":43},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":-5,"_37":38,"_39":14,"_40":41,"_24":25},"previous","deleted",false,"deletedHere","path","frontend/components","latestPath","fileId","dea96277-3d90-41f7-8b34-da954ceef6fc","name","components","fileType","directory","content","createdAt",["D",1744153290594],"branchVersion","branchId","f1a26f20-14cb-11f0-b108-569c3dd06744",{"_30":44,"_32":45,"_34":46,"_36":47,"_37":48,"_39":14,"_40":41,"_24":25},"frontend/components/LoadingSpinner.tsx","68b504be-14cd-11f0-98df-569c3dd06744","LoadingSpinner.tsx","script","// @jsxImportSource https://esm.sh/react@18.2.0\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface LoadingSpinnerProps {\n size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport function LoadingSpinner({ size = \"medium\" }: LoadingSpinnerProps) {\n const sizeClasses = {\n small: \"w-4 h-4 border-2\",\n medium: \"w-8 h-8 border-3\",\n large: \"w-12 h-12 border-4\"\n };\n\n return (\n

\n );\n}",["D",1744153290594],"id","f1a22d8a-14cb-11f0-b108-569c3dd06744","reactRouter7Example",["D",1744152661331],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Full-stack example ReactRouter7 project","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","e315d710-14cd-11f0-a969-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion",151,"likeCount",3,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","f1a22d8a14cb11f0b108569c3dd06744","tursoHostname","f1a22d8a14cb11f0b108569c3dd06744-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789558275908],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_107":106,"_114":110},"org",{"_107":106,"_108":-5,"_109":110,"_18":61,"_111":112,"_113":25},"branch",{"_13":96,"_32":97,"_49":41,"_98":50,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":51,"_105":106},"isOwned",178,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_32":51,"_37":246,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":59,"_60":-5,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":247,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":248,"_91":249,"_93":250,"_95":25},"tree",[179,183,187,189],"files",[179,180,181,182,183,184,185,186,187,188,189],"counts",{"_169":145,"_170":161,"_171":70,"_172":173,"_174":175},"contents",[137,138,139,140],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_49":164,"_32":165,"_30":166,"_144":-5,"_40":41,"_39":70,"_146":65,"_37":167,"_13":148,"_34":35,"_36":-5,"_24":25,"_150":-5,"_27":168},{"_49":158,"_32":159,"_30":160,"_144":-5,"_40":41,"_39":161,"_146":65,"_37":162,"_13":148,"_34":35,"_36":-5,"_24":25,"_150":-5,"_27":163},{"_49":152,"_32":153,"_30":154,"_144":-5,"_40":41,"_39":155,"_146":65,"_37":156,"_13":148,"_34":35,"_36":-5,"_24":25,"_150":-5,"_27":157},{"_49":141,"_32":142,"_30":143,"_144":-5,"_40":41,"_39":145,"_146":25,"_37":147,"_13":148,"_34":21,"_36":149,"_24":25,"_150":-5,"_27":151},"513e58ee-14cd-11f0-8f60-569c3dd06744","README.md","513e59ca-14cd-11f0-8f60-569c3dd06744","parentId",1,"latest",["D",1744153251229],0,"# Community Message Board\n\nA simple community message board application built with React Router 7, demonstrating a full-stack approach with server-side rendering and client-side navigation.\n\n## Features\n\n- **Server-Side Rendering**: All pages are server-rendered when accessed directly\n- **Client-Side Navigation**: After initial load, navigation happens client-side\n- **Topic Management**: Create and view discussion topics\n- **Messaging System**: Post messages in topics\n- **Direct Message Links**: Link directly to specific messages via timestamps\n- **Search Functionality**: Search topics and messages with URL parameters\n- **Loading Indicators**: Visual feedback during async operations\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema\n│ │ └── queries.ts # Database queries\n│ └── index.ts # Server entry point\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── LoadingSpinner.tsx\n│ │ ├── MessageForm.tsx\n│ │ ├── MessageList.tsx\n│ │ ├── SearchForm.tsx\n│ │ ├── TopicDetail.tsx\n│ │ └── TopicList.tsx\n│ ├── index.html # HTML template\n│ └── index.tsx # Client entry point\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## How It Works\n\n### Server-Side Rendering\n\nThe application uses React Router 7's `createStaticHandler`, `createStaticRouter`, and `StaticRouterProvider` to render pages on the server. When a user directly accesses a URL:\n\n1. The server receives the request\n2. It runs the appropriate loaders/actions for the matched route\n3. The page is rendered with the data and sent to the client\n4. The client hydrates the page with `createBrowserRouter` and `RouterProvider`\n\n### Client-Side Navigation\n\nAfter the initial page load, navigation happens entirely on the client:\n\n1. React Router handles link clicks and form submissions\n2. Data is fetched asynchronously using loaders and actions\n3. A loading spinner is displayed during data fetching\n4. The UI updates without a full page reload\n\n### Data Flow\n\n1. **Topics**: Stored in SQLite with title and creation timestamp\n2. **Messages**: Linked to topics with content and creation timestamp\n3. **Search**: Queries both topics and messages, with results in the URL\n\n### URL Structure\n\n- `/` - Home page with list of topics\n- `/topics/new` - Create new topic\n- `/topics/:topicId` - View a topic and its messages\n- `/topics/:topicId/messages/:messageId` - Direct link to a message\n- `/search?q=query` - Search results\n\n## Getting Started\n\n1. Clone the repository\n2. Run the application with `deno run -A backend/index.ts`\n3. Visit `http://localhost:3000` in your browser\n\n## Implementation Details\n\nThis application demonstrates a \"Val Town fullstack framework\" approach, combining:\n\n- **Hono**: For server-side routing and handling\n- **React Router 7**: For both server and client-side routing\n- **SQLite**: For data persistence\n- **TypeScript**: For type safety across the stack\n\nThe code is structured to be idiomatic and simple, serving as a reference for building full-stack applications with React Router 7.","label",[142],"5343c3fe-14cd-11f0-b10b-569c3dd06744","shared","add21c84-9f00-4405-af88-6ec5134089df",2,["D",1744153254621],[153],"65bd0400-14cd-11f0-9e26-569c3dd06744","frontend","25ba79aa-990f-468a-a9a9-3feab00a24d6",5,["D",1744153285607],[159],"5ae47a2c-14cd-11f0-bbde-569c3dd06744","backend","50aca1db-e744-46f9-883e-ba00e55ffc58",["D",1744153267418],[165],"pulls","branches","forks","envVars",{"_176":148,"_178":148},"connections",{"_176":148,"_177":148},"count","unfilledCount","emptyCount",{"_49":164,"_32":165,"_30":166,"_144":-5,"_40":41,"_39":70,"_146":65,"_37":243,"_13":148,"_34":35,"_36":-5,"_24":25,"_150":-5,"_191":244,"_27":245},{"_49":239,"_32":231,"_30":225,"_144":166,"_40":41,"_39":70,"_146":65,"_37":240,"_13":148,"_34":35,"_36":-5,"_24":25,"_150":-5,"_191":241,"_27":242},{"_49":232,"_32":233,"_30":234,"_144":225,"_40":41,"_39":70,"_146":25,"_37":235,"_13":148,"_34":46,"_36":236,"_24":25,"_150":-5,"_191":237,"_27":238},{"_49":222,"_32":223,"_30":224,"_144":225,"_40":41,"_39":226,"_146":25,"_37":227,"_13":148,"_34":46,"_36":228,"_24":25,"_150":-5,"_191":229,"_27":230},{"_49":158,"_32":159,"_30":160,"_144":-5,"_40":41,"_39":161,"_146":65,"_37":219,"_13":148,"_34":35,"_36":-5,"_24":25,"_150":-5,"_191":220,"_27":221},{"_49":215,"_32":33,"_30":31,"_144":160,"_40":41,"_39":14,"_146":65,"_37":216,"_13":148,"_34":35,"_36":-5,"_24":25,"_150":-5,"_191":217,"_27":218},{"_49":211,"_32":45,"_30":44,"_144":31,"_40":41,"_39":14,"_146":25,"_37":212,"_13":148,"_34":46,"_36":47,"_24":25,"_150":-5,"_191":213,"_27":214},{"_49":204,"_32":205,"_30":206,"_144":160,"_40":41,"_39":161,"_146":25,"_37":207,"_13":148,"_34":21,"_36":208,"_24":25,"_150":-5,"_191":209,"_27":210},{"_49":152,"_32":153,"_30":154,"_144":-5,"_40":41,"_39":155,"_146":65,"_37":201,"_13":148,"_34":35,"_36":-5,"_24":25,"_150":-5,"_191":202,"_27":203},{"_49":194,"_32":195,"_30":196,"_144":154,"_40":41,"_39":155,"_146":65,"_37":197,"_13":148,"_34":46,"_36":198,"_24":25,"_150":-5,"_191":199,"_27":200},{"_49":141,"_32":142,"_30":143,"_144":-5,"_40":41,"_39":145,"_146":25,"_37":190,"_13":148,"_34":21,"_36":149,"_24":25,"_150":-5,"_191":192,"_27":193},["D",1744153251229],"children",[],[142],"5343bcb0-14cd-11f0-b10b-569c3dd06744","types.ts","5343bd78-14cd-11f0-b10b-569c3dd06744",["D",1744153254621],"/**\n * Topic model representing a discussion thread\n */\nexport interface Topic {\n id: number;\n title: string;\n createdAt: string;\n}\n\n/**\n * Message model representing a post within a topic\n */\nexport interface Message {\n id: number;\n topicId: number;\n content: string;\n createdAt: string;\n}\n\n/**\n * Search results containing matching topics and messages\n */\nexport interface SearchResults {\n topics: Topic[];\n messages: Message[];\n query: string;\n}",[],[153,195],["D",1744153254621],[188],[153],"65bcfd3e-14cd-11f0-9e26-569c3dd06744","index.html","65bcfe06-14cd-11f0-9e26-569c3dd06744",["D",1744153285607],"\n\n\n \n \n Community Message Board\n \n \n \n\n\n

\n \n\n",[],[159,205],"68b503ec-14cd-11f0-98df-569c3dd06744",["D",1744153290594],[],[159,33,45],"68b50b94-14cd-11f0-98df-569c3dd06744",["D",1744153290594],[185],[159,33],["D",1744153285607],[184,186],[159],"62297fd0-14cd-11f0-800b-569c3dd06744","queries.ts","6229805c-14cd-11f0-800b-569c3dd06744","4af61b55-4e6e-48ee-bb08-a35baadaf267",4,["D",1744153279616],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { Message, Topic, SearchResults } from \"../../shared/types.ts\";\nimport { MESSAGES_TABLE, TOPICS_TABLE } from \"./migrations.ts\";\n\n/**\n * Get all topics ordered by creation date (newest first)\n */\nexport async function getAllTopics(): Promise {\n const result = await sqlite.execute(`\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n ORDER BY createdAt DESC\n `);\n \n return result.rows as Topic[];\n}\n\n/**\n * Get a single topic by ID\n */\nexport async function getTopicById(id: number): Promise {\n const result = await sqlite.execute(`\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n WHERE id = ?\n `, [id]);\n \n return result.rows.length > 0 ? (result.rows[0] as Topic) : null;\n}\n\n/**\n * Create a new topic\n */\nexport async function createTopic(title: string): Promise {\n const createdAt = new Date().toISOString();\n \n const result = await sqlite.execute(`\n INSERT INTO ${TOPICS_TABLE} (title, createdAt)\n VALUES (?, ?)\n RETURNING id, title, createdAt\n `, [title, createdAt]);\n \n return result.rows[0] as Topic;\n}\n\n/**\n * Get all messages for a topic\n */\nexport async function getMessagesByTopicId(topicId: number): Promise {\n const result = await sqlite.execute(`\n SELECT id, topicId, content, createdAt \n FROM ${MESSAGES_TABLE} \n WHERE topicId = ? \n ORDER BY createdAt ASC\n `, [topicId]);\n \n return result.rows as Message[];\n}\n\n/**\n * Get a single message by ID\n */\nexport async function getMessageById(id: number): Promise {\n const result = await sqlite.execute(`\n SELECT id, topicId, content, createdAt \n FROM ${MESSAGES_TABLE} \n WHERE id = ?\n `, [id]);\n \n return result.rows.length > 0 ? (result.rows[0] as Message) : null;\n}\n\n/**\n * Create a new message in a topic\n */\nexport async function createMessage(topicId: number, content: string): Promise {\n const createdAt = new Date().toISOString();\n \n const result = await sqlite.execute(`\n INSERT INTO ${MESSAGES_TABLE} (topicId, content, createdAt)\n VALUES (?, ?, ?)\n RETURNING id, topicId, content, createdAt\n `, [topicId, content, createdAt]);\n \n return result.rows[0] as Message;\n}\n\n/**\n * Search for topics and messages containing the query string\n */\nexport async function search(query: string): Promise {\n // Search in topics\n const topicsResult = await sqlite.execute(`\n SELECT id, title, createdAt \n FROM ${TOPICS_TABLE} \n WHERE title LIKE ? \n ORDER BY createdAt DESC\n `, [`%${query}%`]);\n \n // Search in messages\n const messagesResult = await sqlite.execute(`\n SELECT m.id, m.topicId, m.content, m.createdAt \n FROM ${MESSAGES_TABLE} m\n JOIN ${TOPICS_TABLE} t ON m.topicId = t.id\n WHERE m.content LIKE ? \n ORDER BY m.createdAt DESC\n `, [`%${query}%`]);\n \n return {\n topics: topicsResult.rows as Topic[],\n messages: messagesResult.rows as Message[],\n query\n };\n}",[],[165,231,223],"database","5ae46a96-14cd-11f0-bbde-569c3dd06744","migrations.ts","5ae46b72-14cd-11f0-bbde-569c3dd06744",["D",1744153267418],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Table names with versioning to allow for schema changes\nexport const TOPICS_TABLE = \"message_board_topics_v1\";\nexport const MESSAGES_TABLE = \"message_board_messages_v1\";\n\n/**\n * Initialize the database schema\n */\nexport async function initializeDatabase() {\n // Create topics table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TOPICS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n createdAt TEXT NOT NULL\n )\n `);\n\n // Create messages table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${MESSAGES_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n topicId INTEGER NOT NULL,\n content TEXT NOT NULL,\n createdAt TEXT NOT NULL,\n FOREIGN KEY (topicId) REFERENCES ${TOPICS_TABLE}(id)\n )\n `);\n\n // Create indexes for faster queries\n await sqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_messages_topicId \n ON ${MESSAGES_TABLE} (topicId)\n `);\n\n // Seed initial data if the topics table is empty\n const existingTopics = await sqlite.execute(`SELECT COUNT(*) as count FROM ${TOPICS_TABLE}`);\n \n if (existingTopics.rows[0].count === 0) {\n await seedInitialData();\n }\n}\n\n/**\n * Seed the database with initial data for demonstration\n */\nasync function seedInitialData() {\n // Insert sample topics\n await sqlite.execute(`\n INSERT INTO ${TOPICS_TABLE} (title, createdAt) VALUES\n ('Welcome to the Message Board', '${new Date().toISOString()}'),\n ('Tips and Tricks for Val Town', '${new Date().toISOString()}'),\n ('Introduce Yourself', '${new Date().toISOString()}')\n `);\n\n // Get the IDs of the inserted topics\n const topics = await sqlite.execute(`SELECT id FROM ${TOPICS_TABLE} LIMIT 3`);\n \n // Insert sample messages for each topic\n if (topics.rows.length > 0) {\n const welcomeTopicId = topics.rows[0].id;\n const tipsTopicId = topics.rows[1].id;\n const introTopicId = topics.rows[2].id;\n\n await sqlite.execute(`\n INSERT INTO ${MESSAGES_TABLE} (topicId, content, createdAt) VALUES\n (${welcomeTopicId}, 'Welcome to our community message board! Feel free to browse around and join the discussions.', '${new Date().toISOString()}'),\n (${welcomeTopicId}, 'If you have any questions, just post them here!', '${new Date(Date.now() - 3600000).toISOString()}'),\n (${tipsTopicId}, 'Val Town makes it easy to build and share serverless functions.', '${new Date().toISOString()}'),\n (${tipsTopicId}, 'You can use TypeScript for better type safety in your projects.', '${new Date(Date.now() - 7200000).toISOString()}'),\n (${introTopicId}, 'Hi everyone! I\\'m the creator of this message board example.', '${new Date().toISOString()}')\n `);\n }\n}",[],[165,231,233],"5ae47cc0-14cd-11f0-bbde-569c3dd06744",["D",1744153267418],[181,182],[165,231],["D",1744153267418],[180],[165],["D",1744152661331],["D",1789558275908],{"_107":106,"_114":110},{"_107":106,"_108":-5,"_109":110,"_18":61,"_111":112,"_113":25},{"_13":96,"_32":97,"_49":41,"_98":50,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":51,"_105":106},"ctx",{"_89":-5,"_134":284,"_285":286,"_287":288,"_289":25,"_290":25,"_291":25,"_292":65,"_293":-5,"_294":-7,"_295":-7,"_296":148,"_297":25,"_298":25,"_299":-5,"_300":25,"_301":25,"_302":25,"_303":-5},"ENV",{"_255":256,"_257":258,"_259":97,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283},"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 · v6