Public
Remixed
Submit assistance requests and see them appear instantly
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.

πŸ›ŽοΈ Assistance Hub

A full-stack app with two features: assistance requests and live chat β€” both persisted in SQLite.

Features

πŸ“‹ Requests Tab

  • Submit assistance requests with validation
  • All requests saved to the database and displayed newest-first
  • Persists across page refreshes

πŸ’¬ Live Chat Tab

  • Enter a username to join the chat room
  • Messages delivered in real-time via Server-Sent Events (SSE)
  • Chat history (last 100 messages) loaded from the database on join
  • Messages from you appear on the right (blue), others on the left (white)
  • Live indicator shows connection status

Data model

assistance_requests

ColumnTypeDescription
idINTEGERAuto-incrementing PK
textContentTEXTRequest content (validated non-empty)
timestampTEXTISO 8601

chat_messages

ColumnTypeDescription
idINTEGERAuto-incrementing PK
usernameTEXTSender's display name
messageTEXTMessage content (validated non-empty)
timestampTEXTISO 8601

API

MethodEndpointDescription
GET/api/requestsAll assistance requests
POST/api/requestsSubmit a request
GET/api/chatChat history (last 100)
POST/api/chatSend a chat message
GET/api/chat/streamSSE stream for real-time messages

Architecture

Rendering mermaid diagram...

File structure

index.ts                          ← Hono server (API + SSE + static files)
shared/
  types.ts                        ← AssistanceRequest & ChatMessage types
frontend/
  index.html                      ← HTML shell
  index.tsx                       ← React entrypoint
  components/
    App.tsx                       ← Tab navigation (Requests / Chat)
    RequestForm.tsx               ← Assistance request form + list
    LiveChat.tsx                  ← Username gate + chat UI + SSE listener