\n {/* Header */}\n

💼 Job Board & Chat

Find opportunities and connect with others

\n\n {/* Navigation Tabs */}\n

\n setActiveTab('jobs')}\n className={`py-4 px-1 border-b-2 font-medium text-sm ${\n activeTab === 'jobs'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n 📋 Job Postings\n \n setActiveTab('chat')}\n className={`py-4 px-1 border-b-2 font-medium text-sm ${\n activeTab === 'chat'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n 💬 Chat Room\n \n

\n\n {/* Main Content */}\n

\n {activeTab === 'jobs' && }\n {activeTab === 'chat' && }\n

\n );\n}",[],[230,236,242],{"_103":249,"_95":250,"_155":251,"_157":237,"_158":137,"_159":160,"_161":162,"_105":252,"_100":32,"_164":182,"_166":253,"_167":22,"_168":-5,"_169":254,"_98":255},"ef3f9c10-3fb6-11f0-9264-76b3cceeab13","ChatRoom.tsx","718c44b2-eb34-47fe-a7e0-04462b84d8af",["D",1748871537859],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { ChatMessage, CreateMessageRequest, ApiResponse } from \"../../shared/types.ts\";\n\nexport default function ChatRoom() {\n const [messages, setMessages] = useState([]);\n const [username, setUsername] = useState('');\n const [message, setMessage] = useState('');\n const [loading, setLoading] = useState(true);\n const [sending, setSending] = useState(false);\n const [error, setError] = useState(null);\n const messagesEndRef = useRef(null);\n const chatContainerRef = useRef(null);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n };\n\n const fetchMessages = async () => {\n try {\n const response = await fetch('/api/chat/messages');\n const result: ApiResponse = await response.json();\n \n if (result.success && result.data) {\n setMessages(result.data);\n setError(null);\n } else {\n setError(result.error || 'Failed to fetch messages');\n }\n } catch (err) {\n setError('Failed to fetch messages');\n } finally {\n setLoading(false);\n }\n };\n\n const sendMessage = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!username.trim() || !message.trim()) {\n return;\n }\n\n setSending(true);\n setError(null);\n\n try {\n const messageData: CreateMessageRequest = {\n username: username.trim(),\n message: message.trim()\n };\n\n const response = await fetch('/api/chat/messages', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(messageData)\n });\n\n const result: ApiResponse = await response.json();\n\n if (result.success && result.data) {\n setMessages(prev => [...prev, result.data!]);\n setMessage('');\n setTimeout(scrollToBottom, 100);\n } else {\n setError(result.error || 'Failed to send message');\n }\n } catch (err) {\n setError('Failed to send message');\n } finally {\n setSending(false);\n }\n };\n\n const refreshMessages = async () => {\n await fetchMessages();\n setTimeout(scrollToBottom, 100);\n };\n\n useEffect(() => {\n fetchMessages();\n }, []);\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const formatTime = (dateString: string) => {\n return new Date(dateString).toLocaleTimeString('en-US', {\n hour: '2-digit',\n minute: '2-digit'\n });\n };\n\n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n const today = new Date();\n const yesterday = new Date(today);\n yesterday.setDate(yesterday.getDate() - 1);\n\n if (date.toDateString() === today.toDateString()) {\n return 'Today';\n } else if (date.toDateString() === yesterday.toDateString()) {\n return 'Yesterday';\n } else {\n return date.toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric'\n });\n }\n };\n\n // Group messages by date\n const groupedMessages = messages.reduce((groups, message) => {\n const date = new Date(message.created_at).toDateString();\n if (!groups[date]) {\n groups[date] = [];\n }\n groups[date].push(message);\n return groups;\n }, {} as Record);\n\n if (loading) {\n return (\n

Loading chat...

\n );\n }\n\n return (\n

\n {/* Chat Header */}\n

💬 Public Chat Room

Discuss job opportunities and connect with others

\n \n 🔄 Refresh\n \n

\n\n {/* Error Message */}\n {error && (\n

\n {error}\n

\n )}\n\n {/* Messages Container */}\n

\n {Object.keys(groupedMessages).length === 0 ? (\n

💬

No messages yet. Start the conversation!

\n ) : (\n Object.entries(groupedMessages).map(([date, dayMessages]) => (\n

\n {/* Date Separator */}\n

\n {formatDate(dayMessages[0].created_at)}\n

\n \n {/* Messages for this date */}\n {dayMessages.map((msg, index) => {\n const prevMsg = index > 0 ? dayMessages[index - 1] : null;\n const isConsecutive = prevMsg && prevMsg.username === msg.username;\n \n return (\n

\n {!isConsecutive && (\n

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

\n )}\n

\n {msg.message}\n

\n );\n })}\n

\n ))\n )}\n

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

\n setUsername(e.target.value)}\n placeholder=\"Your name\"\n maxLength={50}\n className=\"w-32 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n setMessage(e.target.value)}\n placeholder=\"Type your message...\"\n maxLength={500}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n \n {sending ? 'Sending...' : 'Send'}\n \n

