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

fwfben

live-talk

Public
Like
live-talk
Home
Code
8
backend
3
frontend
4
shared
.vtignore
AGENTS.md
deno.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
11/19/2025
Viewing readonly version of main branch: v89
View latest version
plan.md

Live Talk - Interactive Presentation Tool Plan

Overview

A platform for interactive presentations allowing audiences to participate in real-time activities via their mobile devices. The system distinguishes between a Presenter Mode (Admin) and a Participant Mode.

Architecture

Tech Stack

  • Runtime: Val Town (Deno)
  • Backend: Hono (HTTP handling), Val Town SQLite (Persistence)
  • Frontend: React (SSR + Client Hydration), TailwindCSS (Styling)
  • Communication: Client-side polling or standard HTTP requests (keeping it simple initially)

Core Concepts

  1. Session Management:

    • Participants are assigned a unique sessionId stored in localStorage.
    • This ID identifies the user across different steps/widgets.
  2. Widget Framework:

    • Each step in a presentation is associated with a Widget.
    • Widgets have two views:
      • Admin/Presenter: Shows QR code, activity controls, and aggregated results.
      • Participant: Shows the input interface (e.g., poll options, text field).
    • Widgets handle their own logic for fetching and saving data.
  3. Routing Strategy:

    • /admin/p/:presentationId/s/:stepId: Presenter view for a specific step.
    • /p/:presentationId/s/:stepId: Participant view for a specific step (URL embedded in QR code).
    • (Optional Future): /live/:presentationId: Redirects to the currently active step set by the presenter.

Data Model (SQLite)

presentations

  • id (TEXT, PK): Unique slug/ID.
  • title (TEXT): Name of the talk.
  • deck_url (TEXT): Link to the main slide deck.
  • created_at (DATETIME)

steps

  • id (TEXT, PK): Unique ID.
  • presentation_id (TEXT, FK): Link to presentation.
  • widget_type (TEXT): Enum (e.g., 'poll', 'qna', 'word_cloud').
  • config (JSON): Widget-specific settings (e.g., poll question, options).
  • order_index (INTEGER): Sequence in the presentation.

responses

  • id (INTEGER, PK)
  • step_id (TEXT, FK)
  • session_id (TEXT): Anonymous participant ID.
  • data (JSON): The user's answer/input.
  • created_at (DATETIME)

UI/UX Design

  • Theme: Modern, clean, high-contrast for projector visibility. "Last Conference" vibe (professional, tech-focused).
  • Presenter View:
    • Dominant QR Code for easy scanning.
    • Real-time visualization of data (charts/lists).
    • Navigation controls (Next/Prev step).
  • Participant View:
    • Mobile-first design.
    • Large touch targets.
    • Instant feedback upon submission.

Implementation Todo List

Phase 1: Foundation & Setup

  • Project Scaffolding: Setup Hono backend with React SSR structure.
  • Database Schema: Create SQLite tables (presentations, steps, responses).
  • Seed Data: Create a mock presentation with a Poll step for testing.
  • Session Logic: Implement client-side hook to generate/retrieve sessionId.

Phase 2: Core Widget Engine

  • Widget Registry: Create a TypeScript interface/pattern for defining widgets.
  • Basic Routing: Implement routes for Admin and Participant views.
  • API Endpoints: generic /api/submit and /api/results endpoints.

Phase 3: First Widget (Poll)

  • Poll Participant UI: Form with radio buttons.
  • Poll Backend: Handle vote submission and aggregation.
  • Poll Admin UI: Display QR code and bar chart of results.

Phase 4: Polish & Presentation

  • Presentation Layout: "Shell" UI for the presenter (header, navigation).
  • Styling: Apply "Last Conference" aesthetic (Tailwind).
  • Testing: Verify mobile flow and persistence.

Phase 5 (Bonus/Future)

  • Q&A Widget: Allow upvoting questions.
  • Live Sync: Auto-update participant view when presenter changes slides.
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.