An opinionated fullstack GraphQL monorepo Boilerplate using modern tech stack.

🛡Type-safe

• graphql-code-generator
• prisma
• ts-pattern (for type-safe error handling)
• and I code in a type-safe way and don't choose a library that doesn't have a good TypeScript support.

🛠Customizable

• envelop (plugin system for GraphQL)
• urql (highty customizable GraphQL Client)

📈Simple but scalable

• a bit flavor of clean architecture in backend.

Ever evolving

• I constantly maintain this repository.
• TypeScript, React, GraphQL are ever evolving world too.
• In that sense, any tech stack might be replaced in the future.

Common

• TypeScript
• Turborepo
• pnpm
• GraphQL
• graphql-codegen

Backend

• Prisma
• fastify
• envelop
• graphql-yoga 2.0
• graphiql
• ts-pattern
• mysql

Frontend

• React
• Next.js
• urql
• tailwindcss
• radix ui
• shadcn/ui
• React Hook Form

Authentication

• Auth0

Testing

• testing-library
• jest
• msw

As this project uses auth0 for authentication, you need to setup auth0 to make everything work. If you don't have any auth0 account, then sign up and create account.

You need to create API, Application (Single Page Application) in the auth0 console. In Application, go to Application URIs section in the middle of the settings page and specify https://localhost:3000 to Allowed Callback URLs, Allowed Logout URLs, Allowed Web Origins, Allowed Origins (CORS).

Once you have set up API and Application, collect credentials below which will be used in your application:

• Client Id: Your Auth0 application's Client ID. can be found on the Application setting page.
• Domain: Your Auth0 application's Domain. can be found on the Application setting page.
• Audience: API Identifier for an access token. can be found on the API setting page.

You can manage role-based authorization with auth0 Rules, which is a mechanism that allows us to run some code when user register an account on auth0.

To do so, got to the Auth0 dashboard and create a new Rule (which can be found in Auth Pipeline on the side menu). Then fill the field with example code (Note that you should specify your own audience to namespace e.g. const namespace = 'https://api.fullstack-graphql-app.com'). And finally name the rule whatever you like.

After attached the rule, auth0 now add role to the user after a user registered the account on auth0.

const { loginWithRedirect } = useAuth0()

// Here "ADMIN" will be sent to auth0 and the rule put the role to jwt token.
loginWithRedirect({
  role: 'ADMIN',
})

In the root directory, Specify .env and .env.localhost file with the following environment variables:

.env

DATABASE_URL="mysql:https://fga:fga@db:3306/fga"
AUTH0_CLIENT_ID=<Client Id>
AUTH0_DOMAIN=<Domain>
AUTH0_AUDIENCE=<Audience>
GRAPHQL_END_POINT=https://localhost:5001/graphql

.env.localhost

DATABASE_URL="mysql:https://fga:fga@localhost:3306/fga"
AUTH0_CLIENT_ID=<Client Id>
AUTH0_DOMAIN=<Domain>
AUTH0_AUDIENCE=<Audience>
GRAPHQL_END_POINT=https://localhost:5001/graphql

And in the frontend root directory, Specify .env.local file with the following environment variables:

NEXT_PUBLIC_AUTH0_CLIENT_ID=<Client Id>
NEXT_PUBLIC_AUTH0_DOMAIN=<Domain>
NEXT_PUBLIC_AUTH0_AUDIENCE=<Audience>
NEXT_PUBLIC_GRAPHQL_END_POINT=https://localhost:5001/graphql

pnpm install

docker-compose up

Graphql Playground will start on localhost:5001

The scripts you might frequently use:

• db:migration:generate: Generates migration file (not apply automatically). Run this whenever you change your database schema.
• db:migration:run: Runs generated migration file. Run this after you generate the migration file.
• prisma-gen: Generates the Prisma client
• prisma-studio: Starts Prisma Studio on localhost:5555 where you can inspect your local development database.

 docker exec -it backend_db_1 mysql -u root -p

 mysql> use fga

Run the command below. which uses turborepo cli internally and it runs shared ui package's watch script as well.

pnpm run dev

1. Edit Schema file

path: apps/backend/src/api/graphql/typeDefs.ts

2. run graphql-codegen to generate files based on the latest schema

pnpm run generate:graphql

this will run turbo run codgen:graphql, which runs all codegen:graphql in each package.