Demo Video
Project Overview
Learning project (in progress): Built by following a structured tutorial to explore advanced Next.js patterns, multi-tenant architecture, and headless CMS integration.
How It Works
A multi-tenant e-commerce SaaS where each seller's data and products are isolated through declarative role-based access control. PayloadCMS powers the headless backend and admin panel, Next.js 16 renders the storefronts, and tRPC connects them with end-to-end type safety.
- Multi-tenancy: Tenant data is scoped at the database level via PayloadCMS access control
- Auth: JWT stored in an
httpOnlycookie server-side, never exposed to JavaScript - Discovery: Hierarchical category nav, tag & price filters, infinite-scroll listings
- Library: Authenticated users access purchased products from a personal library
Product Screenshots
Main storefront: category nav, price & tag filters
Tenant storefront: per-seller product listings
Technology Stack
Core Technologies
Frontend
Next.js 16 · App Router · TypeScript
Backend
PayloadCMS · MongoDB (Mongoose)
API Layer
tRPC 11 · TanStack Query 5
Forms & UI
React Hook Form + Zod · Tailwind + shadcn/ui
Key Features
Role-Based Multi-Tenancy
Each tenant's data is isolated via PayloadCMS access control hooks, while super-admins retain unrestricted access.
Secure Cookie Auth
JWT lives in an httpOnly cookie set server-side, protecting against XSS token theft.
Infinite Scroll
TanStack Query's useInfiniteQuery with server-side prefetching for fast first paint.
Type-Safe tRPC API
Compile-time guarantees end-to-end using Payload's auto-generated TypeScript types.
Hierarchical Categories
Parent/subcategory nesting powers a multi-level nav and combined tag filtering.
Payload Admin Panel
Auto-generated admin UI for products, tenants, users, and media.
Architecture
Tenant Data Isolation
The multiTenantPlugin attaches a tenant relationship to scoped collections. PayloadCMS access control hooks then filter queries declaratively, so tenant admins only see their own data, and super-admins see everything. No manual access logic per collection.
Authentication Flow
The tRPC login mutation invokes Payload's local auth API server-side. The JWT is written to an httpOnly cookie and sent automatically on every request, while remaining unreadable to client JavaScript. queryClient.invalidateQueries refreshes session state on login/logout.
Data Layer
tRPC routers (products, categories, tenants) expose Payload data with full type inference. TanStack Query 5 handles caching, background refetch, and infinite scroll; the first page is server-prefetched.
What I Learned
Multi-Tenant Patterns
Designing a single codebase that isolates data per tenant via scoped queries and declarative access control.
Headless CMS Architecture
Using PayloadCMS as both backend API and admin UI in place of custom dashboards.
End-to-End Type Safety
tRPC + Payload's generated types keep client and server in lockstep at compile time.
Schema-Based Validation
React Hook Form + Zod schemas shared between forms and tRPC input validators.
Next.js App Router
Server components, route groups, and middleware for SSR data prefetching.
PR Workflow
Feature branches with PR-based merges, reviewed by CodeRabbit AI on every change.