Lucas BergerandClaude Opus 4.8
cf9e345b87
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
51 lines
2.0 KiB
Markdown
51 lines
2.0 KiB
Markdown
---
|
|
quick_id: 260619-jp4
|
|
slug: add-app-screenshots-to-readme
|
|
status: complete
|
|
date: 2026-06-19
|
|
---
|
|
|
|
# Quick Task 260619-jp4: Add app screenshots to README
|
|
|
|
## Goal
|
|
|
|
Add real screenshots of the running FamilySync PWA to the README, organized into
|
|
a **Features** section that expands on the top-line project description (per user
|
|
follow-up: "the screenshots should go in some sort of features section that
|
|
expands on the description").
|
|
|
|
## Approach
|
|
|
|
1. Drive the live dev app (Vite :5173 + API :3000, dev-auth-bypass) with
|
|
`playwright-cli` (Chromium) and capture six views: Calendar, Lists index,
|
|
List detail, Login, Setup wizard, Admin.
|
|
2. The live instance has only one seeded event and one list — too sparse to
|
|
showcase. Per the user's decision (AskUserQuestion: "Mock locally"), populate
|
|
the views by intercepting API responses in the browser with `playwright-cli
|
|
route` (no writes to the real Fastmail account):
|
|
- `/api/me` → friendly member "Jordan" (blue), admin, setup not needed
|
|
- `/api/events` → a full June 2026 month of color-coded personal + family events
|
|
- `/api/lists` + `/api/lists/*/items` → four lists, a stocked grocery list
|
|
- `/api/admin/members` + `/api/admin/calendars` → two-person household
|
|
- `/api/setup/status` → `setupComplete:false` so the wizard renders
|
|
3. Save final PNGs to `docs/screenshots/`.
|
|
4. Rewrite the README "What It Does" bullets into a "## Features" section with
|
|
one screenshot per capability and expanded prose.
|
|
|
|
## Tasks
|
|
|
|
- [x] Capture six screenshots into `docs/screenshots/` via playwright-cli (mocked data)
|
|
- [x] Replace README "What It Does" with a "Features" section embedding the screenshots
|
|
- [x] Pass local CI gates (prettier, markdownlint)
|
|
|
|
## Files
|
|
|
|
- `docs/screenshots/*.png` (new — 6 images)
|
|
- `README.md` (Features section)
|
|
|
|
## Verify
|
|
|
|
- `pnpm exec prettier --check README.md` → clean
|
|
- `pnpm md:lint` → 0 errors (MD033 inline-HTML active → pure-markdown images only)
|
|
- Images resolve at `docs/screenshots/<name>.png` relative paths
|