[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_229":230,"_231":232},"routes/_app.x.$handle.$name",{"_93":92,"_31":42,"_101":83,"_26":102,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":24,"_116":117,"_118":24,"_119":-5,"_120":-5,"_121":122},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_40":41,"_31":42,"_35":43,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":-5,"_50":-5,"_18":51,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":76,"_77":78,"_79":80,"_81":24},"version",6,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":20,"_33":34,"_35":36,"_37":14,"_38":39,"_23":24},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","3251dc1c-7170-11f0-9b62-0224a6c84d84","name","fileType","content","# Contact Form Application\n\nA simple contact form application that collects user submissions and stores them in SQLite database.\n\n## Features\n\n- **Contact Form**: Clean, responsive form with name, email, and message fields\n- **Form Validation**: Client-side and server-side validation\n- **SQL Storage**: All submissions are stored in SQLite database\n- **Submissions Display**: View all recent submissions on the same page\n- **Real-time Updates**: Form submissions update the display immediately\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema and table creation\n│ │ └── queries.ts # Database query functions\n│ ├── routes/\n│ │ └── submissions.ts # API routes for form submissions\n│ └── index.ts # Main Hono app entry point\n├── frontend/\n│ └── index.html # Contact form UI\n└── README.md\n```\n\n## API Endpoints\n\n- `GET /api/submissions` - Retrieve all form submissions\n- `POST /api/submissions` - Create a new form submission\n\n## Database Schema\n\nThe `form_submissions_1` table contains:\n- `id` (INTEGER PRIMARY KEY) - Auto-incrementing submission ID\n- `name` (TEXT NOT NULL) - Submitter's name\n- `email` (TEXT NOT NULL) - Submitter's email address\n- `message` (TEXT NOT NULL) - The message content\n- `created_at` (DATETIME) - Timestamp of submission\n\n## Usage\n\n1. Visit the application URL\n2. Fill out the contact form with your name, email, and message\n3. Click \"Submit Message\"\n4. View your submission appear in the \"Recent Submissions\" section below the form\n\n## Technologies Used\n\n- **Backend**: Hono framework with TypeScript\n- **Database**: SQLite via Val Town's sqlite utility\n- **Frontend**: Vanilla HTML/CSS/JavaScript with TailwindCSS\n- **Styling**: TailwindCSS via CDN","createdAt",["D",1754338714289],"branchVersion","branchId","ff03c8a2-716f-11f0-8ab5-0224a6c84d84","id","ff03692a-716f-11f0-8ab5-0224a6c84d84","test-Form",["D",1754338628214],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019866c1-0cc7-754e-aedf-a14149adb38a","pinnedFileId","1e4f490c-7170-11f0-a212-0224a6c84d84","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019866c1-0cc7-754e-aedf-a65187b0b0e5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_93":92,"_100":96},"org",{"_93":92,"_94":-5,"_95":96,"_18":51,"_97":98,"_99":24},"branch",{"_13":82,"_31":83,"_40":39,"_84":41,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":42,"_91":92},"isOwned",7,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","Krgutierrez","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zMGhDbVE4R2tXVDgyU1VoaW1xWndSVEhyZGcifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_40":41,"_31":42,"_35":225,"_44":-5,"_45":24,"_46":47,"_48":47,"_49":-5,"_50":-5,"_18":51,"_52":53,"_54":55,"_56":55,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":226,"_77":227,"_79":228,"_81":24},"tree",[156,163,165],"files",[156,157,158,159,160,161,162,163,164,165],"counts",{"_145":59,"_146":147,"_148":59,"_149":150,"_151":152},"contents",[123,124,125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_40":139,"_31":140,"_29":141,"_127":-5,"_38":39,"_37":142,"_128":55,"_35":143,"_13":59,"_32":137,"_33":-5,"_23":24,"_130":-5,"_26":144},{"_40":132,"_31":133,"_29":134,"_127":-5,"_38":39,"_37":135,"_128":55,"_35":136,"_13":59,"_32":137,"_33":-5,"_23":24,"_130":-5,"_26":138},{"_40":126,"_31":27,"_29":30,"_127":-5,"_38":39,"_37":14,"_128":55,"_35":129,"_13":59,"_32":20,"_33":34,"_23":24,"_130":-5,"_26":131},"3251db40-7170-11f0-9b62-0224a6c84d84","parentId","latest",["D",1754338714289],"label",[27],"2c1b6eee-7170-11f0-ace2-0224a6c84d84","frontend","230c701c-1bc4-4fe7-80f4-24748c2e125f",5,["D",1754338703865],"directory",[133],"1139b626-7170-11f0-afe7-0224a6c84d84","backend","00a8993b-4c73-4008-a568-752cba42ca1f",1,["D",1754338658766],[140],"pulls","branches",2,"forks","envVars",{"_153":59,"_155":59},"connections",{"_153":59,"_154":59},"count","unfilledCount","emptyCount",{"_40":139,"_31":140,"_29":141,"_127":-5,"_38":39,"_37":142,"_128":55,"_35":222,"_13":59,"_32":137,"_33":-5,"_23":24,"_130":-5,"_167":223,"_26":224},{"_40":218,"_31":210,"_29":205,"_127":141,"_38":39,"_37":142,"_128":55,"_35":219,"_13":59,"_32":137,"_33":-5,"_23":24,"_130":-5,"_167":220,"_26":221},{"_40":211,"_31":212,"_29":213,"_127":205,"_38":39,"_37":142,"_128":55,"_35":214,"_13":59,"_32":184,"_33":215,"_23":24,"_130":-5,"_167":216,"_26":217},{"_40":202,"_31":203,"_29":204,"_127":205,"_38":39,"_37":147,"_128":55,"_35":206,"_13":59,"_32":184,"_33":207,"_23":24,"_130":-5,"_167":208,"_26":209},{"_40":198,"_31":197,"_29":191,"_127":141,"_38":39,"_37":192,"_128":55,"_35":199,"_13":59,"_32":137,"_33":-5,"_23":24,"_130":-5,"_167":200,"_26":201},{"_40":188,"_31":189,"_29":190,"_127":191,"_38":39,"_37":192,"_128":55,"_35":193,"_13":59,"_32":184,"_33":194,"_23":24,"_130":-5,"_167":195,"_26":196},{"_40":180,"_31":181,"_29":53,"_127":141,"_38":39,"_37":182,"_128":24,"_35":183,"_13":59,"_32":184,"_33":185,"_23":24,"_130":-5,"_167":186,"_26":187},{"_40":132,"_31":133,"_29":134,"_127":-5,"_38":39,"_37":135,"_128":55,"_35":177,"_13":59,"_32":137,"_33":-5,"_23":24,"_130":-5,"_167":178,"_26":179},{"_40":170,"_31":171,"_29":172,"_127":134,"_38":39,"_37":135,"_128":55,"_35":173,"_13":59,"_32":20,"_33":174,"_23":24,"_130":-5,"_167":175,"_26":176},{"_40":126,"_31":27,"_29":30,"_127":-5,"_38":39,"_37":14,"_128":55,"_35":166,"_13":59,"_32":20,"_33":34,"_23":24,"_130":-5,"_167":168,"_26":169},["D",1754338714289],"children",[],[27],"2c1b512a-7170-11f0-ace2-0224a6c84d84","index.html","2c1b51d4-7170-11f0-ace2-0224a6c84d84",["D",1754338703865],"\n\n\n \n \n Contact Form\n \n \n\n\n

