🏛️ TownHall — Live Anonymous Q&A & Idea Voting for Communities

Date: 2026-07-11 Idea ID: 019 Category: community, events Difficulty: ⭐⭐ (Intermediate) Estimated Build Time: 2–3 days (solo developer) Tech Stack: Next.js 15 (App Router) · React 19 · TypeScript 5.5 · PostgreSQL 16 (Supabase) · Drizzle ORM 0.38 · Supabase Auth · Supabase Realtime · Tailwind CSS v4 · shadcn/ui · Framer Motion · Stripe · Resend · Sentry · PostHog · Vercel

🎯 Elevator Pitch

TownHall is the anonymous Q&A and idea-voting board your all-hands, meetup, or conference has been missing. Create a session, share a link, and watch questions roll in — ranked by upvotes, filtered by relevance, and answered in real-time. No sign-up required for participants. No more awkward silences or chat-scroll fatigue.

🔥 Problem

1. People don't ask questions in large meetings. Fear of judgment, "that's a dumb question," social hierarchy, and plain old stage fright silence the people who need answers most.
2. Chat is chaos. In virtual meetings, questions fly into a side chat that nobody reads. In-person, nobody writes them down at all. Good questions get buried, duplicates pile up, and the organizer has no pulse on what matters most.
3. The loudest voices win. In every all-hands, Q&A is dominated by the same 3 people. The quiet majority — new hires, juniors, remote workers — never get their questions heard.
4. No prioritization. Even when questions are collected, there's no democratic way to surface the most important ones. Organizers guess at what matters.
5. Enterprise tools are overkill and overpriced. Slido ($124+/mo), Mentimeter ($84+/mo), and Poll Everywhere are designed for enterprise conference organizers, not for a weekly team standup or a 50-person community call.

Current workflow for a community organizer:

1. "Any questions?" → silence → awkward pause → move on
2. Type questions into Google Docs / Notion during the call
3. Forget to follow up
4. Repeat next week

✅ Solution

TownHall is a dead-simple, beautiful, real-time anonymous Q&A board:

• Create a session — one click, zero configuration. You get a shareable link.
• Participants submit questions anonymously — no sign-up, no app install, just open the link and type.
• Live voting — upvote questions you want answered. Real-time ranking via WebSocket.
• Organizer dashboard — see all questions ranked by votes, mark as "answered," pin to top, or dismiss.
• Moderation controls — approve/reject questions before they go public. Block keywords. Mute participants.
• Export — CSV of all Q&As for meeting notes or retrospectives.
• Replay mode — after the session, anyone can view the full Q&A timeline with vote history.

Key differentiator: TownHall is participant-zero-friction — no account, no email, no CAPTCHA. Show up, type, vote. That's it. For organizers, it's one-click setup — no onboarding wizard, no template selection, no configuration. The product surfaces in under 10 seconds.

👥 Target User

🛠️ Full Tech Stack

Frontend (Main App)

Backend & API

Storage & CDN

Payments & Email

Monitoring & Analytics

Testing & CI/CD

🎨 UI Design Language

Foundation

Color System

Primary:    #7C3AED (Violet-600)   — buttons, active session badge, upvote icon
Secondary:  #8B5CF6 (Violet-500)   — hover states, secondary CTAs
Accent:     #06B6D4 (Cyan-500)     — "Live" indicator, answered badge, progress pulse
Background: #FAFAFA (Neutral-50)   — app background
Surface:    #FFFFFF                — cards, modals, question bubbles
Border:     #E5E7EB (Gray-200)     — dividers, card borders
Text:       #111827 (Gray-900)     — headings, question text
Text Body:  #374151 (Gray-700)     — body copy, descriptions
Muted:      #9CA3AF (Gray-400)     — timestamps, vote counts, labels
Success:    #10B981 (Emerald-500)  — "answered" badge, confirmed actions
Warning:    #F59E0B (Amber-500)    — pending moderation, session nearing end
Error:      #EF4444 (Red-500)      — rejected questions, blocking errors

Typography

