Job Board with Chat

\n Welcome, \n \n

\n\n

\n \n

Post a Job

\n \n

\n\n

Job Listings

\n \n

Loading jobs...

\n\n \n

Discussion Chat

\n \n

Loading messages...

\n \n

\n\n \n\n \n\n","label",[159,64],"frontend","pulls","branches","forks","envVars",{"_167":26,"_169":26},"connections",{"_167":26,"_168":26},"count","unfilledCount","emptyCount",{"_33":284,"_13":254,"_62":247,"_43":-5,"_35":36,"_151":275,"_152":91,"_37":285,"_39":26,"_65":212,"_155":-5,"_66":24,"_157":-5,"_190":286,"_17":287},{"_33":280,"_13":271,"_62":265,"_43":247,"_35":36,"_151":275,"_152":91,"_37":281,"_39":26,"_65":212,"_155":-5,"_66":24,"_157":-5,"_190":282,"_17":283},{"_33":272,"_13":273,"_62":274,"_43":265,"_35":36,"_151":275,"_152":91,"_37":276,"_39":26,"_65":199,"_155":277,"_66":24,"_157":-5,"_190":278,"_17":279},{"_33":262,"_13":263,"_62":264,"_43":265,"_35":36,"_151":266,"_152":91,"_37":267,"_39":26,"_65":199,"_155":268,"_66":24,"_157":-5,"_190":269,"_17":270},{"_33":255,"_13":186,"_62":256,"_43":247,"_35":36,"_151":257,"_152":91,"_37":258,"_39":26,"_65":21,"_155":259,"_66":24,"_157":-5,"_190":260,"_17":261},{"_33":245,"_13":246,"_62":89,"_43":247,"_35":36,"_151":248,"_152":91,"_37":249,"_39":154,"_65":250,"_155":251,"_66":24,"_157":-5,"_190":252,"_17":253},{"_33":241,"_13":159,"_62":150,"_43":-5,"_35":36,"_151":40,"_152":91,"_37":242,"_39":26,"_65":212,"_155":-5,"_66":24,"_157":-5,"_190":243,"_17":244},{"_33":234,"_13":186,"_62":235,"_43":150,"_35":36,"_151":236,"_152":91,"_37":237,"_39":26,"_65":21,"_155":238,"_66":24,"_157":-5,"_190":239,"_17":240},{"_33":226,"_13":227,"_62":228,"_43":150,"_35":36,"_151":229,"_152":91,"_37":230,"_39":26,"_65":21,"_155":231,"_66":24,"_157":-5,"_190":232,"_17":233},{"_33":149,"_13":64,"_62":63,"_43":150,"_35":36,"_151":72,"_152":91,"_37":223,"_39":154,"_65":21,"_155":156,"_66":24,"_157":-5,"_190":224,"_17":225},{"_33":215,"_13":216,"_62":217,"_43":150,"_35":36,"_151":218,"_152":91,"_37":219,"_39":26,"_65":199,"_155":220,"_66":24,"_157":-5,"_190":221,"_17":222},{"_33":210,"_13":203,"_62":196,"_43":-5,"_35":36,"_151":197,"_152":91,"_37":211,"_39":26,"_65":212,"_155":-5,"_66":24,"_157":-5,"_190":213,"_17":214},{"_33":204,"_13":186,"_62":205,"_43":196,"_35":36,"_151":114,"_152":91,"_37":206,"_39":26,"_65":21,"_155":207,"_66":24,"_157":-5,"_190":208,"_17":209},{"_33":193,"_13":194,"_62":195,"_43":196,"_35":36,"_151":197,"_152":91,"_37":198,"_39":26,"_65":199,"_155":200,"_66":24,"_157":-5,"_190":201,"_17":202},{"_33":185,"_13":186,"_62":187,"_43":-5,"_35":36,"_151":154,"_152":91,"_37":188,"_39":26,"_65":21,"_155":189,"_66":24,"_157":-5,"_190":191,"_17":192},"1329a3ba-31e2-11f0-a80a-569c3dd06744","README.md","1329a46e-31e2-11f0-a80a-569c3dd06744",["D",1747350750227],"# Job Board with Chat\n\nA simple application that allows users to:\n- Post job opportunities\n- View job listings\n- Participate in a public chat room to discuss opportunities\n\n## Features\n\n- Job posting creation and listing\n- Real-time public chat room\n- Simple username-based authentication\n- Mobile-responsive design\n\n## Project Structure\n\n- `/backend` - Hono API server with SQLite database\n- `/frontend` - HTML/JS frontend with Tailwind CSS\n- `/shared` - Shared types and utilities\n\n## Technologies Used\n\n- Backend: Hono, SQLite\n- Frontend: HTML, JavaScript, Tailwind CSS\n- Shared: TypeScript\n\n## Getting Started\n\nVisit the app and start by entering a username to access the job board and chat functionality.","children",[],[186],"26a1af28-31e2-11f0-81a3-569c3dd06744","utils.ts","26a1affa-31e2-11f0-81a3-569c3dd06744","bb8c29c2-0aaf-4e2b-aaec-192b6ba86ce6",5,["D",1747350782892],"script","// Shared types for both frontend and backend\nexport interface Job {\n id: number;\n title: string;\n company: string;\n description: string;\n contact: string;\n created_at: number;\n}\n\nexport interface Message {\n id: number;\n username: string;\n content: string;\n created_at: number;\n}\n\n// Format date for display\nexport function formatDate(timestamp: number): string {\n return new Date(timestamp).toLocaleString();\n}\n\n// Sanitize HTML to prevent XSS\nexport function sanitizeHTML(str: string): string {\n return str\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}",[],[203,194],"shared","5729430e-31e2-11f0-8cb2-569c3dd06744","572943b8-31e2-11f0-8cb2-569c3dd06744",["D",1747350864299],"# Shared\n\nThis directory contains code that is shared between the frontend and backend.\n\n## Structure\n\n- `utils.ts` - Shared types and utility functions\n\n## Contents\n\n- TypeScript interfaces for Jobs and Messages\n- Utility functions for date formatting\n- HTML sanitization functions to prevent XSS attacks",[],[203,186],"26a1b7ac-31e2-11f0-81a3-569c3dd06744",["D",1747350782892],"directory",[182,183],[203],"44125116-31e2-11f0-869e-569c3dd06744","index.js","441251fc-31e2-11f0-869e-569c3dd06744",7,["D",1747350832281],"import { formatDate, sanitizeHTML } from \"/shared/utils.ts\";\nimport { parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n// State management\nlet username = localStorage.getItem(\"username\") || \"\";\nlet jobs = [];\nlet messages = [];\n\n// DOM elements\nconst loginScreen = document.getElementById(\"login-screen\");\nconst app = document.getElementById(\"app\");\nconst usernameInput = document.getElementById(\"username-input\");\nconst loginButton = document.getElementById(\"login-button\");\nconst usernameDisplay = document.getElementById(\"username-display\");\nconst logoutButton = document.getElementById(\"logout-button\");\nconst jobForm = document.getElementById(\"job-form\");\nconst jobTitle = document.getElementById(\"job-title\");\nconst jobCompany = document.getElementById(\"job-company\");\nconst jobDescription = document.getElementById(\"job-description\");\nconst jobContact = document.getElementById(\"job-contact\");\nconst jobsContainer = document.getElementById(\"jobs-container\");\nconst chatContainer = document.getElementById(\"chat-container\");\nconst chatForm = document.getElementById(\"chat-form\");\nconst chatInput = document.getElementById(\"chat-input\");\nconst viewSourceLink = document.getElementById(\"view-source\");\n\n// Set up view source link\ntry {\n const projectInfo = parseProject(import.meta.url);\n if (projectInfo && projectInfo.links && projectInfo.links.self) {\n viewSourceLink.href = projectInfo.links.self.project.replace(\"esm.sh\", \"val.town\");\n }\n} catch (e) {\n console.error(\"Error setting up view source link:\", e);\n // Fallback to a generic link\n viewSourceLink.href = \"https://val.town\";\n}\n\n// Check if user is logged in\nfunction checkAuth() {\n if (username) {\n loginScreen.classList.add(\"hidden\");\n app.classList.remove(\"hidden\");\n usernameDisplay.textContent = username;\n } else {\n loginScreen.classList.remove(\"hidden\");\n app.classList.add(\"hidden\");\n }\n}\n\n// Login functionality\nloginButton.addEventListener(\"click\", () => {\n const inputUsername = usernameInput.value.trim();\n if (inputUsername) {\n username = inputUsername;\n localStorage.setItem(\"username\", username);\n checkAuth();\n loadJobs();\n loadMessages();\n }\n});\n\n// Allow pressing Enter to login\nusernameInput.addEventListener(\"keypress\", (e) => {\n if (e.key === \"Enter\") {\n loginButton.click();\n }\n});\n\n// Logout functionality\nlogoutButton.addEventListener(\"click\", () => {\n username = \"\";\n localStorage.removeItem(\"username\");\n checkAuth();\n});\n\n// Load jobs from API\nasync function loadJobs() {\n try {\n const response = await fetch(\"/api/jobs\");\n if (!response.ok) throw new Error(\"Failed to load jobs\");\n \n jobs = await response.json();\n renderJobs();\n } catch (error) {\n console.error(\"Error loading jobs:\", error);\n jobsContainer.innerHTML = '

