Job Board with Chat

\n \n Enter your username to continue\n \n setUsername(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500\"\n placeholder=\"Username\"\n />\n

\n handleLogin(username)}\n disabled={!username.trim()}\n className=\"w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50\"\n >\n Enter\n \n

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

\n {/* Header */}\n

Job Board with Chat

\n \n Welcome, {username}\n \n \n Logout\n \n

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

\n setActiveTab(\"jobs\")}\n className={`py-4 px-1 border-b-2 font-medium text-sm ${\n activeTab === \"jobs\"\n ? \"border-indigo-500 text-indigo-600\"\n : \"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\"\n }`}\n >\n Job Board\n \n setActiveTab(\"chat\")}\n className={`py-4 px-1 border-b-2 font-medium text-sm ${\n activeTab === \"chat\"\n ? \"border-indigo-500 text-indigo-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

\n \n \n

\n ) : (\n \n )}\n

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

\n );\n};\n\nexport default App;",[],[207,214,221],{"_102":228,"_95":229,"_153":230,"_155":215,"_156":136,"_157":231,"_159":160,"_104":232,"_99":32,"_162":180,"_164":233,"_165":22,"_166":-5,"_167":234,"_98":235},"c590140c-3486-11f0-a26c-9e149126039e","ChatRoom.tsx","c59014a2-3486-11f0-a26c-9e149126039e",11,["D",1747641389326],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { ChatMessage } from \"../../shared/types.ts\";\n\ninterface ChatRoomProps {\n username: string;\n initialMessages: ChatMessage[];\n initialActiveUsers: string[];\n onNewMessage: (message: ChatMessage) => void;\n onActiveUsersUpdate: (users: string[]) => void;\n}\n\nconst ChatRoom: React.FC = ({ \n username, \n initialMessages, \n initialActiveUsers,\n onNewMessage,\n onActiveUsersUpdate\n}) => {\n const [messages, setMessages] = useState(initialMessages);\n const [newMessage, setNewMessage] = useState(\"\");\n const [activeUsers, setActiveUsers] = useState(initialActiveUsers);\n const [error, setError] = useState(\"\");\n const [isSubmitting, setIsSubmitting] = useState(false);\n const messagesEndRef = useRef(null);\n\n // Fetch messages periodically\n useEffect(() => {\n const fetchMessages = async () => {\n try {\n const response = await fetch(\"/api/chat\");\n const data = await response.json();\n \n if (data.success) {\n setMessages(data.data);\n }\n } catch (error) {\n console.error(\"Failed to fetch messages:\", error);\n }\n };\n \n // Fetch every 3 seconds\n const interval = setInterval(fetchMessages, 3000);\n \n return () => clearInterval(interval);\n }, []);\n\n // Fetch active users periodically\n useEffect(() => {\n const fetchActiveUsers = async () => {\n try {\n const response = await fetch(\"/api/users/active\");\n const data = await response.json();\n \n if (data.success) {\n setActiveUsers(data.data.usernames);\n onActiveUsersUpdate(data.data.usernames);\n }\n } catch (error) {\n console.error(\"Failed to fetch active users:\", error);\n }\n };\n \n // Fetch every 10 seconds\n const interval = setInterval(fetchActiveUsers, 10000);\n fetchActiveUsers(); // Fetch immediately\n \n return () => clearInterval(interval);\n }, [onActiveUsersUpdate]);\n\n // Scroll to bottom when messages change\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!newMessage.trim()) return;\n setError(\"\");\n setIsSubmitting(true);\n \n try {\n const response = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username, message: newMessage.trim() })\n });\n \n const data = await response.json();\n \n if (data.success) {\n setNewMessage(\"\");\n onNewMessage(data.data);\n // Add to local messages immediately for better UX\n setMessages(prevMessages => [data.data, ...prevMessages]);\n } else {\n setError(data.error || \"Failed to send message\");\n }\n } catch (err) {\n setError(\"An error occurred. Please try again.\");\n console.error(err);\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n return new Intl.DateTimeFormat('en-US', {\n hour: '2-digit',\n minute: '2-digit'\n }).format(date);\n };\n\n return (\n

\n {/* Chat messages */}\n

Chat Room

\n Discuss job opportunities with others\n

\n \n {/* Messages container */}\n

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

\n No messages yet. Start the conversation!\n

\n ) : (\n

\n {[...messages].reverse().map(msg => (\n

\n \n {msg.username === username ? 'You' : msg.username}\n \n \n {formatDate(msg.created_at)}\n \n

{msg.message}

\n ))}\n

\n )}\n

\n \n {/* Message input */}\n

\n {error && (\n

\n {error}\n

\n )}\n \n

\n \n {/* Active users sidebar */}\n

Active Users

\n {activeUsers.length} user{activeUsers.length !== 1 ? 's' : ''} online\n

\n \n

No active users
\n \n {user === username ? `${user} (You)` : user}\n

