Clerk Fastify React Prisma Starter

This repo shows an example use case for how you setup a fullstack monorepo starter with Clerk, Fastify, React and Prisma to achieve authenticated cross-domain user access.

Open in VS Code

Clerk Apartments Application

The application

The Clerk Apartments application allows a user to claim apartments from the gallery and view them in his own collection. Any apartment that is “claimed” by a user, cannot be reclaimed unless “foregone” by the previous holder. So, be quick ?

Under the hood

The example is a fullstack application in a monorepo structure using:

  • Clerk as an authentication provider.
  • Fastify as the API server.
  • React as the frontend library.
  • Prisma for data storage and model type sharing between client and server.
  • Yarn workspaces for the monorepo management.

Where the magic happens

Authenticating Prisma data access using Clerk works by introducing a thin and customizable access management layer on top of the Prisma generated API for our collection.

This ultimately gets handled in the Fastify API routes with simple logic and the use of the Clerk authentication preHandler hook, like in the /apartments routes.

Running the example

To run the example locally you need to:

  1. Sign up for a Clerk account at https://clerk.dev/.
  2. Clone this repository git clone [email protected]:clerkinc/clerk-fastify-react-prisma-starter.git.
  3. Setup the required API variables from your Clerk project as shown at the example env files. Server Client
  4. yarn install to install the required dependencies.
  5. Setup your Prisma database, following the instructions at the db folder.
  6. To start both the client and the server you need to run in separate terminals from the top level of the repository the commands: yarn client:dev and yarn server:dev

Contact

If you have any specific use case or anything you would like to ask, please reach out!

GitHub

View Github