\n {message.length}/500 characters\n

\n );\n}",[],[230,236,250],{"_103":257,"_95":258,"_155":259,"_157":237,"_158":137,"_159":160,"_161":162,"_105":260,"_100":32,"_164":182,"_166":261,"_167":22,"_168":-5,"_169":262,"_98":263},"ef3fa7d2-3fb6-11f0-9264-76b3cceeab13","JobBoard.tsx","0f064e64-f6e6-439e-9414-25ea212fe21d",["D",1748871537859],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport JobForm from \"./JobForm.tsx\";\nimport type { Job, ApiResponse } from \"../../shared/types.ts\";\n\nexport default function JobBoard() {\n const [jobs, setJobs] = useState([]);\n const [loading, setLoading] = useState(true);\n const [showForm, setShowForm] = useState(false);\n const [error, setError] = useState(null);\n\n const fetchJobs = async () => {\n try {\n setLoading(true);\n const response = await fetch('/api/jobs');\n const result: ApiResponse = await response.json();\n \n if (result.success && result.data) {\n setJobs(result.data);\n setError(null);\n } else {\n setError(result.error || 'Failed to fetch jobs');\n }\n } catch (err) {\n setError('Failed to fetch jobs');\n } finally {\n setLoading(false);\n }\n };\n\n const handleJobCreated = (newJob: Job) => {\n setJobs(prev => [newJob, ...prev]);\n setShowForm(false);\n };\n\n const handleDeleteJob = async (jobId: number) => {\n if (!confirm('Are you sure you want to delete this job posting?')) {\n return;\n }\n\n try {\n const response = await fetch(`/api/jobs/${jobId}`, {\n method: 'DELETE'\n });\n \n const result: ApiResponse<{ id: number }> = await response.json();\n \n if (result.success) {\n setJobs(prev => prev.filter(job => job.id !== jobId));\n } else {\n alert(result.error || 'Failed to delete job');\n }\n } catch (err) {\n alert('Failed to delete job');\n }\n };\n\n useEffect(() => {\n fetchJobs();\n }, []);\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'short',\n day: 'numeric'\n });\n };\n\n if (loading) {\n return (\n

Loading jobs...

\n );\n }\n\n return (\n

\n {/* Header with Post Job Button */}\n

Job Postings

Browse and post job opportunities

\n setShowForm(!showForm)}\n className=\"bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors\"\n >\n {showForm ? 'Cancel' : '+ Post Job'}\n \n

\n\n {/* Error Message */}\n {error && (\n

\n {error}\n

\n )}\n\n {/* Job Form */}\n {showForm && (\n

Post a New Job

\n \n

\n )}\n\n {/* Jobs List */}\n

\n {jobs.length === 0 ? (\n

📋

No job postings yet. Be the first to post one!

\n ) : (\n jobs.map((job) => (\n

{job.title}

{job.company}

\n 📍 {job.location}\n 💰 {job.salary}\n 📅 {formatDate(job.created_at)}\n

\n handleDeleteJob(job.id)}\n className=\"text-red-500 hover:text-red-700 text-sm px-2 py-1 rounded hover:bg-red-50\"\n title=\"Delete job posting\"\n >\n 🗑️\n \n

\n \n

{job.description}

\n \n

\n \n Contact: {job.contact_email}\n \n \n Apply Now\n \n

\n ))\n )}\n