\n );\n};\n\nexport default ChatRoom;",[],[207,214,229],{"_102":237,"_95":238,"_153":239,"_155":215,"_156":136,"_157":240,"_159":160,"_104":241,"_99":32,"_162":180,"_164":242,"_165":22,"_166":-5,"_167":243,"_98":244},"9d6025bc-3486-11f0-8ba9-9e149126039e","JobForm.tsx","9d602670-3486-11f0-8ba9-9e149126039e",9,["D",1747641321903],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Job } from \"../../shared/types.ts\";\n\ninterface JobFormProps {\n username: string;\n onJobCreated: (job: Job) => void;\n}\n\nconst JobForm: React.FC = ({ username, onJobCreated }) => {\n const [isFormOpen, setIsFormOpen] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [error, setError] = useState(\"\");\n const [formData, setFormData] = useState({\n title: \"\",\n company: \"\",\n description: \"\",\n contact: \"\"\n });\n\n const handleChange = (e: React.ChangeEvent) => {\n const { name, value } = e.target;\n setFormData(prev => ({ ...prev, [name]: value }));\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setError(\"\");\n \n // Validate form\n if (!formData.title || !formData.company || !formData.description || !formData.contact) {\n setError(\"All fields are required\");\n return;\n }\n \n setIsSubmitting(true);\n \n try {\n const response = await fetch(\"/api/jobs\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ ...formData, username })\n });\n \n const data = await response.json();\n \n if (data.success) {\n onJobCreated(data.data);\n // Reset form\n setFormData({\n title: \"\",\n company: \"\",\n description: \"\",\n contact: \"\"\n });\n setIsFormOpen(false);\n } else {\n setError(data.error || \"Failed to create job posting\");\n }\n } catch (err) {\n setError(\"An error occurred. Please try again.\");\n console.error(err);\n } finally {\n setIsSubmitting(false);\n }\n };\n\n return (\n

Post a New Job

\n setIsFormOpen(!isFormOpen)}\n className=\"inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"\n >\n {isFormOpen ? \"Cancel\" : \"Create Job Posting\"}\n \n

\n \n {isFormOpen && (\n

\n {error && (\n

\n {error}\n

\n )}\n \n \n

\n )}\n

\n );\n};\n\nexport default JobForm;",[],[207,214,238],{"_102":246,"_95":247,"_153":248,"_155":215,"_156":136,"_157":249,"_159":160,"_104":250,"_99":32,"_162":180,"_164":251,"_165":22,"_166":-5,"_167":252,"_98":253},"aba40224-3486-11f0-a585-9e149126039e","JobList.tsx","aba402e2-3486-11f0-a585-9e149126039e",10,["D",1747641345834],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Job } from \"../../shared/types.ts\";\n\ninterface JobListProps {\n jobs: Job[];\n}\n\nconst JobList: React.FC = ({ jobs }) => {\n const [expandedJobId, setExpandedJobId] = useState(null);\n\n const toggleJobExpansion = (jobId: number) => {\n setExpandedJobId(expandedJobId === jobId ? null : jobId);\n };\n\n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n return new Intl.DateTimeFormat('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric',\n hour: '2-digit',\n minute: '2-digit'\n }).format(date);\n };\n\n if (jobs.length === 0) {\n return (\n

No Job Postings Yet

Be the first to post a job opportunity!

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

Available Job Opportunities

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

\n \n

\n
toggleJobExpansion(job.id)}>\n
\n
\n
{job.title}
\n
{job.company}
\n
\n
\n \n Posted by {job.username}\n \n \n {formatDate(job.created_at)}\n \n
\n
\n \n {expandedJobId === job.id && (\n
\n
\n
Description:
\n
\n {job.description}\n
\n
\n \n
\n
Contact:
\n
{job.contact}
\n
\n
\n )}\n \n
\n {\n e.stopPropagation();\n toggleJobExpansion(job.id);\n }}\n >\n {expandedJobId === job.id ? \"Show Less\" : \"Show More\"}\n \n
\n
\n

\n );\n};\n\nexport default JobList;",[],[207,214,247],[207,214],{"_102":256,"_95":257,"_153":258,"_155":208,"_156":136,"_157":209,"_159":160,"_104":259,"_99":32,"_162":260,"_164":261,"_165":22,"_166":-5,"_167":262,"_98":263},"71b52480-3486-11f0-b3d1-9e149126039e","index.html","71b52548-3486-11f0-b3d1-9e149126039e",["D",1747641248636],"file","\n\n\n \n \n Job Board with Chat\n \n \n \n \n\n\n