Headings:  Plus Jakarta Sans (sans-serif) — weights 600, 700, 800
Body:      Inter (sans-serif) — weights 400, 500
Code:      JetBrains Mono — export snippets, embedded links
Scale:     12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 48 px
Line-height: 1.5 body / 1.2 headings
Letter-spacing: -0.02em for H1-H2

Spacing & Radius

• Border radius: rounded-xl (12px) for cards and question bubbles, rounded-lg (8px) for inputs, rounded-full for badges, avatars, and the upvote button
• Spacing: 4px grid basis — p-6 for cards, p-4 for question items, gap-4 for list spacing, gap-8 for section spacing
• Shadows: shadow-sm for card elevation, shadow-lg for modals, shadow-md for the floating "New Question" fab
• Max width: Session page capped at max-w-3xl for readability

Interaction Design

• Upvote button: Pill button with micro-bounce animation on click (Framer Motion scale: [1, 1.3, 1] within 200ms). Vote count animates (number rolls up) with color shift from muted → primary on active.
• Question cards: Slide in from bottom on new questions (Framer Motion AnimatePresence with initial={{ opacity: 0, y: 20 }}). Answered questions fade to 80% opacity with a green checkmark badge.
• Live indicator: Pulsing cyan dot in session header (CSS @keyframes pulse) — visible while session is active.
• Participant view: Full-screen minimal — just a question input at the top and a scrollable feed of questions below. No nav, no settings, no distractions.
• Organizer view: Toggle between "Live Feed" (ordered by votes, newest) and "Moderation Queue" (pending questions) via tabs. Floating action buttons to mark answered, pin, dismiss.
• Empty state: Illustrated town hall podium with microphone graphic (CSS/SVG illustration) — "No questions yet. Be the first to ask!"

Dark Mode

• Strategy: Class-based toggle (dark class on <html>). Organizer preference persisted in Supabase user metadata. Respects prefers-color-scheme on first visit.
• Dark palette: Background #0A0A0A, Surface #18181B (Zinc-900), Text #F5F5F5, Border #27272A (Zinc-800). Primary stays Violet but at 90% lightness (#A78BFA). Cards get a subtle border-white/[0.05] ring instead of shadow.

Responsive

• Participant page: Mobile-first — single column, full-width input, stacked question cards. On desktop, max-w-3xl centered layout.
• Organizer dashboard: Desktop-first sidebar layout on tablet+. On mobile, bottom-tab navigation (Live / Moderation / Settings).
• Question input: Sticky at top on mobile (scrolls with page), fixed position on desktop with sticky top-4.
• Embedded session: Responsive embed widget (for embedding a session on a conference page or Notion doc) — scales to container width, max 480px height.

Iconography

• Library: Lucide React v0.450+
• Style: Outlined, 1.5px stroke, 20x20 default on question cards, 24x24 on CTAs
• Key icons: MessageCircleQuestion (ask question), ThumbsUp / ArrowBigUp (upvote), CheckCheck (answered), Eye (viewed), Shield (moderation), Users (participants), Timer (session timer), Download (export), Link (share), Crown (organizer), SendHorizonal (submit)

🏗️ Full System Architecture

Repository Structure

