Tutoring Business Website
Graph-paper-styled tutoring site with a test-enforced design system
Typeclient
Statusshipped
Updated2026-09-28
Commits12
SourcePrivate
What it is
A marketing site for an independent math and college-application tutor, built in Next.js with a graded-homework look: graph-paper background, 2px ink outlines, hard offset shadows and one handwritten accent. It has a subject picker, progress tracker, reviews, a contact form, a blog, a sitemap and Open Graph images. The DESIGN.md rules are enforced by Playwright tests that measure the rendered site at desktop and mobile sizes.
The problem
An independent tutor needed a credible web presence that converts parents and students into inquiries.
How it works
- Next.js App Router with pnpm; every design token and component class lives in globals.css.
- tests/e2e/design.spec.ts fails on any deviation from DESIGN.md at 1280x720 and a Pixel 7 viewport, and Vitest covers unit tests.
- Static content modules for posts, reviews and site config, plus Google Analytics, robots and sitemap generation and a printable fall flyer PDF.
Stack
Next.jsReactTypeScriptPlaywrightVitestBiomeVercel
Disciplines
For your business
Small-business marketing sites with a documented design system and tests that stop it drifting.