Job Board & Chat

\n Connect • Share • Grow\n

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

\n {tabs.map((tab) => (\n setActiveTab(tab.id)}\n className={`py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200 ${\n activeTab === tab.id\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n \n {tab.icon}\n {tab.label}\n \n \n ))}\n

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

\n {activeTab === 'jobs' && }\n {activeTab === 'post-job' && setActiveTab('jobs')} />}\n {activeTab === 'chat' && }\n

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

\n );\n}",[],[234,241,248],{"_105":255,"_96":256,"_157":257,"_159":242,"_160":142,"_161":102,"_163":119,"_107":258,"_101":32,"_165":183,"_167":259,"_168":22,"_169":-5,"_170":260,"_99":261},"0abb7684-3f45-11f0-bbb6-76b3cceeab13","JobBoard.tsx","0abb7756-3f45-11f0-bbb6-76b3cceeab13",["D",1748822621377],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\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 [error, setError] = useState(null);\n const [searchTerm, setSearchTerm] = useState('');\n const [filterType, setFilterType] = useState('all');\n const [filterRemote, setFilterRemote] = useState('all');\n\n useEffect(() => {\n fetchJobs();\n }, []);\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 console.error('Error fetching jobs:', err);\n } finally {\n setLoading(false);\n }\n };\n\n const filteredJobs = jobs.filter(job => {\n const matchesSearch = job.title.toLowerCase().includes(searchTerm.toLowerCase()) ||\n job.company.toLowerCase().includes(searchTerm.toLowerCase()) ||\n job.description.toLowerCase().includes(searchTerm.toLowerCase());\n \n const matchesType = filterType === 'all' || job.type === filterType;\n const matchesRemote = filterRemote === 'all' || \n (filterRemote === 'remote' && job.remote) ||\n (filterRemote === 'onsite' && !job.remote);\n\n return matchesSearch && matchesType && matchesRemote;\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 const colors = {\n 'full-time': 'bg-green-100 text-green-800',\n 'part-time': 'bg-blue-100 text-blue-800',\n 'contract': 'bg-purple-100 text-purple-800',\n 'internship': 'bg-orange-100 text-orange-800'\n };\n return colors[type as keyof typeof colors] || 'bg-gray-100 text-gray-800';\n };\n\n if (loading) {\n return (\n

\n Loading jobs...\n

\n );\n }\n\n if (error) {\n return (\n

⚠️

Error loading jobs

{error}

\n \n Try again\n \n

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

\n {/* Header */}\n

Job Opportunities

\n \n 🔄 Refresh\n \n

\n\n {/* Filters */}\n

\n \n Search\n \n setSearchTerm(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\"\n />\n

\n \n

\n \n Job Type\n \n setFilterType(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n \n \n \n

\n\n

\n \n Location\n \n setFilterRemote(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\"\n >\n \n \n \n \n

\n\n {/* Job Count */}\n

\n Showing {filteredJobs.length} of {jobs.length} jobs\n

\n\n {/* Job Listings */}\n {filteredJobs.length === 0 ? (\n

🔍

No jobs found

\n {jobs.length === 0 \n ? \"No jobs have been posted yet. Be the first to post a job!\"\n : \"Try adjusting your search criteria to find more opportunities.\"\n }\n

\n ) : (\n

\n {filteredJobs.map((job) => (\n

{job.title}

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

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

\n\n

Description

{job.description}

\n \n

Requirements

{job.requirements}

\n ))}\n

\n )}\n

\n );\n}",[],[234,241,256],[234,241],{"_105":264,"_96":265,"_157":266,"_159":235,"_160":142,"_161":236,"_163":119,"_107":267,"_101":32,"_165":268,"_167":269,"_168":22,"_169":-5,"_170":270,"_99":271},"ea7a057a-3f44-11f0-a557-76b3cceeab13","index.html","ea7a07dc-3f44-11f0-a557-76b3cceeab13",["D",1748822567257],"file","\n\n\n \n \n Job Board & Chat\n \n \n \n\n\n

\n \n \n\n",[],[234,265],[234],{"_105":274,"_96":275,"_157":276,"_159":-5,"_160":142,"_161":277,"_163":119,"_107":278,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":279,"_99":288},"c519d454-3f44-11f0-8f0d-76b3cceeab13","shared","5a1e1dfc-73bb-4356-ac94-a737ebf6231a",5,["D",1748822504554],[280],{"_105":281,"_96":282,"_157":283,"_159":276,"_160":142,"_161":277,"_163":119,"_107":284,"_101":32,"_165":183,"_167":285,"_168":22,"_169":-5,"_170":286,"_99":287},"c519cf7c-3f44-11f0-8f0d-76b3cceeab13","types.ts","c519d030-3f44-11f0-8f0d-76b3cceeab13",["D",1748822504554],"// 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 requirements: string;\n location: string;\n salary?: string;\n type: 'full-time' | 'part-time' | 'contract' | 'internship';\n remote: boolean;\n created_at: string;\n updated_at: string;\n}\n\nexport interface CreateJobRequest {\n title: string;\n company: string;\n description: string;\n requirements: string;\n location: string;\n salary?: string;\n type: 'full-time' | 'part-time' | 'contract' | 'internship';\n remote: boolean;\n}\n\nexport interface ChatMessage {\n id: number;\n username: string;\n message: string;\n created_at: string;\n}\n\nexport interface CreateChatMessageRequest {\n username: string;\n message: string;\n}\n\nexport interface ApiResponse {\n success: boolean;\n data?: T;\n error?: string;\n}",[],[275,282],[275],{"_105":290,"_96":291,"_157":292,"_159":-5,"_160":142,"_161":293,"_163":119,"_107":294,"_101":32,"_165":268,"_167":295,"_168":22,"_169":-5,"_170":296,"_99":297},"c11a10ee-3f44-11f0-9f24-76b3cceeab13","README.md","c11a11ca-3f44-11f0-9f24-76b3cceeab13",4,["D",1748822497845],"# 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- 📝 Post job listings with title, company, description, and requirements\n- 💬 Public chat room for discussing opportunities\n- 🔍 Browse and search job postings\n- 📱 Responsive design with TailwindCSS\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 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## Tech Stack\n\n- **Backend**: Hono (TypeScript API framework)\n- **Database**: SQLite\n- **Frontend**: React 18.2.0 with TypeScript\n- **Styling**: TailwindCSS\n- **Real-time**: Polling for chat updates\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- `GET /api/jobs/:id` - Get a specific job posting\n\n### Chat\n- `GET /api/chat/messages` - Get chat messages\n- `POST /api/chat/messages` - Send a chat message\n\n## Getting Started\n\nThe app is automatically deployed on Val Town. Visit the HTTP endpoint to start using the application.",[],[291],{"_105":299,"_96":100,"_157":300,"_159":-5,"_160":142,"_161":301,"_163":22,"_107":302,"_101":303,"_165":304,"_167":305,"_168":22,"_169":-5,"_170":306,"_99":307},"69911390-3f44-11f0-800a-76b3cceeab13","58c206e6-3f44-11f0-bde5-76b3cceeab13",3,["D",1748822350984],2,"http","export default async function (req: Request): Promise {\n return Response.json({ ok: true })\n}",[],[100],"files",[154,172,178,187,197,204,213,222,232,239,246,254,263,273,280,289,298],"counts",{"_312":32,"_313":314,"_315":32,"_316":317,"_320":321},"pulls","branches",1,"forks","envVars",{"_318":32,"_319":32},"count","emptyCount","connections",{"_318":32,"_322":32},"unfilledCount","contents",[],{"_105":299,"_96":100,"_157":300,"_159":-5,"_160":142,"_161":301,"_163":22,"_107":326,"_101":303,"_165":304,"_167":305,"_168":22,"_169":-5,"_99":327},["D",1748822350984],[100],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":44,"_101":102,"_99":100,"_103":336,"_152":341,"_308":393,"_268":394,"_323":396,"_397":-5,"_398":-5,"_399":-5,"_400":-5,"_401":402,"_316":-5},{"_105":106,"_96":97,"_107":337,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":338,"_136":339,"_139":340,"_151":22},["D",1748822322775],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115},{"_101":141,"_96":44,"_105":142,"_143":106,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":97,"_150":95},[342,366,381,387,390],{"_105":155,"_96":156,"_157":158,"_159":-5,"_160":142,"_161":162,"_163":119,"_107":164,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":343,"_99":365},[344,353,362],{"_105":173,"_96":174,"_157":175,"_159":158,"_160":142,"_161":162,"_163":119,"_107":176,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":345,"_99":352},[346,349],{"_105":179,"_96":180,"_157":181,"_159":175,"_160":142,"_161":162,"_163":119,"_107":182,"_101":32,"_165":183,"_167":184,"_168":22,"_169":-5,"_170":347,"_99":348},[],[156,174,180],{"_105":188,"_96":189,"_157":190,"_159":175,"_160":142,"_161":191,"_163":119,"_107":192,"_101":32,"_165":183,"_167":193,"_168":22,"_169":-5,"_170":350,"_99":351},[],[156,174,189],[156,174],{"_105":198,"_96":199,"_157":200,"_159":158,"_160":142,"_161":201,"_163":119,"_107":202,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":354,"_99":361},[355,358],{"_105":205,"_96":206,"_157":207,"_159":200,"_160":142,"_161":208,"_163":119,"_107":209,"_101":32,"_165":183,"_167":210,"_168":22,"_169":-5,"_170":356,"_99":357},[],[156,199,206],{"_105":214,"_96":215,"_157":216,"_159":200,"_160":142,"_161":201,"_163":119,"_107":217,"_101":32,"_165":183,"_167":218,"_168":22,"_169":-5,"_170":359,"_99":360},[],[156,199,215],[156,199],{"_105":223,"_96":224,"_157":225,"_159":158,"_160":142,"_161":226,"_163":119,"_107":227,"_101":32,"_165":183,"_167":228,"_168":22,"_169":-5,"_170":363,"_99":364},[],[156,224],[156],{"_105":233,"_96":234,"_157":235,"_159":-5,"_160":142,"_161":236,"_163":119,"_107":237,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":367,"_99":380},[368,377],{"_105":240,"_96":241,"_157":242,"_159":235,"_160":142,"_161":243,"_163":119,"_107":244,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":369,"_99":376},[370,373],{"_105":247,"_96":248,"_157":249,"_159":242,"_160":142,"_161":243,"_163":119,"_107":250,"_101":32,"_165":183,"_167":251,"_168":22,"_169":-5,"_170":371,"_99":372},[],[234,241,248],{"_105":255,"_96":256,"_157":257,"_159":242,"_160":142,"_161":102,"_163":119,"_107":258,"_101":32,"_165":183,"_167":259,"_168":22,"_169":-5,"_170":374,"_99":375},[],[234,241,256],[234,241],{"_105":264,"_96":265,"_157":266,"_159":235,"_160":142,"_161":236,"_163":119,"_107":267,"_101":32,"_165":268,"_167":269,"_168":22,"_169":-5,"_170":378,"_99":379},[],[234,265],[234],{"_105":274,"_96":275,"_157":276,"_159":-5,"_160":142,"_161":277,"_163":119,"_107":278,"_101":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":382,"_99":386},[383],{"_105":281,"_96":282,"_157":283,"_159":276,"_160":142,"_161":277,"_163":119,"_107":284,"_101":32,"_165":183,"_167":285,"_168":22,"_169":-5,"_170":384,"_99":385},[],[275,282],[275],{"_105":290,"_96":291,"_157":292,"_159":-5,"_160":142,"_161":293,"_163":119,"_107":294,"_101":32,"_165":268,"_167":295,"_168":22,"_169":-5,"_170":388,"_99":389},[],[291],{"_105":299,"_96":100,"_157":300,"_159":-5,"_160":142,"_161":301,"_163":22,"_107":302,"_101":303,"_165":304,"_167":305,"_168":22,"_169":-5,"_170":391,"_99":392},[],[100],[342,344,346,349,353,355,358,362,366,368,370,373,377,381,383,387,390],{"_105":299,"_96":100,"_157":300,"_159":-5,"_160":142,"_161":301,"_163":22,"_107":326,"_101":303,"_165":304,"_167":305,"_168":22,"_169":-5,"_99":395},[100],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

Medix

JobMeg