townhall/
├── app/                          # Next.js 15 App Router
│   ├── (marketing)/              # Landing page, pricing, docs
│   │   ├── page.tsx              # Landing page
│   │   ├── pricing/              # Pricing page
│   │   └── docs/                 # How-to guides
│   ├── (dashboard)/              # Authenticated organizer routes
│   │   ├── layout.tsx            # Sidebar layout + Supabase listener
│   │   ├── page.tsx              # Dashboard home (active/recent sessions)
│   │   ├── sessions/             # Session CRUD
│   │   │   ├── new/              # New session form
│   │   │   └── [id]/             # Session organizer view
│   │   │       ├── page.tsx      # Live Q&A management board
│   │   │       ├── settings/     # Session settings
│   │   │       ├── analytics/    # Question stats, vote distribution
│   │   │       └── export/       # CSV export
│   │   ├── settings/             # Account, billing, preferences
│   │   └── sessions/             # Session list
│   ├── s/                        # Public session routes (participant view)
│   │   └── [slug]/               # Single session (no auth required)
│   │       ├── page.tsx          # Participant Q&A view
│   │       └── replay/           # Archived session replay
│   ├── api/                      # Route Handlers
│   │   ├── webhooks/             # Supabase Auth, Stripe, Inngest
│   │   ├── sessions/             # CRUD (organizer only)
│   │   ├── questions/            # CRUD + voting
│   │   ├── votes/                # Vote actions
│   │   └── export/               # CSV generation
│   ├── auth/                     # Supabase Auth pages (login, callback)
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Redirect to dashboard or landing
├── components/
│   ├── session/                  # Session-specific components
│   │   ├── QuestionCard.tsx      # Single question with vote button
│   │   ├── QuestionList.tsx      # Live-updating question feed
│   │   ├── QuestionInput.tsx     # Anonymous question form
│   │   ├── VoteButton.tsx        # Animated upvote button
│   │   ├── LiveIndicator.tsx     # Pulsing "Live" badge
│   │   ├── ModerationQueue.tsx   # Pending questions moderation
│   │   └── SessionHeader.tsx     # Session title, participant count, timer
│   ├── dashboard/                # Dashboard components
│   │   ├── SessionCard.tsx       # Session preview card
│   │   ├── StatsGrid.tsx         # Question count, vote count, answered %
│   │   ├── EmptyState.tsx        # First-session onboarding
│   │   └── RecentSessions.tsx    # Recently active sessions
│   └── ui/                       # shadcn/ui primitives
├── db/                           # Drizzle schema + migrations
│   ├── schema.ts                 # All table definitions
│   └── migrations/               # Generated SQL migrations
├── lib/
│   ├── db.ts                     # Drizzle client (Supabase)
│   ├── auth.ts                   # Supabase server-side helpers
│   ├── realtime.ts               # Supabase Realtime channel setup
│   ├── rate-limit.ts             # Upstash rate limiter helper
│   └── stripe.ts                 # Stripe client helpers
├── inngest/                      # Background job functions
│   ├── session-ended.ts          # Email recap to organizer
│   ├── weekly-digest.ts          # Weekly activity summary
│   └── cleanup-sessions.ts       # Archive stale sessions
└── public/                       # Static assets (favicon, OG images)

Architecture Pattern

• Pattern: Single Next.js 15 repo (no turborepo — overkill for this scope)
• Route groups: (marketing) for public pages, (dashboard) for authenticated routes
• Public session routes: /s/[slug] — no auth, renders with React Server Components, real-time via Supabase Realtime client-side subscription
• Bundle splitting: App Router auto-splits. Public session page loads minimal JS (~40KB gzipped) — no dashboard code on participant pages.

API Design

• Style: RESTful JSON via Next.js Route Handlers + React Server Actions for form submissions (question creation, voting)
• Endpoints:

Server Actions (React 19)

Using Server Actions for participant-facing operations (question submit, vote) minimizes client JS and enables progressive enhancement. API routes handle organizer CRUD operations and webhooks.

Database Schema

-- Core tables

sessions
  id: uuid PK (default gen_random_uuid())
  organizer_id: uuid FK -> auth.users (Supabase Auth)
  title: text (required, max 200 chars)
  slug: text (unique, URL-safe, auto-generated from title)
  description: text (optional, max 500 chars)
  status: enum: active, paused, ended (default: active)
  moderation_enabled: boolean (default: false)
  anonymous_allowed: boolean (default: true)
  max_questions_per_participant: int (default: 10, 0 = unlimited)
  participant_count: int (approx counter, real-time)
  question_count: int (denormalized counter)
  is_public: boolean (default: true)
  cover_emoji: text (optional, e.g., "🏛️")
  scheduled_start: timestamptz (nullable)
  ended_at: timestamptz (nullable)
  created_at: timestamptz (default now())
  updated_at: timestamptz (default now())

questions
  id: uuid PK (default gen_random_uuid())
  session_id: uuid FK -> sessions (cascade delete)
  participant_id: text (anonymous UUID stored in localStorage, nullable)
  text: text (required, max 500 chars)
  votes_count: int (default 0, denormalized counter)
  status: enum: pending, approved, answered, dismissed (default: approved)
  is_pinned: boolean (default: false)
  is_anonymous: boolean (default: true)
  answered_at: timestamptz (nullable)
  created_at: timestamptz (default now())

votes
  id: uuid PK (default gen_random_uuid())
  question_id: uuid FK -> questions (cascade delete)
  participant_id: text (anonymous UUID from localStorage)
  created_at: timestamptz (default now())
  UNIQUE(question_id, participant_id) -- one vote per person per question

organizer_profiles
  id: uuid PK (FK -> auth.users)
  display_name: text
  plan: enum: free, pro, business (default: free)
  stripe_customer_id: text (nullable)
  stripe_subscription_id: text (nullable)
  created_at: timestamptz (default now())

-- Indexes
CREATE INDEX idx_questions_session_status ON questions(session_id, status, votes_count DESC);
CREATE INDEX idx_questions_created ON questions(session_id, created_at DESC);
CREATE INDEX idx_votes_question ON votes(question_id);
CREATE INDEX idx_sessions_organizer ON sessions(organizer_id, created_at DESC);
CREATE INDEX idx_sessions_slug ON sessions(slug);

Auth Flow

• Organizer auth: Supabase Auth (email magic link + Google OAuth + GitHub OAuth)
• Session type: JWT (Supabase auto-managed, short-lived with refresh)
• Middleware: Next.js middleware checks Supabase session — redirects unauthenticated users to /auth/login for dashboard routes
• Participant auth: None. Anonymous participants get a UUID stored in localStorage (persists across browser sessions). This UUID is used as participant_id in votes and questions — no account, no email, no friction.
• Rate limiting: Upstash Redis — 5 questions/minute per participant (by IP), 1 vote per 2 seconds per participant (by IP + participant_id). Prevents spam without requiring auth.

File Storage Strategy

• Provider: Supabase Storage (S3-compatible, managed bucket)
• Usage: Optional session cover images / event branding for Pro tier
• Bucket structure: townhall/sessions/{session_id}/cover.{ext}
• Constraints: Max 2MB, JPEG/PNG/WebP only, auto-resize via Supabase Image Transformations

Real-time Architecture

TownHall's real-time is its killer feature. Here's how it works:

1. Participant opens /s/[slug] → page loads as React Server Component (initial SSR)
2. Client hydrates → creates Supabase Realtime channel:
   channel = supabase.channel(`session:${slug}`)
   channel.on('postgres_changes',
     { event: '*', schema: 'public', table: 'questions',
       filter: `session_id=eq.${sessionId}` },
     (payload) => { /* update question list */ }
   )
3. Vote mutations use Server Actions:
   - Client calls toggleVote(questionId) → Server Action
   - Server Action validates (rate limit, session active, question exists)
   - Inserts/deletes vote row, updates denormalized votes_count
   - Supabase Realtime broadcasts change → all connected clients update
4. Organizer sees questions appearing in real-time via same channel
5. When organizer marks "answered" or "dismissed" → Realtime broadcast updates all participants

This means:

• No polling. No manual refresh. Questions and votes update in < 200ms across all clients.
• Supabase Realtime handles WebSocket management (connection pooling, reconnection, presence).
• Zero additional infrastructure for real-time.

Background Jobs (Inngest)

1. session-ended — When organizer ends a session, sends a recap email via Resend with: total questions, top-voted question, answer rate, participant count, CSV download link.
2. weekly-digest — Every Monday 9:00 UTC, sends organizers a summary of their week: sessions created, questions received, votes cast, top unanswered questions.
3. cleanup-stale-sessions — Daily, auto-archives sessions that have been ended for 30+ days (moves to read-only replay mode, removes from active dashboard).
4. auto-end-session — If a scheduled session's scheduled_end time passes, auto-ends the session and triggers session-ended.

Caching Strategy

Environment Structure

# .env.local (development) / .env.production (Vercel)
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
DATABASE_URL=                    # Supabase connection string (pooled)
DIRECT_URL=                      # Supabase direct connection (migrations)

SUPABASE_AUTH_WEBHOOK_SECRET=

UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
NEXT_PUBLIC_STRIPE_PRICE_IDS=   # JSON: {pro: "price_xxx", business: "price_yyy"}

RESEND_API_KEY=
RESEND_AUDIENCE_ID=              # For newsletter/onboarding

INNGEST_EVENT_KEY=
INNGEST_SIGNING_KEY=

NEXT_PUBLIC_APP_URL=            # https://townhall.app

SENTRY_DSN=
NEXT_PUBLIC_POSTHOG_KEY=
NEXT_PUBLIC_POSTHOG_HOST=

Deployment Topology

[Participant Browser]
     │
     ├── https://townhall.app ──────────── Vercel Edge Network
     │    ├── / (Landing page)           ── SSG, revalidate 300s
     │    ├── /s/[slug] (Session)        ── SSR + client Realtime subscription
     │    ├── /dashboard/*               ── SSR + Server Actions
     │    └── /pricing                   ── SSG, revalidate 3600s
     │
     ├── Supabase Realtime ────────────── WebSocket (long-lived persistent connection)
     │
     └── Supabase Auth ────────────────── OAuth / Magic link flows
                    │
[Vercel Serverless Functions]
     │
     ├── Route Handlers ───────────────── Supabase PostgreSQL (via Drizzle)
     ├── Server Actions ───────────────── Supabase PostgreSQL (via Drizzle)
     ├── Inngest Functions ────────────── Supabase PostgreSQL (via Drizzle)
     ├── Webhooks (Stripe, Supabase) ──── Resend (email), Sentry (errors)
     │
     └── Upstash Redis ───────────────── Rate limiting (ephemeral)

[Supabase]
     ├── PostgreSQL 16 ───────────────── Main data (sessions, questions, votes)
     ├── Auth ────────────────────────── User management, JWT sessions
     ├── Realtime ────────────────────── WebSocket broadcast on table changes
     └── Storage ─────────────────────── Session cover images (Pro tier)

Monitoring

Data Flow Diagram (Description)

Submitting a question (anonymous participant):

1. Visitor opens /s/my-allhands → React Server Component renders initial SSR with existing questions (sorted by votes).
2. Client hydrates → Supabase Realtime channel subscribes to questions for this session.
3. Visitor types question → clicks "Submit" → React 19 Server Action fires.
4. Server Action: validates question length (max 500 chars), checks rate limit via Upstash Redis (5/min per IP), checks session is active, inserts question row into Postgres via Drizzle.
5. Supabase Realtime detects the INSERT on questions table → broadcasts to all subscribed clients (including the submitter and all other participants).
6. All connected clients update their question list in real-time — new question card slides in at the bottom (if no votes) or ranks by votes immediately.
7. Organizer's dashboard updates simultaneously — question appears in their moderation queue (if moderation enabled) or directly in the live feed.

Voting on a question:

1. Visitor clicks upvote button → Server Action fires with questionId and participantId.
2. Server Action: checks rate limit (1 vote/2s per IP + participant), checks question exists in active session, upserts row in votes table, atomically increments questions.votes_count.
3. Supabase Realtime broadcasts the update → all clients update the vote count with micro-animation (number rolls up).
4. If the vote pushes this question to #1, it animates to the top of the list (Framer Motion layout animation layoutId).

Organizer answering a question:

1. Organizer sees question in dashboard → clicks "Mark Answered" → PATCH to /api/questions/[id] with status: answered.
2. Server validates ownership (question belongs to organizer's session) → updates row.
3. Realtime broadcast → participant client shows green checkmark + "Answered by organizer" badge on that question card.
4. Question drops to 80% opacity, sorted below unanswered questions (answered questions move down in priority).

📋 PRD — Functional Requirements

FR-01: Session Creation & Management

FR-02: Anonymous Q&A (Participant View)

FR-03: Organizer Dashboard (Live Moderation)

FR-04: Session Analytics & Export

FR-05: Account & Billing

FR-06: Moderation & Safety

Non-Functional Requirements

📂 Epics & User Stories

Epic 1: Session Foundation & Auth (Scaffolding)

Estimated: Day 1 morning

Epic 2: Anonymous Q&A & Real-time Voting (Core Experience)

Estimated: Day 1 afternoon – Day 2 morning

Epic 3: Organizer Live Moderation Board (Power User)

Estimated: Day 2

Epic 4: Analytics, Export & Replay (Insights)

Estimated: Day 2 afternoon – Day 3 morning

Epic 5: Payments & Plans (Monetization)

Estimated: Day 3 morning

Epic 6: Polish, Safety & Edge Cases (Launch Ready)

Estimated: Day 3 afternoon

💰 Pricing Model

Annual pricing: Pro $190/yr (save $38), Business $390/yr (save $78) Free trial: 14 days full-featured Pro (no credit card required)

📢 Go-to-Market Strategy

Pre-Launch (Days 1–7)

1. Build in public — Tweet thread on X (@TownHallHQ) showing the session creation flow, anonymous Q&A, and real-time voting. Share a screen recording of the organizer marking questions answered live.
2. Product Hunt Teaser — Create pre-launch page with a GIF of the real-time voting flow. Share on Indie Hackers.
3. Personal outreach — DM 20 engineering managers and meetup organizers offering free lifetime Pro in exchange for running their next all-hands with TownHall and providing feedback.

Launch (Day 7–14)

1. Product Hunt launch — Post with the hook: "Anonymous Q&A for your meetings. No sign-up. No app install. One link." Offer 30% off first 3 months for launch week.
2. Indie Hackers post — "I built a real-time anonymous Q&A tool in 3 days — here's how it works with Supabase Realtime." Technical deep-dive that appeals to the IH audience.
3. Community launches — Post in r/SaaS, r/startups, r/programming. Target: "Ever hosted a Q&A where nobody asked anything? Here's the fix."

Post-Launch (Weeks 2–4)

1. Content marketing — Blog posts: "How to Run a Better All-Hands Meeting", "The Case for Anonymous Q&A in Remote Teams", "5 Ways to Get Your Team Asking Questions."
2. Meetup sponsorship — Offer free Business tier to 10 popular meetup groups (React Brussels, Python London, etc.) in exchange for using TownHall and providing a testimonial.
3. Conference outreach — Discounted event plans for conference organizers. Pay-per-event: $5/session for up to 500 participants.
4. Open source communities — Free unlimited sessions for open-source projects and their community calls.

Growth Channels

📊 Success Metrics

⚠️ Risks & Mitigations

🏁 Competitors

TownHall's Moat

1. Zero friction for participants — No app install, no sign-up, no email. Open link → ask question. This is the single biggest barrier competitors don't solve.
2. Real-time voting via WebSocket — Supabase Realtime makes vote propagation feel instant. No polling, no refresh. Competitors require page reloads or have noticeable lag.
3. Price-to-value ratio — $19/mo for a tool that replaces $84-$124/mo competitors, purpose-built for the indie/community market.
4. Designed for recurring use — Weekly standups, monthly all-hands, recurring meetups. Not just one-off conferences. The dashboard shows session history, analytics across sessions, and weekly digests build the habit.
5. Moderation-first — Enterprise tools hide moderation behind admin panels. TownHall puts it front and center: approve, reject, pin, block keywords — all from the live board.

📊 Brainstorm Review Score

Review Date: 2026-07-16

Total Score: 7/15

Status: ⏸️ Deferred - Total < 12

Rationale: Strong market fit (5/5) but needs ~80% scope reduction. Rescope path: (A) client-side only (no DB, no auth, no backend) — localStorage + export to self-contained HTML file for session history, (B) single-user minimal server (no billing, no background jobs, no email, simplified analytics - just vote counts and question stats in PostgreSQL), or (C) "TownHall Lite" — anonymous Q&A board with real-time voting via Supabase Realtime, but no moderation, no analytics, no export, no replay, no billing. The core value prop (anonymous + real-time voting) can be preserved with a radically simplified MVP.