Zenstack Sample With Decoupled Client and Server

Stack

• Backend: Express.js + Prisma + ZenStack
• Frontend (SPA): Vite + React + TanStack Query

The backend uses ZenStack to automatically serve access-controlled CRUD API. It also uses the @zenstackhq/tanstack-query plugin to generate hooks for the frontend to consume the API. Note that the plugin is set to generate in "portable" mode, so that the frontend project doesn't need to reference Prisma or ZenStack.

Running the project

Backend

• cd server
• npm i
• npm run generate
• npm run dev

Frontend

• cd client
• npm i
• npm run dev