LessonArcade

Inspiration

Most teams can produce training content, but it is hard to turn it into practice that feels engaging - and even harder to measure whether learning actually happened. I wanted to build something that makes learning feel like a short game session (not a lecture), while still giving teams clear, exportable evidence of effectiveness.

LessonArcade was inspired by a simple idea: pair a voice-first coach with interactive lessons, then close the loop with analytics. Learners get immediate, friendly guidance. Teams get a Studio that shows what is working, what is not, and where to improve next.

What it does

LessonArcade is a voice-first interactive learning platform for teams and brands.

• Interactive lesson player (demo lessons) with completion scoring and modes (focus / arcade)
• Automatic run analytics (lesson runs are recorded after completion)
• Studio dashboard with workspace-level overview
• Workspace Insights: learning effectiveness metrics, top struggling lessons, top engaged lessons, and recent activity
• Lesson Drilldown Insights: per-lesson metrics including mode breakdown and daily buckets
• Exportable CSV reports (workspace and lesson insights)
• Collaboration comments with roles (Owner / Admin / Editor / Viewer) to support lesson review workflows
• Webhook integration PoC: trigger a workspace webhook when a lesson comment is created (best-effort delivery)

How we built it

• Built a Next.js 16 app with a clean service-layer design:
  • Domain/services compute metrics and produce DTOs
  • Server routes provide authenticated, workspace-scoped APIs
  • UI is server-first for consistency, with small client components for interactivity
• Implemented deterministic demo seeding and CI parity guardrails:
  • Non-interactive dev DB sync scripts
  • Stable Playwright global setup seeding for E2E tests
  • CI checks mirrored locally via a single command
• Designed the analytics pipeline for practicality:
  • Time-windowed aggregation (7/30 days)
  • Robust handling of empty windows and partial data
  • Safe CSV generation with filename sanitization
• Integrated Google Gemini (LLM) and ElevenLabs (voice) for a voice-coach experience.

Challenges

• Keeping CI stable with a shared SQLite database required deterministic seeding and avoiding parallel test races.
• Ensuring multi-tenant safety: every Studio API and query is scoped to the active workspace session to prevent cross-workspace data leakage.
• Making analytics resilient: score data may be missing or partial, so the system must compute meaningful metrics without breaking.
• Balancing speed and correctness: the project prioritizes best-effort integrations (like webhooks) without blocking the learning flow.

What we learned

• A small set of well-chosen metrics (runs, average score, unique sessions, comments, and “top lessons”) is enough to drive real iteration.
• Export and drilldown matter: teams trust insights more when they can download CSV and inspect lesson-level details.
• Deterministic dev + CI workflows are as important as features when shipping a demo under time pressure.

What's next

• Stronger integrations: webhook signing, retries, delivery logs, and pre-built connectors (Slack / LMS).
• Deeper analytics: cohorts, learner-level drilldown, custom date ranges, and trend charts.
• Production auth and billing: replace demo auth with a robust auth system and connect plan limits to real usage metering.

Built With

• elevenlabs-api
• google-gemini-api
• next.js
• node.js
• playwright
• playwright-(e2e)
• prisma
• shadcn/ui
• sqlite-(dev/ci)
• tailwind-css
• typescript)
• vitest
• zod