Work/Full-Stack Web

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

  1. Next.js App Router with pnpm; every design token and component class lives in globals.css.
  2. tests/e2e/design.spec.ts fails on any deviation from DESIGN.md at 1280x720 and a Pixel 7 viewport, and Vitest covers unit tests.
  3. 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.