GraphQL Fullstack Boilerplate

GraphQL Fullstack Boilerplate is a monorepo web application starter that bundles a GraphQL API, server-side cookie authentication with bcrypt and JWT, database access via Prisma 2, and an Ant Design frontend into one deployable Next.js app.

What is GraphQL Fullstack Boilerplate?

This boilerplate gives you a working fullstack application after cloning and installing dependencies. It takes a new project and outputs an app with user sign-up, login, logout, profile viewing, and a dashboard, all wired through GraphQL queries and mutations. The platform is Next.js with the GraphQL endpoint served from an API Route at pages/api/graphql.ts. The project was created by Kunalgorithm and is available on GitHub.

Key Features

• Preconfigured authentication — Users can sign up, log in, view their profile, and log out. Passwords are hashed with bcrypt and the server sets an httpOnly cookie with a six-hour maximum age and sameSite: lax.
• GraphQL API without a separate server — The GraphQL endpoint is built into Next.js API Routes, so it deploys as a serverless function alongside the frontend.
• Prisma 2 database access — The Prisma client is auto-generated and type-safe; SQLite is used locally, and the README provides steps to switch to PostgreSQL or MySQL for production.
• Ant Design UI — Styling comes from Ant Design components, including forms, snackbars, and responsive layout pieces.
• Wired example components — The starter includes working queries, mutations, and snackbars, so frontend patterns are ready to copy.
• Zero-config deployment — A one-click Render deploy button is included; Render also provides a managed Postgres database for production use.
• Monorepo structure — The project is organized as a monorepo, with TypeScript used across client and server code.

Who is it for?

• Developers starting a fullstack project who want to skip configuration and begin with auth, database, and GraphQL already working.
• Teams building Next.js + GraphQL apps who need a reference implementation for server-side cookies and Prisma migrations.
• Hackathon participants who need a deployable app with login and a dashboard in under an hour.

What can you do with it?

• Fullstack developers: Add new data types by extending schema.prisma, migrating, and exposing them through the GraphQL typedefs in apollo/typedefs.js.
• Indie hackers: Deploy a prototype to Render with the one-click button and immediately start collecting user sign-ups.
• Learners: Study the codebase to see how JWT verification works inside resolvers using cookies parsed from incoming requests.

How does it work?

After cloning the repository, run yarn to install dependencies and yarn dev to start development. To change the data model, edit prisma/schema.prisma, run yarn migrate:save and yarn migrate:up, then yarn generate to regenerate the Prisma client. The authentication flow sets an httpOnly cookie on login, and subsequent server-side requests read that cookie automatically without client-side token handling.

Pros and cons

• Pros: Setup is fast, auth is included, Prisma gives type-safe database access, and Render deployment is zero-config.
• Cons: Local development uses SQLite, so you must provision a Postgres or MySQL database when deploying; the README notes Render starter plans cost $7 per month each (web service and Postgres instance) at the time of writing.

Alternatives

• create-t3-app — another TypeScript-first Next.js starter that includes tRPC, Prisma, and Tailwind CSS.

FAQ

Is GraphQL Fullstack Boilerplate free?

Yes, it is open source and can be cloned from GitHub. The only recurring costs come from hosting: the README states that Render web service starter plans and Postgres starter instances each cost $7 per month at the time of writing.

What stack does it use?

The stack is TypeScript throughout, Next.js for rendering and API Routes, Apollo Client (React Hooks) for GraphQL, Prisma 2 for database access and migrations, bcrypt and JWT for authentication, and Ant Design for UI components.

How do I add a new field to a data type?

Add a new property to the model in prisma/schema.prisma, like githubUrl String?, run the migration commands, then update the GraphQL type definition in apollo/typedefs.js and the query in your component. If the new field does not appear, run yarn generate to update the Prisma client.

Does it work in development with SQLite?

Yes, the development database is SQLite stored in a local file. For production, switch the datasource provider in schema.prisma to PostgreSQL and set a DATABASE_URL environment variable, then migrate again.

How long does deployment take?

The repository claims a full production-ready web application can be deployed in less than 60 seconds using the one-click Render deploy button.