Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alan345/naperg
Fullstack Boilerplate GraphQL. Made with React & Prisma + authentication & roles
https://github.com/alan345/naperg
apollo apollo-client authentication expressjs full-stack fullstack fullstack-graphql fullstack-javascript graphql-database jwt jwt-authentication nodejs permissions prisma prisma-authentication prisma-cli prisma-client react reactjs server-graphql
Last synced: about 1 month ago
JSON representation
Fullstack Boilerplate GraphQL. Made with React & Prisma + authentication & roles
- Host: GitHub
- URL: https://github.com/alan345/naperg
- Owner: alan345
- License: mit
- Created: 2018-02-27T22:35:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-10T02:55:43.000Z (5 months ago)
- Last Synced: 2024-04-24T10:35:01.112Z (about 1 month ago)
- Topics: apollo, apollo-client, authentication, expressjs, full-stack, fullstack, fullstack-graphql, fullstack-javascript, graphql-database, jwt, jwt-authentication, nodejs, permissions, prisma, prisma-authentication, prisma-cli, prisma-client, react, reactjs, server-graphql
- Language: TypeScript
- Homepage:
- Size: 4.47 MB
- Stars: 739
- Watchers: 27
- Forks: 156
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-graphql - NAPERG - Fullstack Boilerplate GraphQL. Made with React & Prisma + authentication & roles. (Implementations / JavaScript/TypeScript)
- awesome-stars - alan345/naperg - Fullstack Boilerplate GraphQL. Made with React & Prisma + authentication & roles (TypeScript)
- awesome-stars - alan345/naperg - Fullstack Boilerplate GraphQL. Made with React & Prisma + authentication & roles (TypeScript)
README
Node Apollo Prisma Express React GraphQL
Boilerplate for a Fullstack GraphQL App with React & Prisma
🚀 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
[](https://github.com/alan345/naperg/issues)
[](https://github.com/alan345/naperg/network)
[](https://github.com/alan345/naperg/stargazers)
[](https://github.com/alan345/naperg/blob/master/LICENSE)
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CLPDWGN5UA4CU)
[](https://twitter.com/intent/tweet?text=Wow!:&url=https%3A%2F%2Fgithub.com%2Falan345%2Fnaperg)
## Screenshots
| Login | Signup |
| --------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
|  |  |
|  |  |
|  |  |
| |
## 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`](https://www.prisma.io/docs/concepts/components/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`](https://www.prisma.io/docs/concepts/components/prisma-migrate#do-not-edit-or-delete-migrations-that-have-been-applied)
```
npx prisma migrate reset
```
#### 3. Seed your Database
More info if needed: [`Prisma Seed`](https://www.prisma.io/docs/guides/application-lifecycle/seed-database/)
```
npx prisma db seed
```
A new user will be created from [`seed.ts`](https://github.com/alan345/naperg/blob/master/server/prisma/seed.ts#L6-L14) file.
- login: `[email protected]`
- pass: `admin`
- role: `ADMIN`
#### 4. Check you databse with Prisma Studio
More info if needed: [`Prisma Studio`](https://www.prisma.io/docs/concepts/components/prisma-studio)
```
$ npx prisma studio
```
#### 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`](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client)
```
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:
```sh
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:
- login: `[email protected]`
- pass: `admin`
- role: `ADMIN`
## Tutorial
[](https://www.youtube.com/watch?v=KhDNp8Aw3HM)
## Features
- **Scalable GraphQL server:** The server uses [`apollo-server`](https://www.apollographql.com/docs/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](https://github.com/prisma/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](https://www.howtographql.com/react-apollo/0-introduction/).
## Made with..
Typescript (https://www.typescriptlang.org/) for the Frontend and the Backend
Frontend:
- User interfaces: React https://reactjs.org/
- Design: material-ui-next https://material-ui.com/
- GraphQL tool: Apollo Client https://www.apollographql.com/
Backend:
- Server JS: ExpressJs https://expressjs.com/
- Server GraphQL: https://www.apollographql.com/docs/apollo-server/)
- ORM (object-relational mapping): Prisma https://www.prisma.io/
- Database sqlite: https://www.sqlite.org/index.html. You can replace by the database you want (PostgreSQL - MySQL - SQLite - SQL Server). Check the prisma documentation https://www.prisma.io/docs/concepts/
# 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
- [NachoNacho, the BtoB SaaS marketplace for subscriptions](https://nachonacho.com)
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 :)
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CLPDWGN5UA4CU)