Panoramica

L’architettura separa i negozi per sottodominio, applica controlli di accesso per ruoli e gestisce catalogo, ordini, contenuti post‑acquisto e recensioni in modo coerente. Le API sono type‑safe e integrate con caching lato client. La UI è moderna e accessibile, con componenti ben strutturati e flussi di checkout chiari.

Funzionalità principali

• Multi‑tenant su sottodomini: routing basato su host per isolare il negozio (tenant come prefisso).
• Gestione tenant: anagrafica, branding, collegamento Stripe (stripeAccountId, stripeDetailsSubmitted).
• Utenti & ruoli: super-admin e user, permessi granulari per creazione/aggiornamento/eliminazione.
• Catalogo prodotti: immagini, categorie gerarchiche, tag, prezzi, visibilità (isPrivate, isArchived).
• Contenuti protetti: libreria post‑acquisto accessibile ai clienti autenticati.
• Pagamenti Stripe: onboarding per tenant e checkout sicuro.
• Ordini & recensioni: tracciamento acquisti, valutazioni/feedback con UI dedicata.
• API type‑safe: tRPC 11 + React Query, serializzazione con superjson.
• Media: upload su Vercel Blob.

Multitenancy e sicurezza

• Sottodomini: riscrittura URL guidata dal Host per mappare tenant → spazio logico del negozio.
• Cookie cross‑subdomain: configurati per ambienti non‑dev (dominio, SameSite=None, secure).
• Permessi: azioni riservate al super-admin; creazione prodotti bloccata finché stripeDetailsSubmitted === true.
• Variabili chiave: NEXT_PUBLIC_ROOT_DOMAIN, PAYLOAD_SECRET, DATABASE_URI, STRIPE_SECRET_KEY, BLOB_READ_WRITE_TOKEN.

Data layer e integrazioni

• Payload CMS 3 con adapter MongoDB per collezioni (utenti, tenant, prodotti, ordini, media, ecc.).
• Stripe per pagamenti e onboarding account per negozio.
• tRPC 11 + React Query per chiamate tipizzate, caching e batching.
• Zod per validazioni coerenti front/back.
• Zustand per stato client mirato.

UI/UX e performance

• Tailwind CSS 4 + Shadcn UI per componenti accessibili e consistenti.
• Embla Carousel, React Day Picker, Sonner per UX fluida.
• Dark mode con theming; attenzione a LCP/CLS con lazy media e liste paginate.

Highlight tecnico

• Next.js 15 + React 19 + TypeScript.
• Payload 3 (MongoDB), Vercel Blob per media.
• Stripe (onboarding per tenant e checkout).
• tRPC 11 + superjson + React Query.
• Zod, Zustand, Tailwind 4, Shadcn UI.