Overview
The architecture isolates shops by subdomain, enforces role‑based access, and manages catalog, orders, post‑purchase content, and reviews consistently. APIs are type‑safe with client‑side caching. The UI is modern and accessible, with well‑structured components and a clear checkout flow.
Key features
- Multi‑tenant on subdomains: host‑based routing to isolate each shop.
- Tenant management: branding, Stripe connection (
stripeAccountId, stripeDetailsSubmitted). - Users & roles:
super-admin and user with granular permissions. - Product catalog: images, hierarchical categories, tags, price, visibility (
isPrivate, isArchived). - Gated content: post‑purchase library for authenticated customers.
- Stripe payments: per‑tenant onboarding and secure checkout.
- Orders & reviews: purchase tracking and rating/feedback UI.
- Type‑safe API: tRPC 11 + React Query,
superjson serialization. - Media: uploads to Vercel Blob.
Multitenancy & security
- Subdomains: URL rewriting guided by the
Host header to map tenant → logical shop space. - Cross‑subdomain cookies: configured for non‑dev (domain,
SameSite=None, secure). - Permissions:
super-admin‑only actions; product creation gated until stripeDetailsSubmitted === true. - Key envs:
NEXT_PUBLIC_ROOT_DOMAIN, PAYLOAD_SECRET, DATABASE_URI, STRIPE_SECRET_KEY, BLOB_READ_WRITE_TOKEN.
Data layer & integrations
- Payload CMS 3 with MongoDB adapter for core collections (users, tenants, products, orders, media, etc.).
- Stripe for payments and per‑shop onboarding.
- tRPC 11 + React Query for typed calls, caching, batching.
- Zod for schema validation across client/server.
- Zustand for focused client state.
UI/UX and performance
- Tailwind CSS 4 + Shadcn UI for accessible, consistent components.
- Embla Carousel, React Day Picker, Sonner for smooth UX.
- Dark mode theming; tuned LCP/CLS via lazy media and paginated lists.
Technical highlights
- Next.js 15 + React 19 + TypeScript.
- Payload 3 (MongoDB), Vercel Blob media.
- Stripe (per‑tenant onboarding + checkout).
- tRPC 11 +
superjson + React Query. - Zod, Zustand, Tailwind 4, Shadcn UI.