Overview

Case study for myTpen Board, a browser-based interactive whiteboard experience built on Next.js (App Router), React, TypeScript, and draw-tool. The work focused on tailoring the editor UX (menus and preferences), wiring a cohesive top navigation layer, and integrating authentication with the broader myTpen product surface.

What I shipped

Custom draw-tool UI composition: replaced default quick actions/actions menu, composed a custom main menu, and extended preferences with additional toggles and a dedicated color scheme control.

Editor-aware navbar controls: undo/redo/delete actions driven from the live Editor instance using draw-tool reactive selectors so controls stay accurate as selection/history changes.

Theme sync: synchronized draw-tool dark mode state to document/body classes for consistent styling outside the canvas.

Auth + account UX: session-aware user menu (avatar, account link, dashboard shortcut, sign out) using mytpen-auth, plus a Next.js auth route handler bridge.

Product integration touchpoints: subscription-gated “save” entry point messaging (UI wiring; persistence is not implemented as a backend save in this codebase).

Engineering notes

UI stack: Tailwind CSS v4 styling patterns, Radix primitives, and small reusable UI primitives for dialogs/menus/toasts.

Quality tooling: Biome scripts for lint/check and formatting; strict TypeScript configuration.

Links

Live: https://board.mytpen.app