Error loading jobs. Please try again.

';\n }\n}\n\n// Render jobs to the DOM\nfunction renderJobs() {\n if (jobs.length === 0) {\n jobsContainer.innerHTML = '

No jobs posted yet. Be the first!

';\n return;\n }\n\n jobsContainer.innerHTML = jobs.map(job => `\n

${sanitizeHTML(job.title)}

\n ${formatDate(job.created_at)}\n

${sanitizeHTML(job.company)}

${sanitizeHTML(job.description)}

Contact: ${sanitizeHTML(job.contact)}

\n `).join(\"\");\n}\n\n// Submit new job\njobForm.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n \n const newJob = {\n title: jobTitle.value.trim(),\n company: jobCompany.value.trim(),\n description: jobDescription.value.trim(),\n contact: jobContact.value.trim()\n };\n \n try {\n const response = await fetch(\"/api/jobs\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(newJob)\n });\n \n if (!response.ok) throw new Error(\"Failed to post job\");\n \n const job = await response.json();\n jobs.unshift(job); // Add to beginning of array\n renderJobs();\n \n // Clear form\n jobForm.reset();\n } catch (error) {\n console.error(\"Error posting job:\", error);\n alert(\"Error posting job. Please try again.\");\n }\n});\n\n// Load chat messages\nasync function loadMessages() {\n try {\n const response = await fetch(\"/api/messages\");\n if (!response.ok) throw new Error(\"Failed to load messages\");\n \n messages = await response.json();\n messages.reverse(); // Show oldest first\n renderMessages();\n } catch (error) {\n console.error(\"Error loading messages:\", error);\n chatContainer.innerHTML = '

Error loading messages. Please try again.

';\n }\n}\n\n// Render messages to the DOM\nfunction renderMessages() {\n if (messages.length === 0) {\n chatContainer.innerHTML = '

No messages yet. Start the conversation!

';\n return;\n }\n\n chatContainer.innerHTML = messages.map(message => `\n

