Product Requirements

Purpose

ub3r is a tutorial-series platform for engineers who build communications systems. It teaches through long-form, ordered chapters with runnable code, aiming for the depth of a good engineering book and the interactivity of a sandbox. Success means a reader can finish a series and implement the pattern in production.

Audience

Backend and platform engineers integrating messaging providers, building webhook infrastructure, designing bots, or operating a communications platform. Comfortable with JavaScript and HTTP; not necessarily telecom specialists.

Home

• Hero with tagline, primary call to action (start or continue), and a featured series card listing its chapters.
• "New chapters this week" rail: horizontally scrollable, newest first, NEW badge on chapters published within seven days of the latest release, with publication date.
• "Continue learning" strip: appears only when at least one series is partially complete; links to the next unread chapter.
• Three value propositions: Deep series, Runnable code, Real architecture.

Library

• Grid of all series with level chip, chapter count, topic tags and a progress ring.
• Topic filters (APIs, Webhooks, Bots, Protocols, SDKs, CPaaS), multi-select, OR semantics.
• Live search across series titles, blurbs, chapter titles and summaries; result count announced politely to screen readers.

Series page

• Ordered chapter list with status (done/not started), reading time and summary.
• Prerequisite map: SVG graph of all series; hover or focus traces the ancestor chain; click or Enter navigates; each node shows completion.

Chapter page

• Left sticky checklist of the series' chapters with completion marks.
• Centre prose at roughly 68 characters per line; callouts (note, tip, warning); code blocks; embedded playgrounds and diff widgets.
• Right sticky table of contents with scroll-spy.
• Previous/next navigation and a discussion thread.

Playground

• Editable JavaScript with syntax highlighting; runs automatically 450ms after typing stops; Run and Reset controls.
• Executes in a sandboxed Web Worker with no DOM or network access; a simulated SDK mx exposes SMS, chat, bot, webhook signing and queue primitives.
• A 6-second watchdog terminates runaway code and shows an inline error.

Progress

• Scrolling past 80% of a chapter marks it complete exactly once, triggers a celebration (gold check, particles), a soft two-note chime when the user has interacted with the page, and a toast.
• Completion updates every ring, checklist and graph node immediately. Readers can mark a chapter unread.

Diff widget

• Shows a before state; toggling animates removed lines collapsing and added lines expanding with highlight.

Comments

• Name plus text, one level of replies, likes toggle, persisted locally; each chapter ships two or three seeded editorial comments.

Docs

• Six project documents on their own routes: this PRD, TRD, App Flow, Design Brief, Background Schema and Implementation Plan.

Dim mode

• Header toggle switches between light and dim themes; the choice persists and is applied before first paint to avoid a flash.

Non-goals

Accounts, server-side progress sync, analytics, payments and real network calls from playgrounds.