← Back to selected work
Case study / 01 · Education

BJOT Board Production System

A repeatable workflow that captures structured UTME lesson content, confirms it, and turns it into consistent BJOT-branded educational cards.

React 19TypeScriptTelegramhtml-to-image
At a glance / input to output
01 / InputStructured lesson content
02 / SystemConfirm, select template, render
03 / OutputBranded Chemistry card
920 × 1080fixed live poster preview
2×density PNG export
2 surfacesbrowser editor + Telegram flow
Evidence

Input → confirmation → output

Real frames from the working Telegram walkthrough, alongside the validated renderer output.

The fixed canvas still needs a visual check when lesson text is unusually long.

The problem

Manual design made every lesson a rebuild.

Each educational card required the same layout, typography, answer treatment, tips, and branding to be recreated. The result was repetitive work and inconsistent output.

The system

Content changes. The production logic stays fixed.

The editor captures the lesson as structured fields, selects the appropriate visual template, normalizes common notation, previews the fixed canvas, and exports the final card. The Telegram path adds a low-friction capture and confirmation step.

Result

Repeatable production without rebuilding the brand each time.

The production build passed, the renderer exported a complete Chemistry card, and the walkthrough demonstrates content intake, review, confirmation, and final delivery.

WhatsApp ↗