https://github.com/en-atul/notebook

Notes-taking 📘 app with optimistic UI updates developed using NestJS, GraphQL, JWT-Authentication (i.e. Access Token & Refresh Token), React, and Apollo-Client.
https://github.com/en-atul/notebook

apollo-client apollo-server apollo-server-express backend express graphql jwt jwt-authentication nestjs prisma reactjs reactquery typescript

Last synced: about 1 month ago
JSON representation

Notes-taking 📘 app with optimistic UI updates developed using NestJS, GraphQL, JWT-Authentication (i.e. Access Token & Refresh Token), React, and Apollo-Client.

• Host: GitHub
• URL: https://github.com/en-atul/notebook
• Owner: en-atul
• Created: 2023-01-22T19:09:51.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-25T21:35:32.000Z (almost 3 years ago)
• Last Synced: 2025-02-19T14:03:33.528Z (12 months ago)
• Topics: apollo-client, apollo-server, apollo-server-express, backend, express, graphql, jwt, jwt-authentication, nestjs, prisma, reactjs, reactquery, typescript
• Language: TypeScript
• Homepage:
• Size: 10.3 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

          
# Notebook (Notes taking app)

Developed using Nestjs, GraphQL, Prisma, Docker, ReactJS, Apollo/Client.

## Backend

#### Stack:

- NestJS

- GraphQL

- Passport

- graphql-subscriptions

- Prisma

- Docker

- Postgresql

##### features:

1. Jwt authentication/authorization

2. _CRUD_ Note

3. realtime update using graphql-subscriptions

4. refresh token

5. **_subscriptions-transport-ws_** authentication

6. **_graphql-ws_** authentication

### Steps to run backend

- `npm run docker:up` (in case you don't want to use docker, then please replace the `DATABASE_URL` in server/.env)

- `npm install`

- `npm run start:dev`

#### DB Data Visualize

`npx prisma studio`

![DB Visualize](screenshots/prisma.gif?raw=true "Prisma DB Visualize")

#### Realtime Data using GraphQL-Subscription

![Realtime Data](screenshots/subscriptions.gif?raw=true "GraphQL Realtime Data")

## Frontend Stack

- ReactJS

- GraphQL

- Typescript

- Apollo/Client

### Steps to run frontend

- `npm install`

- `npm start`

> Signup

![SignUp](screenshots/signup.png?raw=true "Sign Up")

> Login

![Login](screenshots/login.png?raw=true "Login")

> Note Action Popup

![Note Action Popup](screenshots/note-action.png?raw=true "Action popup")

> Logout Popup

![Logout Popup](screenshots/logout.png?raw=true "Logout Popup")