FAFFAF App — Development Portal
← Back to portal

Hānai — Build Checklist

Fur Angel Foundation · Built by Shauna Arnold · shauna.digital
Updated by Shauna & CC each session
Overall progress 8 / 46 complete
Phase 0 · Pre-Build
Phase 1 · Foundation
Phase 2 · Communications
Phase 3 · Media
Phase 4 · Adoptions
Phase 5 · Polish
Phase 5b · Notifications
Change List
Design Completion
Phase 6 · Website
Pre-Build — Design, Domains & SEO Prep
Complete · Finished before Session 1
8 / 8
Design Mockups
Mockup 1 — Admin dashboard: sidebar layout, stat cards, alert patterns, urgent dogs section
Mockup 2 — Dog profile page: 3:4 hero photo, Caveat Brush dog name, tab system, status pill, medical card patterns
Mockup 3 — Foster portal dashboard (mobile): "Aloha, [Name in Caveat Brush]" greeting, dog card, quick action buttons
Mockup files saved to /docs/design/ in repo — attached to every Claude Code session as design reference
Domain & SEO Setup
Vercel domains configured: faf.shauna.digital (app) · faf-portal.shauna.digital (checklist) · furangelfoundation-preview.vercel.app (website preview)
Screaming Frog crawl of furangelfoundation.org — export all live URLs as CSV redirect map before any Astro code is written
Google Search Console — verify ownership of furangelfoundation.org, document current rankings and impressions for key pages as pre-migration baseline
DonorBox link audit — document every URL in Instagram bio, Facebook, email campaigns, and blog posts that links to DonorBox; list all to be replaced at launch
Phase 0 Gate All must be complete before Session 1
All four design mockups created and saved to /docs/design/ in repo
Wix URL export CSV complete and saved — redirect map ready
Search Console verified and pre-migration impressions documented
Pre-Build Gate
Design reference exists before code begins. SEO baseline documented. Domain setup complete. No redirects will be missed at launch.
Foundation & Dog/Foster Management
Complete · Sessions 1–12 · 956 dogs live in production
12 / 12
Sessions 1–4 — Project & Design Foundation
Session 1 — Project scaffold: Vite + React + TypeScript + Tailwind, folder structure, design tokens (CSS variables), routing setup, Vercel + GitHub deployment pipeline S1
Session 2 — Supabase setup: all 22 database tables, Row-Level Security policies, auth configuration, magic link invite flow, email templates S2
Session 3 — Auth UI + role routing: branded login page, admin invite flow, foster magic link acceptance, role guard (admin → app, foster → portal) S3
⚑ Pre-S4 decision Sidebar behavior — revisit whether admin sidebar should be icon-only collapsed with click-to-expand, or stay full-width. Decide before component library is built.
Session 4 — Design system component library: Button, Badge, StatusPill, Card, Avatar, PageHeader, EmptyState, LoadingSpinner, Modal shell, Poppins + Caveat Brush fonts S4
Sessions 5–8 — Dog Management
Session 5 — Dog list page: 3:4 portrait photo grid, filter bar (status, size, sex), search, sort, status pills, empty states S5
Session 6 — Dog profile overview tab: hero photo, FAF ID, name in Caveat Brush, breed, age, sex, size, fixed status, microchip, intake info, status badge, edit modal S6
Session 7 — Dog profile medical + history tabs: medical records list, vaccination history, medication schedule, status history timeline, field notes, flag button S7
Session 8 — Add dog / intake form: full intake form, FAF ID auto-generation, legacy ASM ID field, status set to "available" on create, profile photo upload S8
Sessions 9–12 — Foster Management & Import
Session 9 — Foster list + foster profile (admin): list page, profile with contact info, assigned dogs, home details, experience level, invite new foster flow S9
⚑ Pre-S10 dashboard polish — complete
Session 10 — Foster assignment + transfer: assign primary/secondary foster to dog, transfer workflow, transfer history log, vacation hold creation by admin S10
Session 11 — Foster portal dashboard: role-gated view, "Aloha, [Name]" greeting, assigned dog cards in Caveat Brush, quick stats (next med due, upcoming appointment), mobile-first layout S11
⚑ Pre-S12 schema addition Add next_due_date (date) and updated_at (timestamptz) to medical_records table before import. Vaccination due dates and medication schedules from ASM need somewhere to land. Run migration in Supabase before Session 12 starts.
Session 12 — ASM data import script: CSV field mapping, base64 photo extraction (675 dogs), state normalization, alternate name parsing, demo Supabase instance test, production run S12
⚑ Data remediation needed post-S12 Foster assignments backfilled (40/41). Still pending: original owners (484 rows), dog costs ($218K, 3,018 rows), weight/log history (1,538 rows), vaccination due dates, deceased reason/notes (44 dogs). Schedule dedicated remediation session before Phase 3.
Phase 1 Testing All gates passed · Phase 2 underway
Admin can log in and access all admin pages without error
Foster can accept magic link invite, set password, and log in to foster portal
Foster can only see their assigned dog(s) — RLS confirmed: direct DB query returns no other records
New dog can be created with FAF ID auto-generated in correct format (FAF-000001)
Import script runs clean on production Supabase — 956 dogs live with correct foster assignments (40/41 fosters backfilled from ASM)
Dog photos display correctly in 3:4 portrait ratio from Supabase Storage
Medical diary data for active dogs is correctly imported (131 treatments, 37 dogs)
Design system components render consistently across Chrome, Safari, and mobile browsers
Phase Gate · Passed
ASM import complete — 956 dogs live in production with correct foster assignments (40/41 backfilled; 1 pending missing foster email in source data). Admin and foster auth verified. RLS confirmed by direct DB test. Foundation ready — Phase 2 comms build underway.
2
Communication & Scheduling
Sessions 13–19 · Eliminates group texts and fragmented communication
0 / 7
Sessions 13–16 — Messaging & Community
Session 13 — Per-dog messaging (admin): message threads per dog, unread counts, compose, read receipts, real-time via Supabase subscriptions S13
⚑ Pre-S4 sidebar decision — resolved: full-width sidebar, no collapse for V1
Session 14 — Foster messaging (foster view): thread list, thread detail with realtime, photo attachments, unread badges S14
Session 15 — Broadcast messaging: admin compose + send, foster broadcast inbox, read tracking, Resend email delivery to all fosters S15
Session 16 — Community feed: post creation with categories (vacation coverage, supplies, question, general), threaded replies, first-name display, admin pin + archive, real-time updates S16
Sessions 17–19 — Calendar & Appointments
Session 17 — Calendar (admin): horizontal scroll card strip + agenda list, all event types with color + shape indicators, date range display for multi-day events, org-wide view S17
Session 18 — Calendar (foster) + vacation holds: personal calendar, vacation hold submission form, org acknowledgment flow, dog medication + appointment cards S18
Session 19 — Appointment requests + notifications: foster submits request, admin queue, approve → schedule flow, web push opt-in, notification preferences, Resend email confirmations S19
Phase 2 Testing All must pass before Phase 3 begins
·
Admin sends message → foster sees it in real-time without page refresh
·
Foster can only see their own dog's message thread — confirmed via RLS
·
Broadcast message appears in all foster portals AND arrives via Resend email
·
Community feed post visible to all users; replies thread correctly; first names only displayed
·
Multi-day vacation hold displays as single card (e.g. "Apr 18–23 · 5 days") not individual daily cards
·
Vacation hold submitted by foster appears on admin calendar with reassignment flag
·
Appointment request flows: pending → approved → scheduled, with notification at each stage
·
Web push notification delivered on mobile browser (iOS Safari and Android Chrome)
Phase Gate
Full message flow works in real-time. Broadcasts reach all portals and email inboxes. Community feed and calendar both verified with real users. No group texts needed for any standard communication flow.
3
Media Pipeline
Sessions 20–22 · Builds the social content machine
2 / 3
Sessions 20–22
Session 20 — Foster photo/video upload: mobile-optimized upload UI, Supabase Storage integration, caption field, upload progress indicator, queue handling for poor connections S20
Session 21 — Media library per dog: photo/video grid on dog profile, profile photo designation, chronological view, foster can see their own uploads S21
Session 22 — Admin media review queue: pending approval grid, approve for social / approve for website toggles, bulk approve, rejection notification to foster S22
Phase 3 Testing All must pass before Phase 4 begins
·
Foster can upload photo from phone browser (iOS Safari and Android Chrome)
·
Uploaded photo appears in admin review queue as "pending"
·
Admin can approve for social and for website independently in one click
·
Profile photo can be changed and new photo displays correctly on dog card and profile hero
·
Rejected photo triggers notification to foster
·
All photos display in 3:4 portrait ratio — no stretching or cropping artifacts
Phase Gate
Foster can upload from phone. Admin reviews and approves in one workflow. Website-approved photos are ready to surface in Phase 5. No emailing of photos needed for any use case.
4
Adoption Pipeline
Sessions 23–26 · Adopter profiles, pipeline, kanban, finalization
4 / 4
Sessions 23–26
Session 23 — Adopter profiles: adopter list with search/filter, individual profiles with two-column layout, adoption history, contact info, CRUD S23
Session 24 — Adoption application management: application inbox, stage pipeline (application → reviewing → approved → trial → finalized/denied), contextual action buttons, new application modal with inline adopter creation S24
Session 25 — Adoption pipeline kanban: 6-column drag-and-drop board, List/Board toggle, confirmation dialogs for finalized/denied, dog status auto-set to adopted on finalization S25
Session 26 — Trial tracking + finalization flow: TrialTracker with countdown/overdue, FinalizeModal checklist (fee, contract, vet records), foster assignment completion, auto foster thread message S26
Phase 4 Testing All must pass before Phase 5 begins
Complete adoption flow works end-to-end: application → approved → trial → finalized
Foster-to-adopt trial period tracked with correct end date and pipeline status
Dog status automatically changes to "adopted" and foster assignment completed on finalization
Kanban drag-and-drop with confirmation dialogs for irreversible stage changes
Phase Gate — Passed
Adoption pipeline fully operational: application through finalization with kanban board, trial tracking, finalization checklist, and automatic status updates. Stripe and contract moved to website phase.
5
App Polish + Completions
Sessions 27–33 · Wire remaining stubs, reports, error handling, handoff
0 / 7
Sessions 27–33
Session 27 — Wire foster dog detail tabs: Photos grid (approved + pending with review badge, source badges) and Messages tab (preview card + thread navigation) on FosterDogDetail S27
Session 28 — Admin foster profile completions: Dogs (active/past), Messages (thread list + unread), History (timeline) tabs on FosterProfile S28
Session 29 — Foster profile edit + resident pets: Edit Profile modal (phone, email, address, home type, yard, household counts, validation), Resident Pets CRUD (jsonb, species dropdown, add/edit/delete) S29
Session 30 — Reports page: 6 tabbed reports (Intakes & Adoptions with Recharts bar chart, Dog Roster, Adoption Summary, Foster Roster, Medical Spend, Impact Summary), ReportShell framework, CSV export utility S30
Session 31 — Data remediation: remediate-asm.ts script with 5 operations (cost backfill 3018 rows, original owners 423, weight history 1538, vaccine due dates, 44 deceased dogs), remediation log output S31
Session 32 — Error handling + quality pass: ErrorBoundary component, ToastProvider + useToast system, Supabase error handling across all 21 hooks, LoadingSpinner in guards/pages, form validation audit, double-submit prevention on media review S32
Session 33 — Client readiness: feedback link (JotForm), Settings page (Stripe placeholder + deploy hook), Admin Help (10 feature guides + video placeholder), Foster Help (mobile-first guide), mobile responsive fixes S33
Phase 5 Testing All must pass before Phase 5b begins
·
No placeholder text remains in any page — all "coming soon" stubs replaced with real content
·
All foster profile settings rows navigate to real pages
·
Reports page renders real data with working CSV export
·
Global error boundary catches and displays unhandled errors
·
Client can independently add a dog, assign a foster, process an adoption, and review media
Phase 5 Gate
App is complete and client-ready: no placeholders, no silent errors, all features wired end-to-end. Client trained and verified in production.
5b
Notifications
Sessions 34–36 · PWA push notifications, announcements, email fallback
0 / 3
Sessions 34–36
Session 34 — PWA setup + push infrastructure: vite-plugin-pwa, VAPID keys, push_subscriptions table, subscription hook, send-push API route, install prompt, notification permission flow S34
Session 35 — Announcements + push triggers: announcements table, admin send page, foster announcement cards, push wired to all trigger points (messages, appointments, media, vacations, adoptions), notification preferences in DB S35
Session 36 — Email fallback (Resend) + demo prep: Resend integration (mail.furangelfoundation.org), email templates, push→email fallback logic, delivery method preferences, medication reminder cron, DEMO.md S36
Notification Testing All must pass before website phase begins
·
App installs to home screen on iOS and Android — standalone mode works
·
Push notification arrives on foster device when admin sends a message
·
Admin can send announcement → fosters receive push + see card on home page
·
Email fallback fires when foster has no push subscription
Phase 5b Gate
Push notifications working end-to-end. Email fallback operational. All auto-message trigger points fire push. Fosters never miss an update.
Change List — Sessions 37+
Change List — Test, Fix & Build Features
Sessions 37–55 · Phases A–D complete: quick fixes, test/fix, mockups, feature builds
17 / 17
Phase A: Consolidate pinks — replaced all #C42278 with #DC2A8C
Phase B: Create new dog + assign foster flow
Phase B: Foster sends message to admin, admin responds
Phase B: Foster views dogs with meds, vaccinations, vet appointments
Phase B: Foster views profile and household details
Phase B: Foster submits planned vacation with dates
Phase C: Broadcast messaging mockups
Phase C: Community forum mockups
Phase C: Vacation coverage request mockups
Phase C: Foster dog catalog mockups
Phase D: Preventative schedule per dog — admin + foster views
Phase D: Notification delivery — stubs ready for Resend
Phase D: Broadcast messaging — admin compose + foster display
Phase D: Community forum — foster + admin moderation
Phase D: Dog catalog — foster browse + interest + admin review
Phase D: Appointment availability — admin slots + foster claims
Phase D: Foster appointment view + claim/cancel
DC
Design Completion
Sessions 53–57 · Desktop mockups, onboarding fallback, design.html restructure
3 / 3
DC1: Foster desktop mockups — Sections 1–5, 7–8 on design.html (7 desktop views)
DC2: Onboarding desktop fallback (Section 6e) + named nav links + all 40 phone frames standardized to single fr-phone class
DC3: Admin mobile mockups — deferred (admin is desktop-first, not blocking launch)
D1: Domain setup — app.furangelfoundation.org via Wix DNS CNAME to Vercel ✓
D2: Resend email setup — blocked on Wix DNS access from Tiffany
Design Completion Gate
All foster desktop + onboarding views designed. Admin mobile mockups deferred. Domain live at app.furangelfoundation.org. Resend email blocked on DNS access.
WP
Walkthrough Prep — Visual Polish & Architecture
Prompts #67–128 · Error boundaries, PWA fix, foster redesign, notification wiring, desktop layouts
28 / 28
Architecture & Infrastructure (#67–70)
Error boundaries — all 30+ routes wrapped with SectionErrorBoundary
PWA cache fix — NetworkFirst for JS/CSS, prompt-based SW updates, reduced precache
Database backup script + admin documentation page (10 sections)
RLS policy overhaul — auth.users → auth.jwt() across all tables
Admin Dog Detail Overhaul (#74–95)
Dog detail gradient header with photo, status pill, FAF ID, catalog toggle
Profile/Medical toggle replaces tabs, section-specific inline editing
Compatibility, Health, Website cards in header then restored to profile body
Admin dashboard redesign — gradient header, stat cards, Today card, Needs Attention, Updates feed
Notification Wiring (#96–100)
In-app notification system — notifications table, bell icon, dropdown panel, mark read
All 10 notification workflows wired — broadcasts, messages, coverage, interests, events, applications
Add Foster form (manual creation without JotForm)
Vacation coverage request flow — date pickers, auto-creates forum post, links back
Foster Help page expanded (Forum, Meet Dogs, Appointments, Vacation sections)
Foster Redesign (#101–128)
Foster home page full redesign — gradient header, stat pills, stacked sections (desktop + mobile)
Shared foster components — SectionHeader, DogCard, MessageRow, CalendarEventRow, AnnouncementCard
My Fosters page redesign — DogCard full variant, gradient header
Dog Detail overhaul — large photo, two-column Medical, Care tab, underline tabs
Mobile floating pill bottom nav (4 items + More menu)
My FAF communication hub — unified feed, 3 filter cards (Messages/Concerns/Coverage), structured forms
Admin structured message rendering — concern/appointment/coverage/dog_update cards with status controls
Care tab replaces Daily Log — Medication Checklist, Care Instructions, Log Observation
Appointment request → slot creation bridge + admin assign foster to slot
Dog info update proposal workflow (foster proposes → admin accepts/dismisses)
Profile page redesign — two-column card layout (Contact/Household/History + Preferences/Account)
Meet Dogs catalog — size filters, compatibility badges, descriptions, responsive 3-col grid
Dashboard reorder + Calendar removed from nav + Browse Appointments moved to My FAF
Forum list/detail 65/35 split desktop layout with sticky detail panel
Font size + card radius alignment with design system (16px radius, tightened fonts)
Walkthrough Prep Notes
Gate tests not yet run — scheduled for post-walkthrough. Message notifications wired, push works, email blocked on Resend DNS.
PW
Post-Walkthrough Punch List
Items to address after client walkthrough
0 / 9
·
Resend email DNS setup (Wix DNS access from Tiffany)
·
Run all phase gate tests
·
Data remediation: weight_history, original_owners, dog_costs, deceased notes
·
Medication reminder scheduler (daily cron)
·
Delete deprecated announcements table + old Announcements.tsx / useAnnouncements.ts files
·
Add migration files for org_events table
·
Foster profile inline editing from admin
·
Admin per-dog communication timeline
·
Consolidate announcements/broadcasts admin UI into single page
S2
People Refactor — Stage 2 (Code Migration)
Prompts #501–528 · Canonical people table, dual-write, role IDs
10 / 10
usePerson hook: resolves via person_id, email fallback
People.tsx (Fur Angels): queries people directly, batch-loads past 1000-row cap
FosterProfile.tsx admin save: identity dual-writes to people + profile mirrors
createFurAngelRecord: people-first, email reuse, FAF-FA/FAF-AA role IDs
create-foster.ts API: people-first + FAF-FA + flag dual-write
invite-foster.ts API: people-first + FAF-FA + person_id link
createAdopter (useAdopters): people-first + FAF-AA + person_id link
FosterProfilePage self-edit: identity dual-writes to people, state excluded
RLS policies: Admin full access, Foster read/update own person
FosterOnboarding: verified no identity collected, no change needed
Stage 2 Gate End-to-end testing before trusting create paths
·
Test all 4 create paths: FAF-P/FAF-FA/FAF-AA correct, person_id links, email reuse prevents duplicates
·
Test foster self-edit persists to people + profile (RLS policy)
·
Clean up TEST-P-0001 stray value + test scenario records
S12
Major Build Session — Adoption Flow + Tiffany Feedback
Prompts #534–651 · Adoption status pipeline, meds, document upload, code quality
18 / 18
Adoption Status Flow (4 pieces)
Approve application → dog picker required → dog set to pending_adoption
Finalize adoption → dog set to adopted, foster assignment ended + history preserved
Undo-finalize rollback → foster-resolution prompt (previous foster / reassign / rescue care)
Fell-through cancel from pending → foster-resolution prompt, app closed with reason
Tiffany Feedback Batch
Deceased age + days-in-care freeze at adoption/transfer/deceased exit
transfer_date column added + auto-set on status change
Combo medication types (flea/tick/heartworm + combos)
Human profile photos (people table photo_url, all views)
Chip date label fix on dog profile
Code Quality + Infra
Dog TypeScript type cleanup (14 fields added, all raw casts removed)
Inline-style pre-commit hook (changed-files only, // allow-inline-style escape hatch)
Movement History moved to top of Care Plan tab
Movement History inline styles converted to ds-timeline CSS class system (40 → 3 dynamic)
Document Upload System
Document upload on Vet Records tab (admin-only, reuses asm-documents bucket)
6 document categories: Surrender Form, Vet Record, Adoption Contract, Intake Form, Shelter Manager, Other
263 ASM docs backfilled to document_type='Shelter Manager'
Earlier in Session (carried)
Med dual-write (foster + admin), Care Status box, error toasts, PWA periodic check, Tiffany login fix, users self-read RLS, JotForm foster name fix, auth deadlock fix
Open Items Still pending from this session
·
Refill flag (notification + dog record + admin dashboard)
·
Medication reminder cron fix (repoint to preventative_schedules.next_due)
·
Admin medical-record correction (edit/delete dose outside foster same-day window)
·
Inline-style full codebase cleanup (pre-commit hook catches new; existing need audit)
·
Dashboard quick-action buttons (both views)
·
Load FAF vet offices
·
Bulk upload 263 ASM document PDFs to storage (rows exist, files pending)
·
Verify this session via real admin click-through on live
·
Consider a real 'cancelled' app status (vs closed+reason)
Website Phase — Separate Project
6
Website (Separate Project)
Sessions 37–43 · Astro + Keystatic public site, Stripe, contracts, SEO
0 / 7
Sessions 37–43
·
Session 37 — Astro website scaffold on Vercel: homepage, navigation, footer, deploy S37
·
Session 38 — Keystatic CMS setup: content types, GitHub OAuth, Wix content migration S38
·
Session 39 — Public dog listings: Supabase API, dog grid, individual profiles, SEO metadata S39
·
Session 40 — Events + static pages: events from org_events, all static pages from Keystatic S40
·
Session 41 — SEO migration + launch: 301 redirects, structured data, sitemap, DNS switch S41
·
Session 42 — Stripe adoption fee: Checkout, webhooks, payment status S42
·
Session 43 — Digital contract: public page, e-signature, auto-PDF generation S43
Launch Readiness Every item required before public launch
·
Dog marked published_to_website in app appears on furangelfoundation.org — no manual action required
·
Keystatic editor: admin can edit homepage text, publish content without developer involvement
·
All Wix 301 redirects return correct status
·
Stripe adoption fee payment processed, webhook fires, payment status updates in Hānai
·
Adoption contract page accessible without login, e-signature captured, PDF generated and emailed
·
DNS switch complete — furangelfoundation.org points to Vercel, propagation confirmed globally
Final Gate — Project Complete
Website live and auto-updating from app. Keystatic CMS working. All Wix redirects verified. Payment and contract flows end-to-end. FAF operates entirely through Hānai and the new website.