Contact Form

\n \n \n

\n Success! Your message has been submitted successfully.\n

\n\n \n

\n Error! \n

\n\n \n \n\n \n

Recent Submissions

Loading submissions...

\n\n \n\n",[],[133,171],["D",1754338703865],[164],[133],"1e4f4826-7170-11f0-a212-0224a6c84d84","index.ts",4,["D",1754338680717],"script","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { initializeDatabase } from \"./database/migrations.ts\";\nimport submissionsRouter from \"./routes/submissions.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err) => Promise.reject(err));\n\n// Initialize database on startup\nawait initializeDatabase();\n\n// API routes\napp.route(\"/api/submissions\", submissionsRouter);\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve main page\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[140,181],"1933748e-7170-11f0-b3c3-0224a6c84d84","submissions.ts","1933756a-7170-11f0-b3c3-0224a6c84d84","fb572a45-43f8-4d2b-b758-c55b6db1baa8",3,["D",1754338672141],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { createSubmission, getAllSubmissions } from \"../database/queries.ts\";\n\nconst app = new Hono();\n\n// Get all submissions\napp.get(\"/\", async (c) => {\n try {\n const submissions = await getAllSubmissions();\n return c.json(submissions);\n } catch (error) {\n console.error(\"Error fetching submissions:\", error);\n return c.json({ error: \"Failed to fetch submissions\" }, 500);\n }\n});\n\n// Create new submission\napp.post(\"/\", async (c) => {\n try {\n const body = await c.req.json();\n \n // Validate required fields\n if (!body.name || !body.email || !body.message) {\n return c.json({ error: \"Name, email, and message are required\" }, 400);\n }\n\n // Basic email validation\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n if (!emailRegex.test(body.email)) {\n return c.json({ error: \"Invalid email format\" }, 400);\n }\n\n const submission = await createSubmission({\n name: body.name.trim(),\n email: body.email.trim().toLowerCase(),\n message: body.message.trim()\n });\n\n return c.json(submission, 201);\n } catch (error) {\n console.error(\"Error creating submission:\", error);\n return c.json({ error: \"Failed to create submission\" }, 500);\n }\n});\n\nexport default app;",[],[140,197,189],"routes","19337d30-7170-11f0-b3c3-0224a6c84d84",["D",1754338672141],[161],[140,197],"14a21d08-7170-11f0-8696-0224a6c84d84","queries.ts","14a21d9e-7170-11f0-8696-0224a6c84d84","0f1a919d-c928-4f3a-9f31-c60694ee8127",["D",1754338664485],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { TABLE_NAME, FormSubmission } from \"./migrations.ts\";\n\nexport async function createSubmission(submission: Omit): Promise {\n const result = await sqlite.execute(\n `INSERT INTO ${TABLE_NAME} (name, email, message) VALUES (?, ?, ?) RETURNING *`,\n [submission.name, submission.email, submission.message]\n );\n \n return result.rows[0] as FormSubmission;\n}\n\nexport async function getAllSubmissions(): Promise {\n const result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} ORDER BY created_at DESC`);\n return result.rows as FormSubmission[];\n}\n\nexport async function getSubmissionById(id: number): Promise {\n const result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [id]);\n return result.rows[0] as FormSubmission || null;\n}",[],[140,210,203],"database","1139a7e4-7170-11f0-afe7-0224a6c84d84","migrations.ts","1139a8c0-7170-11f0-afe7-0224a6c84d84",["D",1754338658766],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\nexport const TABLE_NAME = 'form_submissions_1';\n\nexport interface FormSubmission {\n id?: number;\n name: string;\n email: string;\n message: string;\n created_at?: string;\n}\n\nexport async function initializeDatabase() {\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n email TEXT NOT NULL,\n message TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )`);\n}",[],[140,210,212],"1139b8d8-7170-11f0-afe7-0224a6c84d84",["D",1754338658766],[158,159],[140,210],["D",1754338658766],[157,160,162],[140],["D",1754338628214],{"_93":92,"_100":96},{"_93":92,"_94":-5,"_95":96,"_18":51,"_97":98,"_99":24},{"_13":82,"_31":83,"_40":39,"_84":41,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":42,"_91":92},"ctx",{"_75":-5,"_120":262,"_263":264,"_265":266,"_267":24,"_268":24,"_269":24,"_270":55,"_271":-5,"_272":-7,"_273":-7,"_274":59,"_275":24,"_276":24,"_277":-5,"_278":24,"_279":24,"_280":24,"_281":-5},"ENV",{"_233":234,"_235":236,"_237":83,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","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