• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
fwfben

fwfben

live-talk

Public
Like
live-talk
Home
Code
17
backend
5
frontend
4
scripts
2
shared
1
.dev-server.log
.dev-server.pid
.gitignore
.vtignore
AGENTS.md
Makefile
README.md
H
app.http.ts
deno.json
H
hello.http.ts
package.json
plan.md
server.ts
Branches
1
Pull requests
Remixes
History
Environment variables
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.
Sign up now
Code
/
plan.md
Code
/
plan.md
Search
…
plan.md

Live Talk - Interactive Presentation Tool

Overview

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.

Core Features

For Presenters

  • 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

For 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

Data Model

Presentations

  • id (INTEGER PRIMARY KEY)
  • name (TEXT) - Name of the talk
  • presenter (TEXT) - Presenter name
  • talk_deck_link (TEXT) - Link to presentation slides
  • created_at (TEXT) - Timestamp

Steps

  • id (INTEGER PRIMARY KEY)
  • presentation_id (INTEGER) - Foreign key to presentations
  • step_number (INTEGER) - Order within presentation
  • widget_type (TEXT) - Type of widget (poll, question, etc.)
  • widget_config (TEXT) - JSON configuration for the widget
  • is_active (INTEGER) - Whether this step is currently active (0 or 1)

Sessions (Participants)

  • id (TEXT PRIMARY KEY) - Session ID (UUID)
  • presentation_id (INTEGER) - Which presentation they're in
  • created_at (TEXT) - Timestamp

Responses

  • id (INTEGER PRIMARY KEY)
  • session_id (TEXT) - Foreign key to sessions
  • step_id (INTEGER) - Foreign key to steps
  • response_data (TEXT) - JSON data of the response
  • created_at (TEXT) - Timestamp

Architecture

Backend Structure

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 Structure

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

shared/
└── types.ts              # TypeScript types/interfaces

Widget System

Widget Types

  1. Poll - Multiple choice question with real-time results
  2. Open Question - Text input with responses displayed
  3. Word Cloud - Collect words/phrases
  4. Rating - Star or scale rating

Widget Interface

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

API Endpoints

Presentations

  • GET /api/presentations - List all presentations
  • POST /api/presentations - Create new presentation
  • GET /api/presentations/:id - Get presentation details
  • PUT /api/presentations/:id - Update presentation

Steps

  • GET /api/presentations/:id/steps - Get all steps for a presentation
  • POST /api/presentations/:id/steps - Create new step
  • PUT /api/steps/:id - Update step
  • PUT /api/steps/:id/activate - Activate a step (deactivates others)
  • GET /api/steps/active - Get currently active step

Sessions

  • POST /api/sessions - Create or get existing session
  • GET /api/sessions/:id - Get session details

Responses

  • POST /api/responses - Submit a response
  • GET /api/steps/:id/responses - Get all responses for a step

Admin/Presenter

  • GET /present/:presentationId/step/:stepNumber - Presenter view for a step
  • GET /join/:presentationId - Participant view (redirects to active step)

Implementation Plan

Phase 1: Foundation βœ…

  • Basic HTTP route setup
  • Local development server with watch mode

Phase 2: Database & Backend Core βœ…

  • Set up SQLite database schema
  • Create database migration functions
  • Implement presentation CRUD endpoints
  • Implement step management endpoints
  • Implement session management
  • Implement response handling

Phase 3: Frontend Core βœ…

  • Set up React frontend structure
  • Create session management (localStorage)
  • Build API client utilities
  • Create routing system
  • Build basic UI layout

Phase 4: Widget System βœ…

  • Create widget framework/interface
  • Implement Poll widget (participant + presenter views)
  • Add QR code generation/display
  • Real-time updates (polling or WebSocket if needed)

Phase 5: Presentation Flow βœ…

  • Build presenter mode UI
  • Build participant mode UI
  • Implement step activation/deactivation
  • Add navigation between steps

Phase 6: Polish βœ…

  • Modern UI styling (TailwindCSS)
  • Last Conference branding
  • Error handling
  • Loading states
  • Mobile responsiveness

Technical Decisions

Session Management

  • Client-side: UUID stored in localStorage
  • Server-side: Store session with presentation_id
  • If session exists in localStorage, reuse it; otherwise create new

Real-time Updates

  • Start with polling (simpler, works everywhere)
  • Can upgrade to WebSocket later if needed

QR Code Generation

  • Use a library like qrcode via esm.sh
  • QR code contains URL: /join/:presentationId
  • Participant visits URL, gets session ID, redirected to active step

Widget Configuration

  • Store as JSON in widget_config column
  • Each widget type has its own schema
  • Validate on backend before saving

UI/UX Considerations

Presenter View

  • Large QR code prominently displayed
  • Current step widget/results
  • Navigation to next/previous step
  • Response count indicator
  • Clean, minimal design

Participant View

  • Current step's widget
  • Clear call-to-action
  • Loading states
  • Success feedback after submission
  • Mobile-first design

Design Theme

  • Modern, clean aesthetic
  • Last Conference branding
  • Accessible colour contrast
  • Smooth animations/transitions

Future Enhancements

  • WebSocket for real-time updates
  • More widget types
  • Export responses as CSV
  • Presentation templates
  • Analytics dashboard
  • Multi-presentation management
FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
Β© 2025 Val Town, Inc.