timeback-client

What problem does it solve?

Browser applications need consistent, reliable activity telemetry for learning experiences but implementing heartbeat time tracking, visibility-aware pausing, exit delivery, and completion metrics across frameworks is error-prone and inconsistent. This Skill standardizes client-side instrumentation so teams can capture time spent, completion events, and XP in a predictable, framework-agnostic way.

Core Features & Use Cases

• Cross-framework TypeScript client: Adapters and patterns for React/Next.js, Vue/Nuxt, Svelte/SvelteKit, Solid/SolidStart, and a framework-agnostic createClient option.
• Full activity lifecycle: Start activities, automatic heartbeat time tracking, pause/resume on visibility changes, sendBeacon on exit, and end with completion metrics (xpEarned, questions, pctComplete).
• Production-ready guidance: Enforces one-activity-at-a-time, recommends onError handlers, and describes integration with the server adapter mounted at /api/timeback/*.
• Use case: Instrument quizzes, lessons, reading sessions, and dashboards to record time-on-task and award XP where scoring data exists.

Quick Start

Wrap your app with TimebackProvider or call initTimeback for Svelte, start approved activities with Activity.start including course metadata, and call Activity.end with xpEarned and available metrics when the user completes the activity.