Groceries Shopping Platform
A multi-tenant grocery commerce platform where each Clerk Organization maps to one store. Shoppers browse storefronts, manage carts and favorites, and check out per store through Stripe Checkout Sessions. Store admins manage catalog, inventory, and orders in an org-scoped console. A platform Plus membership unlocks member prices across stores, kept in sync via Stripe webhooks into a Convex reactive backend.
Tech stack
- TypeScript
- Next.js
- React
- Tailwind CSS
- Convex
- Clerk
- Stripe
Architecture
Multi-tenant app shell
Next.js App Router splits public storefront routes from org-scoped admin, with Clerk Organizations as the tenancy boundary.
- One Clerk Organization = one store record
- Admin routes require an active org; storefronts are public by slug
- Shared UI tokens and layout components across store + admin surfaces
Reactive backend
Convex owns catalog, cart, favorites, orders, and membership state with typed queries/mutations and index-backed lookups.
- Auth mapped from Clerk JWTs, including org_id / org_role claims
- Store admin writes scoped to the active organization
- Seed mutation bootstraps a demo catalog per store
Payments & membership bridge
Stripe Checkout handles per-store payments and Plus subscriptions; a Next.js webhook verifies signatures and bridges events into Convex.
- checkout.session.completed completes orders and activates subscriptions
- customer.subscription.* keeps Plus status in sync
- Shared bridge secret protects Next → Convex webhook calls
Engineering highlights
Org-as-tenant model
Clerk Organizations define store ownership while shoppers stay personal accounts, keeping admin isolation without forcing buyers into every store org.
Webhook-hardened checkout
Stripe signatures are verified at the Next edge, then forwarded to Convex with a bridge secret so order and membership state update from trusted events only.
Member pricing across stores
A single platform Plus subscription unlocks member prices on any storefront, with catalog reads reflecting live membership status.
End-to-end typed stack
Convex schema and validators flow into the Next.js client, keeping catalog, cart, and admin mutations type-safe from database to UI.