\n );\n}",[],[230,236,258],{"_103":265,"_95":266,"_155":267,"_157":237,"_158":137,"_159":160,"_161":162,"_105":268,"_100":32,"_164":182,"_166":269,"_167":22,"_168":-5,"_169":270,"_98":271},"ef3faf0c-3fb6-11f0-9264-76b3cceeab13","JobForm.tsx","4391c459-b239-48dc-8cc9-bdd75a44bce7",["D",1748871537859],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Job, CreateJobRequest, ApiResponse } from \"../../shared/types.ts\";\n\ninterface JobFormProps {\n onJobCreated: (job: Job) => void;\n}\n\nexport default function JobForm({ onJobCreated }: JobFormProps) {\n const [formData, setFormData] = useState({\n title: '',\n company: '',\n description: '',\n location: '',\n salary: '',\n contact_email: ''\n });\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError(null);\n\n try {\n const response = await fetch('/api/jobs', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(formData)\n });\n\n const result: ApiResponse = await response.json();\n\n if (result.success && result.data) {\n onJobCreated(result.data);\n // Reset form\n setFormData({\n title: '',\n company: '',\n description: '',\n location: '',\n salary: '',\n contact_email: ''\n });\n } else {\n setError(result.error || 'Failed to create job posting');\n }\n } catch (err) {\n setError('Failed to create job posting');\n } finally {\n setLoading(false);\n }\n };\n\n const handleChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: value\n }));\n };\n\n return (\n \n );\n}",[],[230,236,266],[230,236],{"_103":274,"_95":275,"_155":276,"_157":231,"_158":137,"_159":160,"_161":162,"_105":277,"_100":32,"_164":278,"_166":279,"_167":22,"_168":-5,"_169":280,"_98":281},"ef3fb90c-3fb6-11f0-9264-76b3cceeab13","index.html","ad2d5ce9-ddfa-483f-bfbb-a41798af30dd",["D",1748871537859],"file","\n\n\n \n \n Job Board & Chat\n \n \n \n\n\n

