FaceCheck — Web Prototype

Mobile-first web prototype for FaceCheck, an objective facial palsy assessment app. Visually mirrors the iOS SwiftUI sibling (see SIBLING_IOS.md) and shares the same mock-data rules + design tokens.

• Live: (Vercel URL after first deploy)
• iOS sibling: /Users/maxlin/max_projects/FaceCheck/ (not public)
• Design source of truth: iOS prototype-spec.md

Tech

• Next.js 16 (App Router) · React 19 · TypeScript strict · Tailwind CSS 4
• Zustand (+ persist) for session state
• lucide-react · framer-motion · clsx · tailwind-merge
• No third-party backend in this phase — all data generated on-device by src/lib/mock.ts

Screens

Route	What
/	Home — greeting, latest result hero, quick stats, history preview
/capture	Photo picker (library + camera)
/analyzing	4-step fake progress (~12s) then navigates to /report/[id]
/report/[id]	Assessment report with Patient / Clinical toggle
/avatar/[id]	Drag-to-rotate schematic 3D face with heat overlay
/history	Sunnybrook trend + stats + grade distribution + sessions list
/settings	Demo case picker (mild / moderate / severe), clear history, about

Desktop viewport wraps the app in an iPhone 17 bezel. Mobile shows edge-to-edge.

Run locally

npm install
npm run dev            # http://localhost:3000

Build

npm run build
npm run start

Data contract

src/lib/types.ts mirrors the iOS AssessmentReport. Fields are tagged:

• Tier A — real from /pipeline API (planned)
• Tier B — client-side real (session history, timestamps)
• Tier C — generated by MockAssessmentGenerator until backend grows matching heads

Tier C UI wraps in <PreviewBadge> so placeholder numbers are visually flagged.

Canonical sample: ../FaceCheck/api-contract/sample-assessment.json.

Mock generator rules

Grade-anchored Gaussian distributions (mirror of iOS MockRules.swift):

Grade	Sunnybrook μ±σ	Synkinesis	Palpebral L/R	Amplitude
I	95±3	0.0±0.1	0.98±0.02	0.03±0.02
II	78±5	1.0±0.3	0.92±0.04	0.14±0.04
III	54±8	2.5±0.6	0.70±0.08	0.38±0.08
IV	38±8	3.5±0.5	0.50±0.08	0.55±0.08
V	22±6	4.5±0.3	0.30±0.06	0.71±0.06
VI	5±4	5.0±0.1	0.10±0.05	0.85±0.05

Regions (forehead/eye/cheek/mouth) hover around the Sunnybrook score with ±15 jitter. Trend: 6-point monotonically-improving curve ending at current score.

Deploy to Vercel

1. Push this repo to GitHub
2. Connect at https://vercel.com/new — Next.js is auto-detected
3. Every push to main auto-deploys; every PR gets a preview URL

Credits

Design system and data model shared with the iOS SwiftUI sibling in /Users/maxlin/max_projects/FaceCheck/. See SIBLING_IOS.md for the sync protocol.