\n ${sanitizeHTML(message.username)}\n ${formatDate(message.created_at)}\n

${sanitizeHTML(message.content)}

\n `).join(\"\");\n \n // Scroll to bottom\n chatContainer.scrollTop = chatContainer.scrollHeight;\n}\n\n// Submit new message\nchatForm.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n \n const content = chatInput.value.trim();\n if (!content) return;\n \n const newMessage = {\n username,\n content\n };\n \n try {\n const response = await fetch(\"/api/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(newMessage)\n });\n \n if (!response.ok) throw new Error(\"Failed to send message\");\n \n const message = await response.json();\n messages.push(message);\n renderMessages();\n \n // Clear input\n chatForm.reset();\n } catch (error) {\n console.error(\"Error sending message:\", error);\n alert(\"Error sending message. Please try again.\");\n }\n});\n\n// Poll for new messages every 5 seconds\nfunction startMessagePolling() {\n setInterval(loadMessages, 5000);\n}\n\n// Initialize app\ncheckAuth();\nif (username) {\n loadJobs();\n loadMessages();\n startMessagePolling();\n}",[],[159,216],["D",1747350848241],[],[159,64],"48928bd4-31e2-11f0-9a73-569c3dd06744","favicon.svg","48928ca6-31e2-11f0-9a73-569c3dd06744",9,["D",1747350839831],"\n",[],[159,227],"55290cba-31e2-11f0-997f-569c3dd06744","55290d5a-31e2-11f0-997f-569c3dd06744",12,["D",1747350860956],"# Frontend\n\nThis directory contains the client-side code for the Job Board with Chat application.\n\n## Structure\n\n- `index.html` - Main HTML template\n- `index.js` - Frontend JavaScript\n- `favicon.svg` - Application icon\n\n## Features\n\n- Simple username-based authentication\n- Job posting form\n- Job listings display\n- Real-time chat functionality\n\n## Technologies\n\n- HTML5\n- JavaScript (ES6+)\n- Tailwind CSS for styling",[],[159,186],"34894dda-31e2-11f0-9cdd-569c3dd06744",["D",1747350806196],[177,178,179,180],[159],"460294ae-31e2-11f0-9aeb-569c3dd06744","index.ts","68626bad-e95a-4ef2-8691-d49175d38d7f",8,["D",1747350835531],"http","import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { cors } from \"https://esm.sh/hono@3.12.6/cors\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { initDatabase } from \"./database/migrations.ts\";\nimport { \n getAllJobs, \n createJob, \n getRecentMessages, \n createMessage \n} from \"./database/queries.ts\";\n\n// Initialize the app\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Enable CORS\napp.use(\"*\", cors());\n\n// Initialize database on startup\nawait initDatabase();\n\n// API Routes\napp.get(\"/api/jobs\", async (c) => {\n const jobs = await getAllJobs();\n return c.json(jobs);\n});\n\napp.post(\"/api/jobs\", async (c) => {\n const body = await c.req.json();\n \n // Validate required fields\n if (!body.title || !body.company || !body.description || !body.contact) {\n return c.json({ error: \"Missing required fields\" }, 400);\n }\n \n const job = await createJob({\n title: body.title,\n company: body.company,\n description: body.description,\n contact: body.contact\n });\n \n return c.json(job, 201);\n});\n\napp.get(\"/api/messages\", async (c) => {\n const messages = await getRecentMessages();\n return c.json(messages);\n});\n\napp.post(\"/api/messages\", async (c) => {\n const body = await c.req.json();\n \n // Validate required fields\n if (!body.username || !body.content) {\n return c.json({ error: \"Missing required fields\" }, 400);\n }\n \n const message = await createMessage({\n username: body.username,\n content: body.content\n });\n \n return c.json(message, 201);\n});\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 index.html for the root path\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;",[],[254,246],"backend","52b9bb8c-31e2-11f0-b3b0-569c3dd06744","52b9bc2c-31e2-11f0-b3b0-569c3dd06744",11,["D",1747350856856],"# Backend\n\nThis directory contains the server-side code for the Job Board with Chat application.\n\n## Structure\n\n- `index.ts` - Main entry point with Hono API routes\n- `database/` - Database setup and queries\n - `migrations.ts` - Database schema definitions\n - `queries.ts` - Database query functions\n\n## API Endpoints\n\n### Jobs\n\n- `GET /api/jobs` - Get all job listings\n- `POST /api/jobs` - Create a new job listing\n\n### Messages\n\n- `GET /api/messages` - Get recent chat messages\n- `POST /api/messages` - Create a new chat message\n\n## Database\n\nThe application uses SQLite for data storage with two main tables:\n\n1. `jobs_v1` - Stores job listings\n2. `messages_v1` - Stores chat messages",[],[254,186],"1bad031a-31e2-11f0-997f-569c3dd06744","queries.ts","1bad03e2-31e2-11f0-997f-569c3dd06744","16bfafca-4754-4171-9c1c-87d8d447fc5d",3,["D",1747350764497],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { JOBS_TABLE, MESSAGES_TABLE } from \"./migrations.ts\";\n\n// Types\nexport interface Job {\n id: number;\n title: string;\n company: string;\n description: string;\n contact: string;\n created_at: number;\n}\n\nexport interface Message {\n id: number;\n username: string;\n content: string;\n created_at: number;\n}\n\n// Job queries\nexport async function getAllJobs(): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${JOBS_TABLE} ORDER BY created_at DESC`\n );\n return result.rows;\n}\n\nexport async function createJob(job: Omit): Promise {\n const created_at = Date.now();\n const result = await sqlite.execute<{ id: number }>(\n `INSERT INTO ${JOBS_TABLE} (title, company, description, contact, created_at)\n VALUES (?, ?, ?, ?, ?)\n RETURNING id`,\n [job.title, job.company, job.description, job.contact, created_at]\n );\n \n return {\n id: result.rows[0].id,\n ...job,\n created_at\n };\n}\n\n// Message queries\nexport async function getRecentMessages(limit = 50): Promise {\n const result = await sqlite.execute(\n `SELECT * FROM ${MESSAGES_TABLE} \n ORDER BY created_at DESC \n LIMIT ?`,\n [limit]\n );\n return result.rows;\n}\n\nexport async function createMessage(message: Omit): Promise {\n const created_at = Date.now();\n const result = await sqlite.execute<{ id: number }>(\n `INSERT INTO ${MESSAGES_TABLE} (username, content, created_at)\n VALUES (?, ?, ?)\n RETURNING id`,\n [message.username, message.content, created_at]\n );\n \n return {\n id: result.rows[0].id,\n ...message,\n created_at\n };\n}",[],[254,271,263],"database","16514958-31e2-11f0-87b4-569c3dd06744","migrations.ts","16514a16-31e2-11f0-87b4-569c3dd06744",2,["D",1747350755519],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Table names - use versioning for schema changes\nexport const JOBS_TABLE = \"jobs_v1\";\nexport const MESSAGES_TABLE = \"messages_v1\";\n\n/**\n * Initialize database tables\n */\nexport async function initDatabase() {\n // Create jobs table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${JOBS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n company TEXT NOT NULL,\n description TEXT NOT NULL,\n contact TEXT NOT NULL,\n created_at INTEGER NOT NULL\n )\n `);\n\n // Create messages table for chat\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${MESSAGES_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n content TEXT NOT NULL,\n created_at INTEGER NOT NULL\n )\n `);\n}",[],[254,271,273],"16516f5a-31e2-11f0-87b4-569c3dd06744",["D",1747350755519],[172,173],[254,271],"16516d66-31e2-11f0-87b4-569c3dd06744",["D",1747350755519],[171,174,175],[254],["D",1747350727452],{"_11":12,"_127":69},{"_11":12,"_123":-5,"_68":69,"_30":67,"_124":125,"_126":24},{"_39":114,"_13":16,"_33":36,"_115":79,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":14,"_122":12},"ctx",{"_52":-5,"_146":325,"_326":327,"_328":329,"_330":24,"_331":24,"_332":24,"_333":91,"_334":-5,"_335":-7,"_336":-7,"_337":26,"_338":24,"_339":24,"_340":-5,"_341":24,"_342":24,"_343":24,"_344":-5},"ENV",{"_296":297,"_298":299,"_300":16,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

History · index.html