\n \n \n\n",[],[230,275],{"_103":283,"_95":284,"_155":285,"_157":231,"_158":137,"_159":160,"_161":162,"_105":286,"_100":32,"_164":182,"_166":287,"_167":22,"_168":-5,"_169":288,"_98":289},"ef3fba92-3fb6-11f0-9264-76b3cceeab13","index.tsx","4bbe0d3d-b46a-449a-9c63-8b3c7e63c4b7",["D",1748871537859],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[230,284],[230],{"_103":292,"_95":293,"_155":294,"_157":-5,"_158":137,"_159":160,"_161":162,"_105":295,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_169":296,"_98":305},"ef3fc53c-3fb6-11f0-9264-76b3cceeab13","shared","247ffcda-e1f3-4add-8048-f2bbb5500d58",["D",1748871537859],[297],{"_103":298,"_95":299,"_155":300,"_157":294,"_158":137,"_159":160,"_161":162,"_105":301,"_100":32,"_164":182,"_166":302,"_167":22,"_168":-5,"_169":303,"_98":304},"ef3fc366-3fb6-11f0-9264-76b3cceeab13","types.ts","b200d77f-9266-4e81-af8e-4deb3d4b6775",["D",1748871537859],"// Shared types for the job board application\n\nexport interface Job {\n id: number;\n title: string;\n company: string;\n description: string;\n location: string;\n salary: string;\n contact_email: string;\n created_at: string;\n}\n\nexport interface CreateJobRequest {\n title: string;\n company: string;\n description: string;\n location: string;\n salary: string;\n contact_email: string;\n}\n\nexport interface ChatMessage {\n id: number;\n username: string;\n message: string;\n created_at: string;\n}\n\nexport interface CreateMessageRequest {\n username: string;\n message: string;\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}",[],[293,299],[293],{"_103":307,"_95":308,"_155":309,"_157":-5,"_158":137,"_159":160,"_161":162,"_105":310,"_100":32,"_164":278,"_166":311,"_167":22,"_168":-5,"_169":312,"_98":313},"ef3fc6fe-3fb6-11f0-9264-76b3cceeab13","README.md","ba878a6e-4210-499d-8093-571281db1731",["D",1748871537859],"# Job Board & Chat App\n\nA full-stack application for posting job opportunities and discussing them in a public chat room.\n\n## Features\n\n- **Job Postings**: Create, view, and manage job postings\n- **Public Chat**: Real-time chat room for discussing opportunities\n- **Responsive Design**: Works on desktop and mobile devices\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Database schema setup\n│ │ └── queries.ts # Database query functions\n│ ├── routes/\n│ │ ├── jobs.ts # Job posting API routes\n│ │ └── chat.ts # Chat API routes\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── JobBoard.tsx # Job listings component\n│ │ ├── JobForm.tsx # Job posting form\n│ │ └── ChatRoom.tsx # Chat interface\n│ ├── index.html # Main HTML template\n│ └── index.tsx # Frontend entry point\n└── shared/\n └── types.ts # Shared TypeScript types\n```\n\n## API Endpoints\n\n### Jobs\n- `GET /api/jobs` - Get all job postings\n- `POST /api/jobs` - Create a new job posting\n- `DELETE /api/jobs/:id` - Delete a job posting\n\n### Chat\n- `GET /api/chat/messages` - Get recent chat messages\n- `POST /api/chat/messages` - Send a new chat message\n\n## Database Schema\n\n### Jobs Table\n- id (INTEGER PRIMARY KEY)\n- title (TEXT)\n- company (TEXT)\n- description (TEXT)\n- location (TEXT)\n- salary (TEXT)\n- contact_email (TEXT)\n- created_at (DATETIME)\n\n### Chat Messages Table\n- id (INTEGER PRIMARY KEY)\n- username (TEXT)\n- message (TEXT)\n- created_at (DATETIME)\n\n## Getting Started\n\nThis app runs on Val Town. The backend serves both the API and the frontend files.\n\nVisit the HTTP endpoint to access the application.",[],[308],{"_103":315,"_95":316,"_155":317,"_157":-5,"_158":137,"_159":136,"_161":162,"_105":318,"_100":32,"_164":182,"_166":72,"_167":22,"_168":-5,"_169":319,"_98":320},"551b818e-3fb7-11f0-8588-76b3cceeab13","new-file-1946.tsx","551b821a-3fb7-11f0-8588-76b3cceeab13",["D",1748871708785],[],[316],{"_103":322,"_95":323,"_155":324,"_157":-5,"_158":137,"_159":325,"_161":162,"_105":326,"_100":32,"_164":182,"_166":72,"_167":22,"_168":-5,"_169":327,"_98":328},"1575f0fa-3fb7-11f0-991f-76b3cceeab13","new-file-7867.tsx","1575f1a4-3fb7-11f0-991f-76b3cceeab13",2,["D",1748871602005],[],[323],"files",[152,171,177,186,195,201,209,218,228,234,240,248,256,264,273,282,291,297,306,314,321],"counts",{"_333":32,"_334":160,"_335":32,"_336":32},"pulls","branches","forks","envVars","contents",[339,342],{"_103":202,"_95":203,"_155":204,"_157":198,"_158":137,"_159":160,"_161":162,"_105":340,"_100":32,"_164":182,"_166":206,"_167":22,"_168":-5,"_98":341},["D",1748871537859],[154,197,203],{"_103":210,"_95":211,"_155":212,"_157":198,"_158":137,"_159":160,"_161":162,"_105":343,"_100":32,"_164":182,"_166":214,"_167":22,"_168":-5,"_98":344},["D",1748871537859],[154,197,211],{"_103":196,"_95":197,"_155":198,"_157":156,"_158":137,"_159":160,"_161":162,"_105":346,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":347},["D",1748871537859],[154,197],"upstreamProject",{"_103":145,"_95":350,"_111":-5,"_112":-5,"_109":110,"_23":351},"AppforPrince",{"_93":94,"_129":130},"upstreamBranch",{"_103":140,"_105":354,"_355":356,"_95":43,"_138":145,"_100":142,"_139":-5,"_141":-5,"_357":358,"_107":-5,"_149":22,"_109":110,"_148":94,"_16":118,"_147":350},["D",1748870607703],"updatedAt",["D",1748870816890],"lockfileKey","1755674787708-esm.town_v_hyeaman1_AppforPrince@15-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":365,"_278":370,"_373":374,"_377":378,"_381":-7,"_382":32,"_383":22},{"_103":104,"_95":96,"_105":366,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":367,"_131":368,"_134":369,"_149":22},["D",1748871537859],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":140,"_141":142,"_143":110,"_144":145,"_146":118,"_147":96,"_148":94},{"_103":196,"_95":197,"_155":198,"_157":156,"_158":137,"_159":160,"_161":162,"_105":371,"_100":32,"_164":165,"_166":-5,"_167":22,"_168":-5,"_98":372},["D",1748871537859],[154,197],"history",[375],{"_103":196,"_158":137,"_155":198,"_95":197,"_166":-5,"_164":165,"_100":32,"_157":156,"_105":376,"_159":160,"_168":-5},["D",1748871537859],"versions",[379],{"_278":375,"_380":-5},"previous","versionNumber","page","hasNext","actionData","errors"]

hyeaman1

AppforPrince1

History for routes