DEV Community

Cover image for React, Prisma, GraphQL Boilerplate
Médéric Burlet
Médéric Burlet

Posted on • Edited on

6 2

React, Prisma, GraphQL Boilerplate

Introduction

I find myself often recreating simple landing pages, login, logout, signup flows and I got really tired of it. Especially when its for small projects.

I decided to make a nice easy to use boilerplate accessible for all.

GitHub logo crimson-med / react-prisma2-graphql-boilerplate

Simple React, Prisma2, GraphQL, Boilerplate

This project is open to Hacktoberfest contributions as long as the CONTRIBUTING.md is respected.

Quick Start

First:

git clone https://github.com/crimson-med/react-prisma2-graphql-boilerplate.git
Enter fullscreen mode Exit fullscreen mode

Then follow the following instructions.

Open two terminals and follow the following commands:


Terminal 1 Terminal 2
cd backend cd frontend
yarn install yarn install
yarn dev yarn start

That's it you are up and running!

Frontend

In this frontend we leverage React for all the rendering. We also user OvermindJS for state management and ApolloClient for GraphQL interactions.

Backend

An implementation of a GraphQL server with an email-password-based authentication workflow and authentication rules, based on Prisma, graphql-yoga, graphql-shield & Nexus Schema. It is based on a SQLite database.

Since we are using prisma the database can easily be switched to anything (postgre, mysql, etc.)

Screenshots:

Homepage:

homepage

Login:

login

Signup:

signup

Dashboard:

dashboard


Burlet Mederic
https://medericburlet.com
https://mederic.me
https://twitter.com/crimson_med

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (2)

Collapse
 
olivia101 profile image
Cristian

Blitz.js has login, logout, signup flows built in. Check it out at blitzjs.com/

Collapse
 
crimsonmed profile image
Médéric Burlet

Thanks however I was looking to use graphql. As of now blitz uses its own system for handling field only.I was also looking to have my own state management for various management hence OvermindJS which I really enjoy working with.

Blitz is a really nice framework but that wasn't really needed for what I was trying to do.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay