Audience Engagement Toolkit

SpinWheelGo

A free toolkit to engage your audience — random spin wheel, live trivia quiz, and audience surveys, all in one browser tab.

🎡 What is SpinWheelGo?

SpinWheelGo is a web app for engaging an audience. Unlike single-device spinners, SpinWheelGo synchronizes the host's screen with every audience device in real time, so everyone sees the same spin, the same quiz question, or the same survey poll at the same moment.

Host Dashboard

The host configures wheels, quiz questions, or survey questions; triggers spins and reveals; tracks scores; and exports results when done.

Audience Devices

Participants join by QR code or link — no app install. Their device renders the wheel locally and stays in sync with the host with minimal latency.

⚠️ Challenges & Why We Built It

Traditional online wheel spinners fail in professional and interactive environments. They serve purely as simple offline selectors. We built SpinWheelGo to directly solve these operational gaps:

Feature Category Traditional Wheels (Names/Raffles) SpinWheelGo Advantage
Audience Sync ❌ Screen-share over laggy video feeds (Zoom/Meet/Teams). 📡 Native real-time telemetry rendering on every user device.
Wheel Creation ❌ Repetitive, manual text input segment-by-segment. 🤖 Dual-Bridge AI engine converts prompts to wheels instantly.
Interactive Play ❌ Basic random segment landing only. 🎮 Squad-based quizzes, scoreboards, and lock-in options.
Winner Verification ❌ Easily manipulated, lack of historical logging. 📋 Immutable Forensic Ledger tracks timestamps and wins.
Visual Vibe ❌ Heavily ad-cluttered and generic, out-of-date assets. ✨ Ad-free, premium dark-mode, glassmorphic layout.

👥 Who Are the Users?

🎓

Educators & Classrooms

Ensures fair, randomized classroom participation, gamifies test reviews, and boosts student motivation through scoring.

🎙️

Broadcasters & Streamers

Engages Twitch and YouTube audiences with live, zero-latency raffles, name picker giveaways, and interactive trivia games.

💼

Teams & Scrum Masters

Randomizes standup speaking orders, runs retrospectives, chooses brain-storming directions, and breaks the ice in style.

🏠

Friends & Social Parties

Decides dinner cuisines, selects movie-night genres, organizes home chore distributions, and runs social game nights.

🚀 How It Makes Things Easier

01

Scan & Go Onboarding

No accounts, app downloads, or complex login credentials required. Audience members scan the host QR code and are synced immediately.

02

Automated AI Assembly

Describe the concept in plain English. The Vertex AI prompt processor creates complete, visually-curated segment stages instantly.

03

Synced Client Render

Connected client viewports render vector graphics and calculations locally rather than streaming video. Save bandwidth and remove delay.

Core Features & Product Benefits

🎡

Split-Screen Multi-Stage

Presenters can launch multiple wheels on the stage at once. Delete or add canvases dynamically; remaining wheels automatically expand to fill available grid space.

🎮

Team Trivia Mode

Live scoreboards, team captains, answering consensus rules, and score adjustments (+10 / -10) that sync across every participant's device.

🤖

AI Builder

Uses Vertex AI (primary) and the Gemini API as a fallback. Turns a one-line topic prompt into ready-to-spin wheel segments or full quiz questions with correct-answer markers.

📋

Spin History

Every spin is logged with a timestamp and segment list in a slide-out panel — so giveaway winners and raffle picks can be reviewed and verified later.

🔊

Realistic Tick Sounds

A pooled audio engine recycles sound buffers based on the wheel's angular velocity. Pitch and volume track the physical slowdown so spins feel real.

🔒

Mid-Spin Safety Lock

While the wheel is spinning, the settings, mode pickers, and end-session controls are locked — preventing accidental state changes mid-spin.

🛠️ System Architecture

The platform is constructed with a decoupled, high-performance tech stack. Client rendering calculations are fully decentralized, while Spring Boot and Firestore manage backend telemetry states.

graph TD User["Audience (Mobile Devs)"] Host["Host (Presenter Board)"] subgraph Frontend ["Frontend (Vite, React, TypeScript, Tailwind)"] Canvas["WheelCanvas (HTML5 2D Canvas + Modulo Audio Pool)"] App["App.tsx State Manager"] Framer["Framer Motion (Transitions & Suspense Reveal)"] BC["Neural Broadcast Channel (Local Cross-Tab Sync)"] end subgraph Routing ["Routing & Proxies"] ViteProxy["Vite Proxy (Local Dev on port 8080)"] FBHosting["Firebase Hosting CDN (Prod API redirects)"] end subgraph Backend ["Backend Service (Spring Boot on Cloud Run)"] LiveController["TwspLiveController (Session Sync & Heartbeats)"] ConfigController["TwspConfigController (Template & Prompt Registry)"] GeminiService["TwspGeminiService (Dual-Bridge Prompt Processing)"] FirestoreService["TwspFirestoreService (Data Operations)"] end subgraph Cloud ["Database & AI Services"] Firestore[("Google Cloud Firestore")] VertexAI["Vertex AI (gemini-1.5-pro-002)"] GeminiAPI["Gemini API Key Fallback"] end Host --> App App --> Canvas App --> Framer App --> BC User -->|QR Scan / Join Link| App App -->|Local Dev /api/| ViteProxy App -->|Production /api/| FBHosting ViteProxy --> LiveController FBHosting --> LiveController LiveController --> FirestoreService ConfigController --> FirestoreService GeminiService --> VertexAI GeminiService --> GeminiAPI FirestoreService --> Firestore

Frontend Stack Specs

  • Vite & React (TypeScript): Main interface client, optimizing runtime performance.
  • HTML5 2D Canvas: High-performance vector rendering engine with adaptive typography binary search.
  • Framer Motion: Drives the cinematic suspense overlay reveals and panel animations.
  • HTML5 BroadcastChannel: Cross-tab event bus to replicate state across multi-screen setups.

Backend & Database Specs

  • Spring Boot (Java 17): Serves as the main REST controller endpoint logic behind API calls.
  • Google Cloud Run: Hosts the serverless backend, automatically scaling from zero based on request demand.
  • Firebase Firestore: Document store driving live synchronizations and telemetry state snapshots.
  • Vertex AI (Gemini 1.5 Pro): Core intelligence processor generating customized, color-coded spinner segments.