Awesome Open Source
Awesome Open Source
Node Apollo Prisma Express React GraphQL
 

Boilerplate for a Fullstack GraphQL App with React & Prisma


naperg

🚀 Bootstrap your fullstack GraphQL app within seconds
Basic starter kit for a fullstack GraphQL app with React and Node.js - based on best practices from the GraphQL community.

Project

GitHub issues GitHub forks GitHub stars GitHub license price paypal

Twitter

Screenshots

Login Signup
image image
image image
image image

Getting started

1. Clone the repo to your computer

git clone https://github.com/alan345/naperg/

2. Go the the repo

cd naperg

Server

1. Install the server - # Prisma & Graphql (port 4000)

cd server
yarn

2. migrate the database with Prisma migrate run:

More info if needed: Prisma Migrate

npx prisma migrate dev

Pick a name for your first migration. Example "init"

> npx prisma migrate dev
Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "dev.db" at "file:./dev.db"

SQLite database dev.db created at file:./dev.db

✔ Name of migration … init
The following migration(s) have been created and applied from new schema changes:

migrations/
  └─ 20210227221806_init/
    └─ migration.sql

✔ Generated Prisma Client (2.17.0) to ./node_modules/@prisma/client in 71ms

Everything is now in sync.

To reset your database if needed, use Prisma Reset.

More info if needed: Prisma Reset

npx prisma migrate reset

3. Seed your Database

More info if needed: Prisma Seed

npx prisma db seed

A new user will be created from seed.ts file.

4. Check you databse with Prisma Studio

More info if needed: Prisma Studio

$ npx prisma studio

image

5. Generate the prisma client

Prisma Client is an auto-generated database client that's tailored to your database schema.

More info if needed: Prisma Generate

npx prisma generate

6. Start the server (http://localhost:4000)

yarn start

Frontend

1. Install the frontEnd - ReactJs (port 3000). In a new terminal run:

cd react
yarn

2. Start the frontend.

yarn start

3. Go to url: http://localhost:3000

4. Log in to the app with whis Admin User:

Tutorial

Tutorial Naperg

Features

  • Scalable GraphQL server: The server uses apollo-server
  • Pre-configured Apollo Client: The project comes with a preconfigured setup for Apollo Client
  • Tooling: Out-of-the-box support for GraphQL Playground
  • Extensible: Simple and flexible data model – easy to adjust and extend
  • Search with GraphQL: Example to search in 2 fields for the users: Email and name
  • Signup management:
    • Check password strength

For a fully-fledged React & Apollo tutorial, visit How to GraphQL.

Made with..

Typescript (https://www.typescriptlang.org/) for the Frontend and the Backend

Frontend:

Backend:

Contributing

  • Your feedback is very helpful, please share your opinion and thoughts! If you have any questions or want to contribute yourself, don't hesitate!

  • Tests must be implemented. Feel free to create a PR :)

  • Add a star to this Repo! It helps a lot!

Who is using Naperg

Create a PR if you are using Naperg and want to add your link here

Buy me a drink!

If this project help you reduce time to develop, you can give me a cup of coffee :)

paypal


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (244,967
Reactjs (70,095
Reactjs (70,095
Nodejs (53,306
Expressjs (6,912
Authentication (3,811
Jwt (3,450
Jwt Authentication (1,396
Full Stack (1,363
Full Stack (1,363
Apollo (1,275
Apollo Client (824
Permissions (667
Prisma (428
Fullstack Javascript (141
Related Projects