\n {/* Header */}\n

💼 Job Board

\n Find opportunities & connect\n

\n \n {/* Tab Navigation */}\n

\n setActiveTab('jobs')}\n className={`px-4 py-2 rounded-lg font-medium transition-colors ${\n activeTab === 'jobs'\n ? 'bg-black text-white'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'\n }`}\n >\n 📋 Jobs\n \n setActiveTab('chat')}\n className={`px-4 py-2 rounded-lg font-medium transition-colors ${\n activeTab === 'chat'\n ? 'bg-black text-white'\n : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'\n }`}\n >\n 💬 Chat\n \n

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

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

\n\n {/* Footer */}\n \n

\n );\n}",[],[233,240,247],{"_107":255,"_100":256,"_153":257,"_155":241,"_156":139,"_157":138,"_159":160,"_109":258,"_104":259,"_162":180,"_164":260,"_165":27,"_166":-5,"_167":261,"_103":262},"dfde7028-3ffe-11f0-9894-76b3cceeab13","Chat.tsx","4f249f8a-3ffe-11f0-afe9-76b3cceeab13",["D",1748902435852],4,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { ChatMessage, CreateChatMessageRequest } from \"../../shared/types.ts\";\n\nexport default function Chat() {\n const [messages, setMessages] = useState([]);\n const [newMessage, setNewMessage] = useState('');\n const [username, setUsername] = 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 // Load username from localStorage\n useEffect(() => {\n const savedUsername = localStorage.getItem('chat-username');\n if (savedUsername) {\n setUsername(savedUsername);\n }\n }, []);\n\n // Save username to localStorage when it changes\n useEffect(() => {\n if (username) {\n localStorage.setItem('chat-username', username);\n }\n }, [username]);\n\n const fetchMessages = async () => {\n try {\n setLoading(true);\n const response = await fetch('/api/chat/messages');\n if (!response.ok) throw new Error('Failed to fetch messages');\n const messagesData = await response.json();\n setMessages(messagesData);\n setError(null);\n } catch (err) {\n setError('Failed to load messages. Please try again.');\n console.error('Error fetching messages:', err);\n } finally {\n setLoading(false);\n }\n };\n\n useEffect(() => {\n fetchMessages();\n // Poll for new messages every 3 seconds\n const interval = setInterval(fetchMessages, 3000);\n return () => clearInterval(interval);\n }, []);\n\n // Scroll to bottom when new messages arrive\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });\n }, [messages]);\n\n const handleSendMessage = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!newMessage.trim() || !username.trim() || sending) return;\n\n setSending(true);\n setError(null);\n\n try {\n const messageData: CreateChatMessageRequest = {\n username: username.trim(),\n message: newMessage.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 if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || 'Failed to send message');\n }\n\n const sentMessage = await response.json();\n setMessages(prev => [...prev, sentMessage]);\n setNewMessage('');\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to send message');\n } finally {\n setSending(false);\n }\n };\n\n const formatTime = (timestamp: string) => {\n return new Date(timestamp).toLocaleTimeString('en-US', {\n hour: '2-digit',\n minute: '2-digit'\n });\n };\n\n const formatDate = (timestamp: string) => {\n const date = new Date(timestamp);\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', { month: 'short', day: 'numeric' });\n }\n };\n\n // Group messages by date\n const groupedMessages = messages.reduce((groups, message) => {\n const date = new Date(message.timestamp).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

\n Loading chat...\n

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

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

💬 Community Chat

\n Discuss job opportunities, share tips, and connect with the community\n

\n\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, dateMessages]) => (\n

\n {/* Date separator */}\n

\n {formatDate(dateMessages[0].timestamp)}\n

\n \n {/* Messages for this date */}\n {dateMessages.map((message) => (\n

\n {message.username.charAt(0).toUpperCase()}\n

\n \n {message.username}\n \n \n {formatTime(message.timestamp)}\n \n

\n {message.message}\n

\n ))}\n

\n ))\n )}\n

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

