Full System Audit Map

Checklist

• Snapshot git status and explicitly separate user changes from new work.
• Read project rules: AGENTS.md, deployment environment rules, TODO-FIXES.md, audit/TODO-LATER.md.
• Map route registry: App.tsx, useSEO, api/index.ts ROUTE_META, sitemap.xml, robots.txt, llms.txt.
• Map data sources: hardcoded data fallback, Supabase loader, public tables and storage buckets.
• Map all public docs and old reports without editing them.
• List live domains and confirm test/prod separation before any deploy command.

Commands

git status --short
find . -maxdepth 3 -name AGENTS.md -o -name "deploy-environments.md"
rg -n "TODO|FIXME|HACK|password|secret|token|sk_live|sk_test" AGENTS.md TODO-FIXES.md mariachi-react audit
rg -n "Route|useSEO|ROUTE_META|sitemap|robots|llms" mariachi-react/client/src mariachi-react/api mariachi-react/client/public
find mariachi-react/client/public/docs -maxdepth 1 -type f | sort

Checklist

• Search repo for tokens, passwords, webhook secrets, service keys and accidental logs.
• Move admin credentials and bot access secrets out of client-visible code and into server-side environment/config path.
• Verify Stripe webhook signature validation and replay/idempotency behavior.
• Verify API endpoints reject unsupported methods and malformed payloads.
• Review external URL handling: image imports, media upload, map/proxy calls and webhook URLs.
• Add security headers in vercel.json where compatible with current SPA.
• Review rate limits and spam protection for forms and admin-like operations.
• Check that error responses do not reveal stack traces, keys, database details or vendor internals.

Files to inspect

• mariachi-react/api/stripe-webhook.ts
• mariachi-react/api/checkout.ts
• mariachi-react/api/commission.ts
• mariachi-react/api/contact.ts
• mariachi-react/api/trade-enquiry.ts
• mariachi-react/api/workshop-booking.ts
• mariachi-react/api/telegram.ts
• mariachi-react/client/src/pages/Admin.tsx
• mariachi-react/vercel.json
• mariachi-react/client/src/lib/supabase.ts

Checklist

• Confirm public SELECT policies expose only intended fields and published records.
• Confirm INSERT policies for commissions/contacts/trade/workshops cannot write arbitrary protected columns.
• Review anon CRUD policies on rugs, journal and bot history; decide if current alpha convenience must be reduced before wider release.
• Compare hardcoded data fallback with Supabase rugs and flag drift in names, slugs, prices, statuses and image arrays.
• Validate all active product image URLs, hover images, cutout URLs and storage paths return HTTP 200.
• Check order fields: product slug, Stripe price ID, amount, currency, status transitions and duplicate handling.
• Confirm drafts/published flags work for rugs and decide if journal/content need the same workflow.
• Verify storage upload categories and file type validation.

Data tables

Checklist

• Checkout amount must come from trusted Supabase/Stripe source, not client hardcode.
• Verify unavailable/sold/draft products cannot be purchased.
• Verify currency and decimal handling for EUR prices.
• Confirm success and cancel URLs are correct for test and production domains.
• Review webhook idempotency: duplicate event should not create duplicate order or email.
• Ensure order status transitions are explicit: created, paid, failed, refunded/canceled if supported.
• Confirm Apple Pay, Google Pay and Klarna availability is controlled by Stripe, not frontend claims.
• Test checkout with live-like test cards on test domain only.

Test matrix

Checklist

• Every public route has unique title, description, canonical and crawlable body content.
• H1s contain primary search intent, not only brand or artwork names.
• Product routes use Product schema with price, availability, image and canonical URL.
• LocalBusiness schema matches Barcelona studio details and does not conflict with page content.
• FAQ schema only includes visible page questions and answers.
• Breadcrumb schema exists for collection/product routes.
• sitemap.xml includes canonical public pages and excludes test/variant/orphan-only routes.
• robots.txt and llms.txt match intended crawl policy.
• OG/Twitter injected meta works for direct route request, not only client navigation.
• Language rules are consistent: English first, Spanish legal route lang if needed.

Route groups

Checklist

• Every form has server endpoint, Supabase insert and email/list side effect where intended.
• Every form has same success/error UX: inline field errors, toast/global message, retry path.
• Client-side validation matches server-side validation.
• Radio groups use fieldset/legend and labels are attached correctly.
• Optional fields are truly optional on both client and server.
• Anti-spam protection exists or is explicitly parked with risk note.
• Vendor failures degrade safely: data saved even if newsletter/email side effect fails, where appropriate.
• Admin can distinguish new, contacted, resolved and archived leads.

End-to-end tests

Checklist

• Run Lighthouse mobile and desktop against test, not just localhost.
• Track LCP element per key route: home, catalog, product, commission, journal.
• Add width/height or aspect-ratio for hero, catalog images, journal covers and deco media.
• Use responsive images for heavy product/catalog assets.
• Confirm hero video loads after critical render and never blocks initial page view.
• Audit unused JS and unused UI dependencies; target boxed-product bundle budget separately.
• Review cache headers: HTML no stale SEO risk, assets long cache with hashed names.
• Remove global third-party scripts from Admin/Docs where not needed.

Budgets

Checklist

• Read DESIGN-SYSTEM.md before any visual change.
• Use existing CSS patterns before introducing any new classes.
• Verify contrast for nav, hero serif text, footer titles, footer legal and CTA states.
• Verify all interactive targets are 44px minimum where touch is expected.
• Check mobile menu scroll lock, focus behavior, close behavior and background nav visibility.
• Check catalog card hover: no image jump, no transform conflict, no layout shift, no hover state stuck.
• Check modals: focus, escape, backdrop, internal gallery arrows and body scroll.
• Check forms with keyboard only and screen-reader labels.
• Run viewport matrix: 320, 375, 390, 430, 768, 834, 1024, 1440, 1920.

Visual rules to enforce

• Buttons stay outline pill unless the design system explicitly says otherwise.
• Page heroes keep required structure: back, eyebrow, sans, serif, lead.
• Bottom CTA pattern uses page-cta-section and page-cta-primary where required.
• Minimum font size stays at 0.75rem or above.
• No horizontal scroll at mobile/tablet viewports.
• No overlapping text, image, nav, modal or CTA elements.
• No nested card-in-card patterns in new report/app surfaces.

Ops checklist

• Confirm current checkpoint exists before risky cleanup or production release.
• Keep PENDING-CHANGES and DEV-HISTORY truthful after significant work.
• Keep test and production deployments separate.
• Document rollback command for every production batch.
• Verify Vercel env vars by name only, never writing secret values into repo.
• Document observability gaps: errors, form failures, payment failures, bot failures.
• Define smoke tests for test domain after every deploy.

Boxed product checklist

• Replace brand name, colors, fonts, Barcelona address and social handles with config/tokens.
• Move admin password and access secrets into environment/config flow.
• Abstract categories, workshop defaults and content blocks into database seed/config.
• Create reusable form pipeline: validate, insert, notify, list sync, retry/failure status.
• Create reusable product pipeline: products, images, checkout, order webhook, stock state.
• Create install/onboarding wizard only after Mariachi has stable pilot behavior.
• Track which improvements are Mariachi-specific art direction vs generic craft-brand platform.