clemvault internals active-build Week · #

TutorHub

A web app for running an independent tutoring practice: scheduling, Google Calendar sync, a smart task list, and Venmo payment requests.

ViteReact 19TypeScriptTailwind CSS v4SupabaseHonoCloudflare Pages FunctionsVitest

A web app for running an independent tutoring practice: students, sessions, topics, Google Calendar sync, and Venmo payment requests, all in one place. Built for a single tutor, not a multi-tutor org, that constraint is intentional and keeps the data model simple.

What It Is

TutorHub replaces the paper calendar and text-thread version of running a tutoring business. A tutor signs in, connects their Google Calendar, and gets a smart calendar view that overlays real events with tutoring sessions, color-coded by status. A dashboard tracks earnings and hours with month-over-month trend indicators. A task list generates itself from the data: students without an upcoming session, sessions starting soon that need a reminder, completed sessions still unpaid after 48 hours. Tasks resolve themselves when the underlying condition clears.

Built in Phases

Auth (Google OAuth and email/password), the Google Calendar integration, the dashboard, and the smart task list were built first and live-verified against a real Supabase project and Google Cloud OAuth client, not just tested locally with mocks. Booking links, Venmo payment requests, and spreadsheet export are scoped but not built yet.

The Design System Pass

Once the core phases worked, the visual layer got a dedicated overhaul: a warm, personal design direction instead of generic SaaS, run through a full brainstorm-to-spec-to-plan-to-execution pipeline with a final whole-branch review before merging. New primitives (status badges, empty states, loading skeletons) replaced the placeholder emoji-based badges from the early build. Four more rounds followed: a day-detail view for the calendar, task urgency indicators, a password visibility toggle, and settings polish, each shipped as a small, independently tested change directly to the main branch.

Honest Constraints

Venmo has no public confirmation API, so marking a payment as received is a manual step by design, not an oversight. The single-tutor scope means no admin roles or shared accounts. And the visual pass has been verified by automated tests and builds, but not yet by a human clicking through the app in a browser, that check is still pending.

Stack

LayerToolRole
FrontendVite + React 19 + TypeScriptStrict mode, no any
StylingTailwind CSS v4Custom design tokens, no component library dependency
DataSupabase (Postgres, Auth, RLS)Row-level security on every table, scoped to the signed-in tutor
APIHono on Cloudflare Pages FunctionsGoogle tokens and secrets stay server-side only
TestingVitest76 tests, all pure logic and rendering behavior