PawPal Website is the public web surface for PawPal: pet safety profiles, NFC tag finder pages, the community map, app-share previews, and the PawPal store.
- Next.js App Router
- React
- Tailwind CSS v4
- Framer Motion
- MapLibre GL
- Supabase
- Stripe Checkout
- Service worker and web manifest for install/offline support
Install dependencies from this directory:
npm installRun the development server:
npm run devOpen http://localhost:3000.
Run these before shipping web changes:
npm run lint
npm run buildUseful smoke routes:
//globe/store/store/checkout/store/orders/about/help/privacy/terms/tag/[id]/user/[id]/group/[id]/post/[id]
Copy .env.example to .env.local for local development and fill in local sandbox values. The example file lists every environment variable referenced by src/, including whether it is public, required, and where it comes from.
Keep production secrets out of the repository. NEXT_PUBLIC_ values are exposed to browser code; server-only values such as SUPABASE_SERVICE_ROLE_KEY, STRIPE_SECRET_KEY, and STRIPE_WEBHOOK_SECRET must not use that prefix. Stripe remains test-mode only in the current deployment policy.
Sentry error reporting is optional. Set SENTRY_DSN from the Sentry project Client Keys in Vercel or .env.local; leave it empty to keep the structured console fallback.
For Vercel Preview/Production setup, health checks, and rollback steps, see docs/DEPLOY.md.
Follow DESIGN.md and design/tokens/pawpal.tokens.json.
The site uses Paw Blue as the primary action color, Warm Orange as the accent, and Mint Teal for trust/success moments. Prefer existing PawPal primitives in src/components/ui and keep rounded corners, focus states, shadows, and status messages consistent.
- Home: communicates the loop between pet safety map, NFC tags, local community, and the app.
- Globe: renders the community map and gracefully falls back when location, tiles, or live data fail.
- Store: supports catalog fallback, cart persistence, Stripe checkout, and order history.
- Tag finder pages: prioritize emergency owner contact and privacy-first pet details.
- Share pages: route app deep links through a web fallback for user, group, and post shares.
public/sw.js caches the app shell and serves /offline.html for unavailable HTML requests. PwaRuntime registers the service worker and shows lightweight UI for offline mode, pending updates, and install prompts.
After changing public/sw.js, test both a clean install and an update from an already-open tab.