Case study

Annotool

Annotool is an internal web app where an authorized employee draws red-rectangle annotations on side-by-side comparison images pushed in from the LeBlanc design loop. It tracks active working time with idle-gap exclusion and produces weekly invoice PDFs at the user's hourly rate.

RoleFull-stack engineering and operations tooling

TimelineOngoing

FocusInternal Web App + Time Tracking

Annotation UIActive time trackingWeekly invoice generationGoogle OAuth + allowlist

FastAPI + PostgresBackend

Vite + React + TSFrontend

github.com/MaxwellM34/annotoolRepository

The brief

Challenge

Track an employee's real working time across an open-ended design review loop and bill it accurately without manual timesheets.

Approach

What we made

Built a tight annotation UI tied to a server-side activity timer that pauses on idle gaps, then layered weekly invoice generation on top of the tracked totals.

SVG overlay annotation UI with multi-round notes per image.
Active-time tracker excludes idle gaps over 30 seconds for honest billable hours.
Automated weekly invoice PDF generation with ReportLab.

Outcome

Results

A live internal tool that captures annotations, tracks honest billable hours, and ships weekly invoice PDFs without manual reconciliation.

FastAPISQLAlchemyPostgreSQLViteReactTypeScriptTailwindReportLab

Gallery

Visual snapshots

Click any image to expand.

Next project

LeBlanc Figma-to-Elementor Loop

Automation system that converts Figma section designs into Elementor-ready WordPress sections through a repeatable design loop with screenshot diffing.

View next project