\n {/* Header */}\n

💼 Job Board

\n Find opportunities & connect\n

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

\n setActiveTab('jobs')}\n className={`py-2 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-2 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 💬 Community Chat\n \n

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

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

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

\n );\n}",[],[228,234,240],{"_102":247,"_95":248,"_154":249,"_156":235,"_157":136,"_158":135,"_159":160,"_104":250,"_99":32,"_162":180,"_164":251,"_165":22,"_166":-5,"_167":252,"_98":253},"b722223a-552d-11f0-b199-f69ea79377d9","ChatRoom.tsx","945bd82d-4e84-48a5-8b93-51b9cd04a95e",["D",1751231528200],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { ChatMessage, ApiResponse } from \"../../shared/types.ts\";\n\nexport default function ChatRoom() {\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\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n const fetchMessages = async () => {\n try {\n setLoading(true);\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('Network error while fetching messages');\n } finally {\n setLoading(false);\n }\n };\n\n const sendMessage = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!newMessage.trim() || !username.trim()) {\n return;\n }\n\n setSending(true);\n setError(null);\n\n try {\n const response = await fetch('/api/chat/messages', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n username: username.trim(),\n message: newMessage.trim()\n })\n });\n\n const result: ApiResponse = await response.json();\n\n if (result.success && result.data) {\n setMessages(prev => [...prev, result.data!]);\n setNewMessage('');\n // Store username in localStorage for convenience\n localStorage.setItem('chatUsername', username.trim());\n } else {\n setError(result.error || 'Failed to send message');\n }\n } catch (err) {\n setError('Network error while sending message');\n } finally {\n setSending(false);\n }\n };\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: { [key: string]: ChatMessage[] }, message) => {\n if (!message.created_at) return groups;\n \n const date = formatDate(message.created_at);\n if (!groups[date]) {\n groups[date] = [];\n }\n groups[date].push(message);\n return groups;\n }, {});\n\n useEffect(() => {\n fetchMessages();\n // Load saved username\n const savedUsername = localStorage.getItem('chatUsername');\n if (savedUsername) {\n setUsername(savedUsername);\n }\n }, []);\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n // Auto-refresh messages every 10 seconds\n useEffect(() => {\n const interval = setInterval(fetchMessages, 10000);\n return () => clearInterval(interval);\n }, []);\n\n if (loading) {\n return (\n

\n Loading chat...\n

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

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

💬 Community Chat

Discuss opportunities and connect with others

\n \n 🔄\n \n

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

⚠️ {error}

\n )}\n\n {/* Messages */}\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 {date}\n

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

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

\n \n {message.username}\n \n \n {message.created_at && formatTime(message.created_at)}\n \n

\n {message.message}\n

\n ))}\n

\n ))\n )}\n

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

\n {!username && (\n

\n setUsername(e.target.value)}\n placeholder=\"Enter your name...\"\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 text-sm\"\n maxLength={50}\n />\n

\n )}\n \n

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

\n \n {username && (\n

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

\n )}\n

\n );\n}",[],[228,234,248],{"_102":255,"_95":256,"_154":257,"_156":235,"_157":136,"_158":135,"_159":160,"_104":258,"_99":32,"_162":180,"_164":259,"_165":22,"_166":-5,"_167":260,"_98":261},"b7222e92-552d-11f0-b199-f69ea79377d9","JobBoard.tsx","58e4e0e6-c799-4915-a014-e7caed33b8cb",["D",1751231528200],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Job, ApiResponse } 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 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('Network error while fetching 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 const result: ApiResponse = 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('Network error while deleting job');\n }\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 useEffect(() => {\n fetchJobs();\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

Available Positions

{jobs.length} job{jobs.length !== 1 ? 's' : ''} available

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

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

⚠️ {error}

\n \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 post a job opportunity!

\n setShowForm(true)}\n className=\"bg-blue-600 hover:bg-blue-700 text-white px-4 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 \n

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

\n \n

{job.description}

\n \n

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

\n \n job.id && handleDeleteJob(job.id)}\n className=\"ml-4 text-gray-400 hover:text-red-600 transition-colors\"\n title=\"Delete job posting\"\n >\n 🗑️\n \n

\n ))\n )}\n

\n );\n}",[],[228,234,256],{"_102":263,"_95":264,"_154":265,"_156":235,"_157":136,"_158":135,"_159":160,"_104":266,"_99":32,"_162":180,"_164":267,"_165":22,"_166":-5,"_167":268,"_98":269},"b72234fa-552d-11f0-b199-f69ea79377d9","JobForm.tsx","c31ba38b-5e69-4e40-bc01-ab9d56b484cd",["D",1751231528200],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport type { Job, 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 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('Network error while creating 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}",[],[228,234,264],[228,234],{"_102":272,"_95":273,"_154":274,"_156":229,"_157":136,"_158":135,"_159":160,"_104":275,"_99":32,"_162":276,"_164":277,"_165":22,"_166":-5,"_167":278,"_98":279},"b7223e78-552d-11f0-b199-f69ea79377d9","index.html","a11a7ef1-2a2a-45af-b081-86b7a3e9b5a8",["D",1751231528200],"file","\n\n\n \n \n Job Board & Chat\n \n \n \n\n\n

\n \n\n",[],[228,273],{"_102":281,"_95":282,"_154":283,"_156":229,"_157":136,"_158":135,"_159":160,"_104":284,"_99":32,"_162":180,"_164":285,"_165":22,"_166":-5,"_167":286,"_98":287},"b7224012-552d-11f0-b199-f69ea79377d9","index.tsx","0b30dbdf-9f76-42cf-b68f-041c9900050a",["D",1751231528200],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[228,282],[228],{"_102":290,"_95":291,"_154":292,"_156":-5,"_157":136,"_158":135,"_159":160,"_104":293,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":294,"_98":303},"b72245b2-552d-11f0-b199-f69ea79377d9","shared","01e3b756-1deb-4774-b3ae-372d356ee364",["D",1751231528200],[295],{"_102":296,"_95":297,"_154":298,"_156":292,"_157":136,"_158":135,"_159":160,"_104":299,"_99":32,"_162":180,"_164":300,"_165":22,"_166":-5,"_167":301,"_98":302},"b72243aa-552d-11f0-b199-f69ea79377d9","types.ts","d251b770-ffbd-4bf3-9f6e-e4f58d6fd4f9",["D",1751231528200],"// Shared types for the job board and chat 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 ChatMessage {\n id?: number;\n username: string;\n message: string;\n created_at?: string;\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}",[],[291,297],[291],{"_102":305,"_95":306,"_154":307,"_156":-5,"_157":136,"_158":135,"_159":160,"_104":308,"_99":32,"_162":276,"_164":309,"_165":22,"_166":-5,"_167":310,"_98":311},"b7224724-552d-11f0-b199-f69ea79377d9","README.md","1cef346f-cc9f-4eb1-80bd-a03327881beb",["D",1751231528200],"# 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)",[],[306],"files",[151,169,175,184,193,199,207,216,226,232,238,246,254,262,271,280,289,295,304],"counts",{"_316":32,"_317":135,"_318":32,"_319":320},"pulls","branches","forks","envVars",{"_321":32,"_322":32},"count","emptyCount","contents",[325,328,331,334],{"_102":152,"_95":153,"_154":155,"_156":-5,"_157":136,"_158":135,"_159":160,"_104":326,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":327},["D",1751231528200],[153],{"_102":227,"_95":228,"_154":229,"_156":-5,"_157":136,"_158":135,"_159":160,"_104":329,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":330},["D",1751231528200],[228],{"_102":290,"_95":291,"_154":292,"_156":-5,"_157":136,"_158":135,"_159":160,"_104":332,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":333},["D",1751231528200],[291],{"_102":305,"_95":306,"_154":307,"_156":-5,"_157":136,"_158":135,"_159":160,"_104":335,"_99":32,"_162":276,"_164":309,"_165":22,"_166":-5,"_98":336},["D",1751231528200],[306],"upstreamProject",{"_102":144,"_95":339,"_110":-5,"_111":-5,"_108":109,"_23":340},"untitled-3016",{"_93":94,"_128":129},"upstreamBranch",{"_102":139,"_104":343,"_344":345,"_95":43,"_137":144,"_99":141,"_138":-5,"_140":-5,"_346":347,"_106":-5,"_148":22,"_108":109,"_147":94,"_16":117,"_146":339},["D",1749084710977],"updatedAt",["D",1749085178786],"lockfileKey","1757241829309-esm.town_v_Mouhak_untitled-3016@17-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_93":94,"_95":96,"_97":43,"_100":354,"_359":32,"_360":32,"_361":362,"_368":22,"_369":358,"_370":371,"_374":-5},{"_102":103,"_95":96,"_104":355,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":356,"_130":357,"_133":358,"_148":22},["D",1751231528200],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":139,"_140":141,"_142":109,"_143":144,"_145":117,"_146":96,"_147":94},"ahead","behind","diff",{"_363":364,"_165":365,"_366":367},"added",[],[],"modified",[],"hasChanges","sourceBranch","targetBranch",{"_102":139,"_104":372,"_344":373,"_95":43,"_137":144,"_99":141,"_138":-5,"_140":-5,"_346":347,"_106":-5,"_148":22,"_108":109,"_147":94,"_16":117,"_146":339},["D",1749084710977],["D",1749085178786],"pull","actionData","errors"]

Mouhak

untitled-301

Mergeuntitled-301/mainintountitled-3016/main