🗳️ 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}",[],[231,237,243],{"_104":250,"_95":251,"_156":252,"_158":238,"_159":138,"_160":161,"_162":163,"_106":253,"_100":32,"_165":183,"_167":254,"_168":22,"_169":-5,"_170":255,"_98":256},"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}",[],[231,237,251],{"_104":258,"_95":259,"_156":260,"_158":238,"_159":138,"_160":161,"_162":163,"_106":261,"_100":32,"_165":183,"_167":262,"_168":22,"_169":-5,"_170":263,"_98":264},"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}",[],[231,237,259],[231,237],{"_104":267,"_95":268,"_156":269,"_158":232,"_159":138,"_160":161,"_162":163,"_106":270,"_100":32,"_165":271,"_167":272,"_168":22,"_169":-5,"_170":273,"_98":274},"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",[],[231,268],{"_104":276,"_95":277,"_156":278,"_158":232,"_159":138,"_160":161,"_162":163,"_106":279,"_100":32,"_165":183,"_167":280,"_168":22,"_169":-5,"_170":281,"_98":282},"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();",[],[231,277],[231],{"_104":285,"_95":286,"_156":287,"_158":-5,"_159":138,"_160":161,"_162":163,"_106":288,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":289,"_98":298},"55e28cda-3fc5-11f0-8080-76b3cceeab13","shared","e60b5731-2851-4619-9018-1637c9834655",["D",1748877723009],[290],{"_104":291,"_95":292,"_156":293,"_158":287,"_159":138,"_160":161,"_162":163,"_106":294,"_100":32,"_165":183,"_167":295,"_168":22,"_169":-5,"_170":296,"_98":297},"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];",[],[286,292],[286],{"_104":300,"_95":301,"_156":302,"_158":-5,"_159":138,"_160":101,"_162":22,"_106":303,"_100":161,"_165":271,"_167":304,"_168":22,"_169":-5,"_170":305,"_98":306},"6078f8f4-3fc6-11f0-b424-76b3cceeab13","README.md","11079531-de2e-4899-af24-9a3bc01543ee",["D",1748878170301],"# 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",[],[301],{"_104":308,"_95":309,"_156":310,"_158":-5,"_159":138,"_160":161,"_162":163,"_106":311,"_100":32,"_165":183,"_167":72,"_168":22,"_169":-5,"_170":312,"_98":313},"55e29090-3fc5-11f0-8080-76b3cceeab13","new-file-6236.tsx","2d849cef-430a-4d5d-b72b-f61d7687215b",["D",1748877723009],[],[309],"files",[153,172,178,187,196,202,210,219,229,235,241,249,257,266,275,284,290,299,307],"counts",{"_318":32,"_319":101,"_320":32,"_321":32},"pulls","branches","forks","envVars","contents",[],{"_104":267,"_95":268,"_156":269,"_158":232,"_159":138,"_160":161,"_162":163,"_106":325,"_100":32,"_165":271,"_167":272,"_168":22,"_169":-5,"_98":326},["D",1748877723009],[231,268],"upstreamProject",{"_104":146,"_95":329,"_112":-5,"_113":-5,"_110":111,"_23":330},"kevin",{"_93":94,"_130":131},"upstreamBranch",{"_104":141,"_106":333,"_334":335,"_95":43,"_139":146,"_100":143,"_140":-5,"_142":-5,"_336":337,"_108":-5,"_150":22,"_110":111,"_149":94,"_16":119,"_148":329},["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":344,"_151":349,"_314":407,"_271":408,"_322":410,"_411":412,"_415":163,"_416":-5,"_417":418,"_419":32,"_420":421},{"_104":105,"_95":96,"_106":345,"_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":346,"_132":347,"_135":348,"_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},[350,374,395,401,404],{"_104":154,"_95":155,"_156":157,"_158":-5,"_159":138,"_160":161,"_162":163,"_106":164,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":351,"_98":373},[352,361,370],{"_104":173,"_95":174,"_156":175,"_158":157,"_159":138,"_160":161,"_162":163,"_106":176,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":353,"_98":360},[354,357],{"_104":179,"_95":180,"_156":181,"_158":175,"_159":138,"_160":161,"_162":163,"_106":182,"_100":32,"_165":183,"_167":184,"_168":22,"_169":-5,"_170":355,"_98":356},[],[155,174,180],{"_104":188,"_95":189,"_156":190,"_158":175,"_159":138,"_160":161,"_162":163,"_106":191,"_100":32,"_165":183,"_167":192,"_168":22,"_169":-5,"_170":358,"_98":359},[],[155,174,189],[155,174],{"_104":197,"_95":198,"_156":199,"_158":157,"_159":138,"_160":161,"_162":163,"_106":200,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":362,"_98":369},[363,366],{"_104":203,"_95":204,"_156":205,"_158":199,"_159":138,"_160":161,"_162":163,"_106":206,"_100":32,"_165":183,"_167":207,"_168":22,"_169":-5,"_170":364,"_98":365},[],[155,198,204],{"_104":211,"_95":212,"_156":213,"_158":199,"_159":138,"_160":161,"_162":163,"_106":214,"_100":32,"_165":183,"_167":215,"_168":22,"_169":-5,"_170":367,"_98":368},[],[155,198,212],[155,198],{"_104":220,"_95":221,"_156":222,"_158":157,"_159":138,"_160":161,"_162":163,"_106":223,"_100":32,"_165":224,"_167":225,"_168":22,"_169":-5,"_170":371,"_98":372},[],[155,221],[155],{"_104":230,"_95":231,"_156":232,"_158":-5,"_159":138,"_160":161,"_162":163,"_106":233,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":375,"_98":394},[376,388,391],{"_104":236,"_95":237,"_156":238,"_158":232,"_159":138,"_160":161,"_162":163,"_106":239,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":377,"_98":387},[378,381,384],{"_104":242,"_95":243,"_156":244,"_158":238,"_159":138,"_160":161,"_162":22,"_106":245,"_100":32,"_165":183,"_167":246,"_168":22,"_169":-5,"_170":379,"_98":380},[],[231,237,243],{"_104":250,"_95":251,"_156":252,"_158":238,"_159":138,"_160":161,"_162":163,"_106":253,"_100":32,"_165":183,"_167":254,"_168":22,"_169":-5,"_170":382,"_98":383},[],[231,237,251],{"_104":258,"_95":259,"_156":260,"_158":238,"_159":138,"_160":161,"_162":163,"_106":261,"_100":32,"_165":183,"_167":262,"_168":22,"_169":-5,"_170":385,"_98":386},[],[231,237,259],[231,237],{"_104":267,"_95":268,"_156":269,"_158":232,"_159":138,"_160":161,"_162":163,"_106":270,"_100":32,"_165":271,"_167":272,"_168":22,"_169":-5,"_170":389,"_98":390},[],[231,268],{"_104":276,"_95":277,"_156":278,"_158":232,"_159":138,"_160":161,"_162":163,"_106":279,"_100":32,"_165":183,"_167":280,"_168":22,"_169":-5,"_170":392,"_98":393},[],[231,277],[231],{"_104":285,"_95":286,"_156":287,"_158":-5,"_159":138,"_160":161,"_162":163,"_106":288,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":396,"_98":400},[397],{"_104":291,"_95":292,"_156":293,"_158":287,"_159":138,"_160":161,"_162":163,"_106":294,"_100":32,"_165":183,"_167":295,"_168":22,"_169":-5,"_170":398,"_98":399},[],[286,292],[286],{"_104":300,"_95":301,"_156":302,"_158":-5,"_159":138,"_160":101,"_162":22,"_106":303,"_100":161,"_165":271,"_167":304,"_168":22,"_169":-5,"_170":402,"_98":403},[],[301],{"_104":308,"_95":309,"_156":310,"_158":-5,"_159":138,"_160":161,"_162":163,"_106":311,"_100":32,"_165":183,"_167":72,"_168":22,"_169":-5,"_170":405,"_98":406},[],[309],[350,352,354,357,361,363,366,370,374,376,378,381,384,388,391,395,397,401,404],{"_104":267,"_95":268,"_156":269,"_158":232,"_159":138,"_160":161,"_162":163,"_106":325,"_100":32,"_165":271,"_167":272,"_168":22,"_169":-5,"_98":409},[231,268],[],"upstream",{"_104":141,"_106":413,"_334":414,"_95":43,"_139":146,"_100":143,"_140":-5,"_142":-5,"_336":337,"_108":-5,"_150":22,"_110":111,"_149":94,"_16":119,"_148":329},["D",1748864547641],["D",1748877580727],"showCompareCallout","pull","ahead",5,"behind","templates",[],"actionData","errors"]

kibet

kevinbet