\n {!username && (\n

\n \n Your Name\n \n setUsername(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-black focus:border-black text-sm\"\n placeholder=\"Enter your name to start chatting\"\n maxLength={50}\n />\n

\n )}\n \n

\n setNewMessage(e.target.value)}\n className=\"flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm\"\n placeholder={username ? \"Type your message...\" : \"Enter your name first\"}\n disabled={!username || sending}\n maxLength={500}\n />\n \n {sending ? '...' : 'Send'}\n \n

\n \n {username && (\n

\n Chatting as: {username}\n {newMessage.length}/500\n

\n )}\n

\n );\n}",[],[233,240,256],{"_107":264,"_100":265,"_153":266,"_155":241,"_156":139,"_157":267,"_159":160,"_109":268,"_104":269,"_162":180,"_164":270,"_165":27,"_166":-5,"_167":271,"_103":272},"ab36eb0c-3ffe-11f0-849d-76b3cceeab13","JobBoard.tsx","264bbe2c-3ffe-11f0-8360-76b3cceeab13",25,["D",1748902347511],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { JobPosting } from \"../../shared/types.ts\";\nimport JobForm from \"./JobForm.tsx\";\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 if (!response.ok) throw new Error('Failed to fetch jobs');\n const jobsData = await response.json();\n setJobs(jobsData);\n setError(null);\n } catch (err) {\n setError('Failed to load jobs. Please try again.');\n console.error('Error fetching jobs:', err);\n } finally {\n setLoading(false);\n }\n };\n\n useEffect(() => {\n fetchJobs();\n }, []);\n\n const handleJobCreated = (newJob: JobPosting) => {\n setJobs(prev => [newJob, ...prev]);\n setShowForm(false);\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 const getJobTypeColor = (type: string) => {\n switch (type) {\n case 'full-time': return 'bg-green-100 text-green-800';\n case 'part-time': return 'bg-blue-100 text-blue-800';\n case 'contract': return 'bg-purple-100 text-purple-800';\n case 'internship': return 'bg-orange-100 text-orange-800';\n default: return 'bg-gray-100 text-gray-800';\n }\n };\n\n if (loading) {\n return (\n

\n Loading jobs...\n

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

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

Job Opportunities

Discover your next career move

\n setShowForm(!showForm)}\n className=\"bg-black hover:bg-gray-800 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center\"\n >\n {showForm ? '❌ Cancel' : '➕ Post Job'}\n \n

\n\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 jobs posted yet

Be the first to share an opportunity!

\n setShowForm(true)}\n className=\"bg-black hover:bg-gray-800 text-white px-6 py-2 rounded-lg font-medium transition-colors\"\n >\n Post the First Job\n \n

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

{job.title}

\n \n 🏢 {job.company}\n \n \n 📍 {job.location}\n \n {job.remote && (\n \n 🌐 Remote\n \n )}\n

\n \n {job.type}\n \n \n {formatDate(job.posted_at)}\n \n

\n\n

{job.description}

\n\n

\n {job.salary && (\n \n 💰 {job.salary}\n \n )}\n

\n \n 📧 Apply Now\n \n

\n ))\n )}\n

\n );\n}",[],[233,240,265],{"_107":274,"_100":275,"_153":276,"_155":241,"_156":139,"_157":277,"_159":160,"_109":278,"_104":188,"_162":180,"_164":279,"_165":27,"_166":-5,"_167":280,"_103":281},"d18360a6-3ffe-11f0-b06f-76b3cceeab13","JobForm.tsx","3792ba0a-3ffe-11f0-aaee-76b3cceeab13",34,["D",1748902411765],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { JobPosting, CreateJobRequest } from \"../../shared/types.ts\";\n\ninterface JobFormProps {\n onJobCreated: (job: JobPosting) => void;\n}\n\nexport default function JobForm({ onJobCreated }: JobFormProps) {\n const [formData, setFormData] = useState({\n title: '',\n company: '',\n location: '',\n description: '',\n salary: '',\n type: 'full-time',\n remote: false,\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 submitData = {\n ...formData,\n salary: formData.salary || undefined\n };\n\n const response = await fetch('/api/jobs', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(submitData),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || 'Failed to create job posting');\n }\n\n const newJob = await response.json();\n onJobCreated(newJob);\n \n // Reset form\n setFormData({\n title: '',\n company: '',\n location: '',\n description: '',\n salary: '',\n type: 'full-time',\n remote: false,\n contact_email: ''\n });\n } catch (err) {\n setError(err instanceof Error ? err.message : 'Failed to create job posting');\n } finally {\n setLoading(false);\n }\n };\n\n const handleChange = (e: React.ChangeEvent) => {\n const { name, value, type } = e.target;\n setFormData(prev => ({\n ...prev,\n [name]: type === 'checkbox' ? (e.target as HTMLInputElement).checked : value\n }));\n };\n\n return (\n

