🗳️ Election Hub

Vote and discuss the election

\n \n

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

\n {/* Header */}\n

🗳️ Election Hub

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

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

\n setActiveTab('vote')}\n className={`py-2 px-1 border-b-2 font-medium text-sm ${\n activeTab === 'vote'\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n 🗳️ Voting\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 💬 Discussion\n \n

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

\n {activeTab === 'vote' ? (\n \n ) : (\n \n )}\n

\n );\n}",[],[229,235,241],{"_104":248,"_95":249,"_155":250,"_157":236,"_158":138,"_159":101,"_160":161,"_106":251,"_100":32,"_163":181,"_165":252,"_166":22,"_167":-5,"_168":253,"_98":254},"55e270ec-3fc5-11f0-8080-76b3cceeab13","ChatRoom.tsx","1bb090f4-fe2f-43f0-8919-b077bed3942a",["D",1748877723009],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { ChatMessage } from \"../../shared/types.ts\";\n\ninterface ChatRoomProps {\n username: string;\n messages: ChatMessage[];\n onNewMessage: (message: ChatMessage) => void;\n}\n\nexport default function ChatRoom({ username, messages, onNewMessage }: ChatRoomProps) {\n const [newMessage, setNewMessage] = useState(\"\");\n const [isSending, setIsSending] = useState(false);\n const [isConnected, setIsConnected] = useState(false);\n const messagesEndRef = useRef(null);\n const eventSourceRef = useRef(null);\n\n useEffect(() => {\n // Set up Server-Sent Events for real-time chat\n const eventSource = new EventSource('/api/chat/stream');\n eventSourceRef.current = eventSource;\n\n eventSource.onopen = () => {\n setIsConnected(true);\n };\n\n eventSource.onmessage = (event) => {\n try {\n const data = JSON.parse(event.data);\n \n if (data.type === 'message') {\n onNewMessage(data.data);\n } else if (data.type === 'connected') {\n setIsConnected(true);\n } else if (data.type === 'error') {\n console.error('SSE error:', data.error);\n }\n } catch (error) {\n console.error('Error parsing SSE data:', error);\n }\n };\n\n eventSource.onerror = () => {\n setIsConnected(false);\n };\n\n return () => {\n eventSource.close();\n };\n }, [onNewMessage]);\n\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n const sendMessage = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!newMessage.trim() || isSending) return;\n\n setIsSending(true);\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,\n message: newMessage.trim(),\n }),\n });\n \n const data = await response.json();\n \n if (data.success) {\n setNewMessage(\"\");\n // Message will be added via SSE, no need to add it manually\n } else {\n alert(data.error || 'Failed to send message');\n }\n } catch (error) {\n console.error('Error sending message:', error);\n alert('Failed to send message. Please try again.');\n } finally {\n setIsSending(false);\n }\n };\n\n const formatTimestamp = (timestamp: string) => {\n const date = new Date(timestamp);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n };\n\n return (\n

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

Election Discussion

\n \n {isConnected ? 'Connected' : 'Disconnected'}\n \n

\n Discuss the election with other voters. Keep it civil! 🗳️\n

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

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

No messages yet. Start the conversation!

\n ) : (\n messages.map((message) => (\n \n \n {message.username !== username && (\n

\n {message.username}\n

\n )}\n

{message.message}

\n \n {formatTimestamp(message.timestamp)}\n

\n \n ))\n )}\n

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

\n \n );\n}",[],[229,235,249],{"_104":256,"_95":257,"_155":258,"_157":236,"_158":138,"_159":101,"_160":161,"_106":259,"_100":32,"_163":181,"_165":260,"_166":22,"_167":-5,"_168":261,"_98":262},"55e27718-3fc5-11f0-8080-76b3cceeab13","VotingPanel.tsx","b1b2245e-794a-4f65-bfa2-75e7bc0e3019",["D",1748877723009],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type { VoteResult, Candidate } from \"../../shared/types.ts\";\nimport { CANDIDATES } from \"../../shared/types.ts\";\n\ninterface VotingPanelProps {\n username: string;\n voteResults: VoteResult[];\n onVoteResultsUpdate: (results: VoteResult[]) => void;\n}\n\nexport default function VotingPanel({ username, voteResults, onVoteResultsUpdate }: VotingPanelProps) {\n const [hasVoted, setHasVoted] = useState(false);\n const [userVote, setUserVote] = useState(null);\n const [isVoting, setIsVoting] = useState(false);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n checkUserVoteStatus();\n }, [username]);\n\n const checkUserVoteStatus = async () => {\n try {\n const response = await fetch(`/api/votes/user/${encodeURIComponent(username)}`);\n const data = await response.json();\n \n if (data.success) {\n setHasVoted(data.hasVoted);\n setUserVote(data.vote);\n }\n } catch (error) {\n console.error('Error checking vote status:', error);\n } finally {\n setLoading(false);\n }\n };\n\n const castVote = async (candidate: Candidate) => {\n setIsVoting(true);\n \n try {\n const response = await fetch('/api/votes', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n username,\n candidate,\n }),\n });\n \n const data = await response.json();\n \n if (data.success) {\n setHasVoted(true);\n setUserVote(candidate);\n await refreshVoteResults();\n } else {\n alert(data.error || 'Failed to cast vote');\n }\n } catch (error) {\n console.error('Error casting vote:', error);\n alert('Failed to cast vote. Please try again.');\n } finally {\n setIsVoting(false);\n }\n };\n\n const refreshVoteResults = async () => {\n try {\n const response = await fetch('/api/votes');\n const data = await response.json();\n \n if (data.success) {\n onVoteResultsUpdate(data.results);\n }\n } catch (error) {\n console.error('Error refreshing vote results:', error);\n }\n };\n\n const totalVotes = voteResults.reduce((sum, result) => sum + result.count, 0);\n\n if (loading) {\n return (\n

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

\n {/* Voting Section */}\n

Cast Your Vote

\n \n {hasVoted ? (\n

\n ✅\n

\n Vote Recorded\n

\n You voted for: {userVote}\n

\n ) : (\n

Choose your preferred candidate:

\n )}\n\n

\n {CANDIDATES.map((candidate) => (\n !hasVoted && !isVoting && castVote(candidate)}\n >\n

{candidate}

\n {hasVoted && userVote === candidate && (\n Your choice\n )}\n

\n {!hasVoted && (\n \n {isVoting ? 'Voting...' : 'Vote'}\n \n )}\n

\n ))}\n

\n\n {/* Results Section */}\n

Live Results

\n \n Refresh\n \n

\n\n {totalVotes === 0 ? (\n

No votes cast yet. Be the first to vote!

\n ) : (\n

\n Total votes: {totalVotes}\n

\n \n {voteResults.map((result) => (\n

\n {result.candidate}\n \n {result.count} votes ({result.percentage}%)\n \n

\n ))}\n

\n )}\n \n \n );\n}",[],[229,235,257],[229,235],{"_104":265,"_95":266,"_155":267,"_157":230,"_158":138,"_159":101,"_160":161,"_106":268,"_100":32,"_163":269,"_165":270,"_166":22,"_167":-5,"_168":271,"_98":272},"55e2817c-3fc5-11f0-8080-76b3cceeab13","index.html","b7a6e43d-f6a9-4473-ba53-03c08cbbf3db",["D",1748877723009],"file","\n\n\n \n \n Election Voting & Chat\n \n \n \n\n\n

\n \n \n\n",[],[229,266],{"_104":274,"_95":275,"_155":276,"_157":230,"_158":138,"_159":101,"_160":161,"_106":277,"_100":32,"_163":181,"_165":278,"_166":22,"_167":-5,"_168":279,"_98":280},"55e2850a-3fc5-11f0-8080-76b3cceeab13","index.tsx","5d73b18a-012c-442e-b521-c905558f0a38",["D",1748877723009],"/** @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\nconst root = createRoot(document.getElementById('root')!);\nroot.render();",[],[229,275],[229],{"_104":283,"_95":284,"_155":285,"_157":-5,"_158":138,"_159":101,"_160":161,"_106":286,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":287,"_98":296},"55e28cda-3fc5-11f0-8080-76b3cceeab13","shared","e60b5731-2851-4619-9018-1637c9834655",["D",1748877723009],[288],{"_104":289,"_95":290,"_155":291,"_157":285,"_158":138,"_159":101,"_160":161,"_106":292,"_100":32,"_163":181,"_165":293,"_166":22,"_167":-5,"_168":294,"_98":295},"55e28ba4-3fc5-11f0-8080-76b3cceeab13","types.ts","4b7a5a8f-404c-4bf3-83ec-d2e6aaa707c2",["D",1748877723009],"// Shared types for the voting and chat application\n\nexport interface Vote {\n id: number;\n candidate: string;\n username: string;\n timestamp: string;\n}\n\nexport interface VoteResult {\n candidate: string;\n count: number;\n percentage: number;\n}\n\nexport interface ChatMessage {\n id: number;\n username: string;\n message: string;\n timestamp: string;\n}\n\nexport interface User {\n username: string;\n hasVoted: boolean;\n}\n\nexport const CANDIDATES = [\n \"Alice Johnson\",\n \"Bob Smith\", \n \"Carol Davis\",\n \"David Wilson\"\n] as const;\n\nexport type Candidate = typeof CANDIDATES[number];",[],[284,290],[284],{"_104":298,"_95":299,"_155":300,"_157":-5,"_158":138,"_159":101,"_160":22,"_106":301,"_100":32,"_163":269,"_165":302,"_166":22,"_167":-5,"_168":303,"_98":304},"55e28e56-3fc5-11f0-8080-76b3cceeab13","README.md","11079531-de2e-4899-af24-9a3bc01543ee",["D",1748877723009],"# Election Voting & Chat App\n\nA real-time voting application with public chat functionality for election discussions.\n\n## Features\n\n- **Voting System**: Cast votes for different candidates/options\n- **Public Chat Room**: Real-time discussion about elections\n- **Vote Results**: Live vote tallies and percentages\n- **User Authentication**: Simple username-based system\n- **Responsive Design**: Works on desktop and mobile\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│ │ ├── votes.ts # Voting API endpoints\n│ │ └── chat.ts # Chat API endpoints\n│ └── index.ts # Main Hono server\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── VotingPanel.tsx # Voting interface\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## Technology Stack\n\n- **Backend**: Hono (TypeScript API framework)\n- **Frontend**: React with TypeScript\n- **Database**: SQLite\n- **Styling**: TailwindCSS\n- **Real-time**: Server-Sent Events (SSE)\n\n## API Endpoints\n\n- `GET /` - Serve the main application\n- `GET /api/votes` - Get current vote results\n- `POST /api/votes` - Cast a vote\n- `GET /api/chat/messages` - Get chat messages\n- `POST /api/chat/messages` - Send a chat message\n- `GET /api/chat/stream` - SSE stream for real-time chat updates\n\n## Usage\n\n1. Enter your username to join\n2. Cast your vote for your preferred candidate\n3. Participate in the public chat discussion\n4. View live vote results and chat updates",[],[299],{"_104":306,"_95":307,"_155":308,"_157":-5,"_158":138,"_159":101,"_160":161,"_106":309,"_100":32,"_163":181,"_165":72,"_166":22,"_167":-5,"_168":310,"_98":311},"55e29090-3fc5-11f0-8080-76b3cceeab13","new-file-6236.tsx","2d849cef-430a-4d5d-b72b-f61d7687215b",["D",1748877723009],[],[307],"files",[153,170,176,185,194,200,208,217,227,233,239,247,255,264,273,282,288,297,305],"counts",{"_316":32,"_317":318,"_319":32,"_320":32},"pulls","branches",2,"forks","envVars","contents",[323,326,329],{"_104":171,"_95":172,"_155":173,"_157":156,"_158":138,"_159":101,"_160":161,"_106":324,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":325},["D",1748877723009],[99,172],{"_104":195,"_95":196,"_155":197,"_157":156,"_158":138,"_159":101,"_160":161,"_106":327,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":328},["D",1748877723009],[99,196],{"_104":218,"_95":219,"_155":220,"_157":156,"_158":138,"_159":101,"_160":161,"_106":330,"_100":32,"_163":222,"_165":223,"_166":22,"_167":-5,"_98":331},["D",1748877723009],[99,219],{"_104":154,"_95":99,"_155":156,"_157":-5,"_158":138,"_159":101,"_160":161,"_106":333,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":334},["D",1748877723009],[99],"upstreamProject",{"_104":146,"_95":337,"_112":-5,"_113":-5,"_110":111,"_23":338},"kevin",{"_93":94,"_130":131},"upstreamBranch",{"_104":141,"_106":341,"_342":343,"_95":43,"_139":146,"_100":143,"_140":-5,"_142":-5,"_344":345,"_108":-5,"_150":22,"_110":111,"_149":94,"_16":119,"_148":337},["D",1748864547641],"updatedAt",["D",1748877580727],"lockfileKey","1757194770278-esm.town_v_kibet_kevin@17-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":352,"_151":357,"_312":415,"_269":416,"_321":418,"_425":426,"_429":161,"_430":-5,"_431":432,"_433":32,"_434":435},{"_104":105,"_95":96,"_106":353,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":354,"_132":355,"_135":356,"_150":22},["D",1748877723009],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":141,"_142":143,"_144":111,"_145":146,"_147":119,"_148":96,"_149":94},[358,382,403,409,412],{"_104":154,"_95":99,"_155":156,"_157":-5,"_158":138,"_159":101,"_160":161,"_106":162,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":359,"_98":381},[360,369,378],{"_104":171,"_95":172,"_155":173,"_157":156,"_158":138,"_159":101,"_160":161,"_106":174,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":361,"_98":368},[362,365],{"_104":177,"_95":178,"_155":179,"_157":173,"_158":138,"_159":101,"_160":161,"_106":180,"_100":32,"_163":181,"_165":182,"_166":22,"_167":-5,"_168":363,"_98":364},[],[99,172,178],{"_104":186,"_95":187,"_155":188,"_157":173,"_158":138,"_159":101,"_160":161,"_106":189,"_100":32,"_163":181,"_165":190,"_166":22,"_167":-5,"_168":366,"_98":367},[],[99,172,187],[99,172],{"_104":195,"_95":196,"_155":197,"_157":156,"_158":138,"_159":101,"_160":161,"_106":198,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":370,"_98":377},[371,374],{"_104":201,"_95":202,"_155":203,"_157":197,"_158":138,"_159":101,"_160":161,"_106":204,"_100":32,"_163":181,"_165":205,"_166":22,"_167":-5,"_168":372,"_98":373},[],[99,196,202],{"_104":209,"_95":210,"_155":211,"_157":197,"_158":138,"_159":101,"_160":161,"_106":212,"_100":32,"_163":181,"_165":213,"_166":22,"_167":-5,"_168":375,"_98":376},[],[99,196,210],[99,196],{"_104":218,"_95":219,"_155":220,"_157":156,"_158":138,"_159":101,"_160":161,"_106":221,"_100":32,"_163":222,"_165":223,"_166":22,"_167":-5,"_168":379,"_98":380},[],[99,219],[99],{"_104":228,"_95":229,"_155":230,"_157":-5,"_158":138,"_159":101,"_160":161,"_106":231,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":383,"_98":402},[384,396,399],{"_104":234,"_95":235,"_155":236,"_157":230,"_158":138,"_159":101,"_160":161,"_106":237,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":385,"_98":395},[386,389,392],{"_104":240,"_95":241,"_155":242,"_157":236,"_158":138,"_159":101,"_160":22,"_106":243,"_100":32,"_163":181,"_165":244,"_166":22,"_167":-5,"_168":387,"_98":388},[],[229,235,241],{"_104":248,"_95":249,"_155":250,"_157":236,"_158":138,"_159":101,"_160":161,"_106":251,"_100":32,"_163":181,"_165":252,"_166":22,"_167":-5,"_168":390,"_98":391},[],[229,235,249],{"_104":256,"_95":257,"_155":258,"_157":236,"_158":138,"_159":101,"_160":161,"_106":259,"_100":32,"_163":181,"_165":260,"_166":22,"_167":-5,"_168":393,"_98":394},[],[229,235,257],[229,235],{"_104":265,"_95":266,"_155":267,"_157":230,"_158":138,"_159":101,"_160":161,"_106":268,"_100":32,"_163":269,"_165":270,"_166":22,"_167":-5,"_168":397,"_98":398},[],[229,266],{"_104":274,"_95":275,"_155":276,"_157":230,"_158":138,"_159":101,"_160":161,"_106":277,"_100":32,"_163":181,"_165":278,"_166":22,"_167":-5,"_168":400,"_98":401},[],[229,275],[229],{"_104":283,"_95":284,"_155":285,"_157":-5,"_158":138,"_159":101,"_160":161,"_106":286,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":404,"_98":408},[405],{"_104":289,"_95":290,"_155":291,"_157":285,"_158":138,"_159":101,"_160":161,"_106":292,"_100":32,"_163":181,"_165":293,"_166":22,"_167":-5,"_168":406,"_98":407},[],[284,290],[284],{"_104":298,"_95":299,"_155":300,"_157":-5,"_158":138,"_159":101,"_160":22,"_106":301,"_100":32,"_163":269,"_165":302,"_166":22,"_167":-5,"_168":410,"_98":411},[],[299],{"_104":306,"_95":307,"_155":308,"_157":-5,"_158":138,"_159":101,"_160":161,"_106":309,"_100":32,"_163":181,"_165":72,"_166":22,"_167":-5,"_168":413,"_98":414},[],[307],[358,360,362,365,369,371,374,378,382,384,386,389,392,396,399,403,405,409,412],{"_104":154,"_95":99,"_155":156,"_157":-5,"_158":138,"_159":101,"_160":161,"_106":333,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":417},[99],[419,421,423],{"_104":171,"_95":172,"_155":173,"_157":156,"_158":138,"_159":101,"_160":161,"_106":324,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":420},[99,172],{"_104":195,"_95":196,"_155":197,"_157":156,"_158":138,"_159":101,"_160":161,"_106":327,"_100":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":422},[99,196],{"_104":218,"_95":219,"_155":220,"_157":156,"_158":138,"_159":101,"_160":161,"_106":330,"_100":32,"_163":222,"_165":223,"_166":22,"_167":-5,"_98":424},[99,219],"upstream",{"_104":141,"_106":427,"_342":428,"_95":43,"_139":146,"_100":143,"_140":-5,"_142":-5,"_344":345,"_108":-5,"_150":22,"_110":111,"_149":94,"_16":119,"_148":337},["D",1748864547641],["D",1748877580727],"showCompareCallout","pull","ahead",5,"behind","templates",[],"actionData","errors"]

kibet

kevinbet