\n \n\n",[],[207,257],{"_102":265,"_95":266,"_153":267,"_155":208,"_156":136,"_157":268,"_159":160,"_104":269,"_99":32,"_162":180,"_164":270,"_165":22,"_166":-5,"_167":271,"_98":272},"7ba3eb2a-3486-11f0-80a0-9e149126039e","index.tsx","7ba3ebca-3486-11f0-80a0-9e149126039e",7,["D",1747641265305],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\n// Get initial data from the server\ndeclare global {\n interface Window {\n __INITIAL_DATA__: {\n jobs: any[];\n messages: any[];\n activeUsers: string[];\n };\n }\n}\n\nconst initialData = window.__INITIAL_DATA__ || { jobs: [], messages: [], activeUsers: [] };\n\n// Render the app\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[207,266],[207],{"_102":275,"_95":276,"_153":277,"_155":-5,"_156":136,"_157":278,"_159":160,"_104":279,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":280,"_98":289},"596d1086-3486-11f0-bd80-9e149126039e","shared","393aef38-519c-40b6-ba79-547f2162c8de",4,["D",1747641207899],[281],{"_102":282,"_95":283,"_153":284,"_155":277,"_156":136,"_157":278,"_159":160,"_104":285,"_99":32,"_162":180,"_164":286,"_165":22,"_166":-5,"_167":287,"_98":288},"596ce304-3486-11f0-bd80-9e149126039e","types.ts","596ce426-3486-11f0-bd80-9e149126039e",["D",1747641207899],"// Job posting interface\nexport interface Job {\n id: number;\n title: string;\n company: string;\n description: string;\n contact: string;\n username: string;\n created_at: string;\n}\n\n// Chat message interface\nexport interface ChatMessage {\n id: number;\n username: string;\n message: string;\n created_at: string;\n}\n\n// User interface\nexport interface User {\n username: string;\n last_active: string;\n}\n\n// API response interfaces\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}\n\n// Session data\nexport interface SessionData {\n username: string;\n}",[],[276,283],[276],{"_102":291,"_95":292,"_153":293,"_155":-5,"_156":136,"_157":199,"_159":160,"_104":294,"_99":32,"_162":260,"_164":295,"_165":22,"_166":-5,"_167":296,"_98":297},"49817e50-3486-11f0-9c08-9e149126039e","README.md","49817edc-3486-11f0-9c08-9e149126039e",["D",1747641181189],"# Job Board with Chat Room\n\nA simple application that allows users to:\n- Post job opportunities\n- Browse job listings\n- Participate in a public chat room to discuss opportunities\n\n## Features\n\n- Job posting form with title, company, description, and contact info\n- Job listings page with all available opportunities\n- Real-time public chat room\n- Simple username-based identification\n\n## Technical Stack\n\n- **Backend**: Hono.js API framework with SQLite database\n- **Frontend**: React with Tailwind CSS\n- **Data Storage**: SQLite for job postings and chat messages\n\n## Project Structure\n\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ └── queries.ts # DB query functions\n│ ├── index.ts # Main entry point\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ ├── JobForm.tsx\n│ │ ├── JobList.tsx\n│ │ └── ChatRoom.tsx\n│ ├── index.html # Main HTML template\n│ └── index.tsx # Frontend JS entry point\n└── shared/\n └── types.ts # Shared types and interfaces\n```\n\n## How to Use\n\n1. Enter your username to identify yourself\n2. Browse existing job postings\n3. Create new job postings using the form\n4. Join the chat room to discuss opportunities with others",[],[292],"files",[150,169,175,184,194,205,212,219,227,236,245,255,264,274,281,290],"counts",{"_302":32,"_303":199,"_304":32,"_305":306},"pulls","branches","forks","envVars",{"_307":32,"_308":32},"count","emptyCount","contents",[311,314,317,320],{"_102":151,"_95":152,"_153":154,"_155":-5,"_156":136,"_157":158,"_159":160,"_104":312,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":313},["D",1747641189633],[152],{"_102":206,"_95":207,"_153":208,"_155":-5,"_156":136,"_157":209,"_159":160,"_104":315,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":316},["D",1747641248636],[207],{"_102":275,"_95":276,"_153":277,"_155":-5,"_156":136,"_157":278,"_159":160,"_104":318,"_99":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_98":319},["D",1747641207899],[276],{"_102":291,"_95":292,"_153":293,"_155":-5,"_156":136,"_157":199,"_159":160,"_104":321,"_99":32,"_162":260,"_164":295,"_165":22,"_166":-5,"_98":322},["D",1747641181189],[292],"upstreamProject",{"_102":143,"_95":325,"_110":-5,"_111":-5,"_108":109,"_23":326},"untitled-2425",{"_93":94,"_128":129},"upstreamBranch",{"_102":139,"_104":329,"_330":331,"_95":43,"_137":143,"_99":32,"_138":-5,"_140":-5,"_332":-5,"_106":-5,"_147":22,"_108":109,"_146":94,"_16":117,"_145":325},["D",1747632823746],"updatedAt",["D",1747632823746],"lockfileKey","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.remixes",{"_93":94,"_95":96,"_100":339,"_304":344,"_345":346},{"_102":103,"_95":96,"_104":340,"_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":341,"_130":342,"_133":343,"_147":22},["D",1747632932701],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":139,"_140":32,"_141":109,"_142":143,"_144":117,"_145":96,"_146":94},[],"upstream",{"_102":143,"_95":325,"_110":-5,"_111":-5,"_108":109,"_23":347},{"_93":94,"_128":129},"actionData","errors"]

Job Board with Chat

Chat Room

Active Users

Post a New Job

No Job Postings Yet

Available Job Opportunities

{job.title}

Description:

Contact:

WisdomMario

My_First_App