\n {error && (\n

\n {error}\n

\n )}\n\n

\n \n Job Title *\n \n \n

\n\n

\n \n Company *\n \n \n

\n\n

\n \n Location *\n \n \n

\n\n

\n \n Job Type *\n \n \n \n \n \n \n \n

\n\n

\n \n Salary (Optional)\n \n \n

\n\n

\n \n Contact Email *\n \n \n

\n\n

\n \n Job Description *\n \n \n

\n\n

\n \n \n Remote work available\n \n

\n\n

\n \n {loading ? 'Posting...' : 'Post Job'}\n \n

\n );\n}",[],[233,240,275],[233,240],{"_107":284,"_100":285,"_153":286,"_155":234,"_156":139,"_157":235,"_159":160,"_109":287,"_104":31,"_162":288,"_164":289,"_165":27,"_166":-5,"_167":290,"_103":291},"0ef8dfe8-3ffe-11f0-bcd2-76b3cceeab13","index.html","0ef8e07e-3ffe-11f0-bcd2-76b3cceeab13",["D",1748902085384],"file","\n\n\n \n \n Job Board with Chat\n \n \n \n\n\n

\n \n \n\n",[],[233,285],{"_107":293,"_100":294,"_153":295,"_155":234,"_156":139,"_157":296,"_159":160,"_109":297,"_104":31,"_162":180,"_164":298,"_165":27,"_166":-5,"_167":299,"_103":300},"5210c110-3ffe-11f0-8edb-76b3cceeab13","index.tsx","5210c1ec-3ffe-11f0-8edb-76b3cceeab13",18,["D",1748902197948],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport App from \"./components/App.tsx\";\n\nexport default App;",[],[233,294],[233],{"_107":303,"_100":304,"_153":305,"_155":-5,"_156":139,"_157":306,"_159":160,"_109":307,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_167":308,"_103":317},"eebbb1ce-3ffd-11f0-84c0-76b3cceeab13","shared","4dd00871-731f-4033-b077-c4b6760591b9",7,["D",1748902031295],[309],{"_107":310,"_100":311,"_153":312,"_155":305,"_156":139,"_157":306,"_159":160,"_109":313,"_104":31,"_162":180,"_164":314,"_165":27,"_166":-5,"_167":315,"_103":316},"eebb9e32-3ffd-11f0-84c0-76b3cceeab13","types.ts","eebb9f0e-3ffd-11f0-84c0-76b3cceeab13",["D",1748902031295],"// Shared types for the job board application\n\nexport interface JobPosting {\n id: number;\n title: string;\n company: string;\n location: string;\n description: string;\n salary?: string;\n type: 'full-time' | 'part-time' | 'contract' | 'internship';\n remote: boolean;\n posted_at: string;\n contact_email: string;\n}\n\nexport interface ChatMessage {\n id: number;\n username: string;\n message: string;\n timestamp: string;\n}\n\nexport interface CreateJobRequest {\n title: string;\n company: string;\n location: string;\n description: string;\n salary?: string;\n type: 'full-time' | 'part-time' | 'contract' | 'internship';\n remote: boolean;\n contact_email: string;\n}\n\nexport interface CreateChatMessageRequest {\n username: string;\n message: string;\n}",[],[304,311],[304],{"_107":319,"_100":320,"_153":321,"_155":-5,"_156":139,"_157":322,"_159":160,"_109":323,"_104":31,"_162":288,"_164":324,"_165":27,"_166":-5,"_167":325,"_103":326},"eb86fc16-3ffd-11f0-a129-76b3cceeab13","README.md","eb86fcf2-3ffd-11f0-a129-76b3cceeab13",6,["D",1748902025920],"# Job Board with Chat\n\nA full-stack job posting application with a public chat room for discussing opportunities.\n\n## Features\n\n- **Job Postings**: Users can create, view, and browse 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│ │ └── Chat.tsx # Chat room component\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- `GET /api/jobs` - Get all job postings\n- `POST /api/jobs` - Create a new job posting\n- `GET /api/chat/messages` - Get chat messages\n- `POST /api/chat/messages` - Send a chat message\n\n## Tech Stack\n\n- **Backend**: Hono (TypeScript API framework)\n- **Database**: SQLite\n- **Frontend**: React with TypeScript\n- **Styling**: TailwindCSS",[],[320],{"_107":328,"_100":329,"_153":330,"_155":-5,"_156":139,"_157":331,"_159":160,"_109":332,"_104":225,"_162":180,"_164":333,"_165":27,"_166":-5,"_167":334,"_103":335},"72fe808a-3f89-11f0-a7ec-76b3cceeab13","main.tsx","d9b26b3a-3f88-11f0-9b10-76b3cceeab13",2,["D",1748852002074],"design an interface that we will show me ongoing football games of the day in European football.",[],[329],{"_107":337,"_100":338,"_153":339,"_155":-5,"_156":139,"_157":269,"_159":160,"_109":340,"_104":331,"_162":226,"_164":341,"_165":27,"_166":-5,"_167":342,"_103":343},"b45083e8-3ffd-11f0-9eb6-76b3cceeab13","new-file-983.tsx","ae38977a-3ffd-11f0-8e67-76b3cceeab13",["D",1748901933284],"export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",[],[338],"files",[150,169,175,184,194,201,210,219,231,238,245,254,263,273,283,292,302,309,318,327,336],"counts",{"_348":31,"_349":225,"_350":31,"_351":31},"pulls","branches","forks","envVars","contents",[354,357,360,363,366,369],{"_107":151,"_100":152,"_153":154,"_155":-5,"_156":139,"_157":158,"_159":160,"_109":355,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":356},["D",1748902038277],[152],{"_107":232,"_100":233,"_153":234,"_155":-5,"_156":139,"_157":235,"_159":160,"_109":358,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":359},["D",1748902085384],[233],{"_107":303,"_100":304,"_153":305,"_155":-5,"_156":139,"_157":306,"_159":160,"_109":361,"_104":31,"_162":163,"_164":-5,"_165":27,"_166":-5,"_103":362},["D",1748902031295],[304],{"_107":319,"_100":320,"_153":321,"_155":-5,"_156":139,"_157":322,"_159":160,"_109":364,"_104":31,"_162":288,"_164":324,"_165":27,"_166":-5,"_103":365},["D",1748902025920],[320],{"_107":328,"_100":329,"_153":330,"_155":-5,"_156":139,"_157":331,"_159":160,"_109":367,"_104":225,"_162":180,"_164":333,"_165":27,"_166":-5,"_103":368},["D",1748852002074],[329],{"_107":337,"_100":338,"_153":339,"_155":-5,"_156":139,"_157":269,"_159":160,"_109":370,"_104":331,"_162":226,"_164":341,"_165":27,"_166":-5,"_103":371},["D",1748901933284],[338],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.search",{"_344":378,"_105":379,"_383":-5,"_98":99},[],{"_107":108,"_100":101,"_109":380,"_111":-5,"_112":27,"_113":114,"_115":116,"_117":-5,"_12":118,"_119":-5,"_120":27,"_121":-5,"_122":31,"_14":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_21":381,"_136":382,"_147":27},["D",1748851744877],{"_98":99,"_134":135},{"_104":138,"_100":42,"_107":139,"_140":108,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":101,"_146":99},"query","routes/_app","actionData","errors"]