live-talk
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.
A real-time interactive presentation tool for Last Conference that allows presenters to embed activities (polls, questions, etc.) throughout their talks. Audience members scan a QR code to participate, and responses are displayed in real-time to the presenter.
- Create presentations with multiple steps
- Each step contains a widget (poll, question, etc.)
- Presenter view shows QR code and live results
- Switch between steps during the presentation
- View aggregated responses from participants
- Scan QR code to join
- Get assigned a session ID (stored in localStorage)
- See current step's widget/activity
- Submit responses (answers, votes, etc.)
- Responses are tied to their session ID
id(INTEGER PRIMARY KEY)name(TEXT) - Name of the talkpresenter(TEXT) - Presenter nametalk_deck_link(TEXT) - Link to presentation slidescreated_at(TEXT) - Timestamp
id(INTEGER PRIMARY KEY)presentation_id(INTEGER) - Foreign key to presentationsstep_number(INTEGER) - Order within presentationwidget_type(TEXT) - Type of widget (poll, question, etc.)widget_config(TEXT) - JSON configuration for the widgetis_active(INTEGER) - Whether this step is currently active (0 or 1)
id(TEXT PRIMARY KEY) - Session ID (UUID)presentation_id(INTEGER) - Which presentation they're increated_at(TEXT) - Timestamp
id(INTEGER PRIMARY KEY)session_id(TEXT) - Foreign key to sessionsstep_id(INTEGER) - Foreign key to stepsresponse_data(TEXT) - JSON data of the responsecreated_at(TEXT) - Timestamp
backend/
βββ index.ts # Main Hono app entry point
βββ database/
β βββ migrations.ts # Database schema setup
β βββ queries.ts # Database query functions
βββ routes/
βββ presentations.ts # Presentation CRUD
βββ steps.ts # Step management
βββ sessions.ts # Session handling
βββ responses.ts # Response handling
βββ admin.ts # Admin/presenter endpoints
frontend/
βββ index.html # Main HTML template
βββ index.tsx # Frontend entry point
βββ components/
β βββ App.tsx # Main app component
β βββ PresenterMode.tsx # Presenter view
β βββ ParticipantMode.tsx # Participant view
β βββ QRCode.tsx # QR code display
β βββ widgets/
β βββ PollWidget.tsx # Poll widget
β βββ PollPresenter.tsx # Poll presenter view
β βββ [OtherWidgets].tsx # Future widgets
βββ utils/
βββ session.ts # Session management (localStorage)
βββ api.ts # API client functions
shared/
βββ types.ts # TypeScript types/interfaces
- Poll - Multiple choice question with real-time results
- Open Question - Text input with responses displayed
- Word Cloud - Collect words/phrases
- Rating - Star or scale rating
Each widget has:
- Participant Component: What participants see and interact with
- Presenter Component: What presenter sees (results, QR code)
- Config Schema: JSON schema for widget configuration
- Response Schema: JSON schema for response data
GET /api/presentations- List all presentationsPOST /api/presentations- Create new presentationGET /api/presentations/:id- Get presentation detailsPUT /api/presentations/:id- Update presentation
GET /api/presentations/:id/steps- Get all steps for a presentationPOST /api/presentations/:id/steps- Create new stepPUT /api/steps/:id- Update stepPUT /api/steps/:id/activate- Activate a step (deactivates others)GET /api/steps/active- Get currently active step
POST /api/sessions- Create or get existing sessionGET /api/sessions/:id- Get session details
POST /api/responses- Submit a responseGET /api/steps/:id/responses- Get all responses for a step
GET /present/:presentationId/step/:stepNumber- Presenter view for a stepGET /join/:presentationId- Participant view (redirects to active step)
- Basic HTTP route setup
- Local development server with watch mode
- Set up SQLite database schema
- Create database migration functions
- Implement presentation CRUD endpoints
- Implement step management endpoints
- Implement session management
- Implement response handling
- Set up React frontend structure
- Create session management (localStorage)
- Build API client utilities
- Create routing system
- Build basic UI layout
- Create widget framework/interface
- Implement Poll widget (participant + presenter views)
- Add QR code generation/display
- Real-time updates (polling or WebSocket if needed)
- Build presenter mode UI
- Build participant mode UI
- Implement step activation/deactivation
- Add navigation between steps
- Modern UI styling (TailwindCSS)
- Last Conference branding
- Error handling
- Loading states
- Mobile responsiveness
- Client-side: UUID stored in localStorage
- Server-side: Store session with presentation_id
- If session exists in localStorage, reuse it; otherwise create new
- Start with polling (simpler, works everywhere)
- Can upgrade to WebSocket later if needed
- Use a library like
qrcodevia esm.sh - QR code contains URL:
/join/:presentationId - Participant visits URL, gets session ID, redirected to active step
- Store as JSON in
widget_configcolumn - Each widget type has its own schema
- Validate on backend before saving
- Large QR code prominently displayed
- Current step widget/results
- Navigation to next/previous step
- Response count indicator
- Clean, minimal design
- Current step's widget
- Clear call-to-action
- Loading states
- Success feedback after submission
- Mobile-first design
- Modern, clean aesthetic
- Last Conference branding
- Accessible colour contrast
- Smooth animations/transitions
- WebSocket for real-time updates
- More widget types
- Export responses as CSV
- Presentation templates
- Analytics dashboard
- Multi-presentation management