Build Full-Stack Apps With Graphql, Prisma, Node And React

Learn GraphQL by building full-stack web applications with Prisma, NodeJs, Apollo Client v2, and React.Js

What you'll learn

Build highly scalable GraphQL APIS

Build frontend apps with React and Apollo client

Build and deploy full-stack web application from scratch

Requirements

Javascript Basics are required

NodeJs basics are required

Description

What Is GraphQL?GraphQL is a query language for your APIs. It’s also a runtime for fulfilling queries with your data.Who is this course for? This course is for most programmers. If you write software that fetches data from a server, or you write server code that provides data to others, this course is for you. It’s particularly relevant to frontend and backend web and mobile developers. This course will be especially poignant to these groups of people:Backend devs who work on REST APIs and write a lot of similar data-fetching code, or who maintain view-specific endpoints.Frontend devs of medium- or large-sized apps who either: A) don’t use a caching library, and manually keep track of what data has already been fetched from the server, or B) use a cache, and write a lot of code to fetch data over REST and put it in the cache.What are the drawbacks of REST?When GraphQL was first released, some touted it as a replacement to REST. “REST is dead!” early adopters cried, and then encouraged us all to throw a shovel in the trunk and drive our unsuspecting REST APIs out to the woods. This was great for getting clicks on blogs and starting conversations at conferences, but painting GraphQL as a REST killer is an oversimplification. A more nuanced take is that as the web has evolved, REST has shown signs of strain under certain conditions. GraphQL was built to ease the strain.”What will you learn?Introduction to Prisma :  Prisma is a performant open-source GraphQL ORM-like* layer doing the heavy lifting in your GraphQL server. Build GraphQL Server with Prisma: Introduces you how to build highly scalable GraphQL server with PrismaCURD In Prisma: You will learn to implement create, read, update and delete the recordCreate a Frontend CRUD App with React and Apollo Client : You will learn how to create, read, update and delete the record in React Application using Apollo ClientAuthentication in Prisma and GraphQL: In this module, I will teach you how to implement Json web token authentication in GraphQL and PrismaAuthentication in React Apollo Client Application: We will implement Authentication on React Application.Error Handling: I will teach you how to implement error handling in React and PrismaPagination in Prisma and React Apollo Application: This module covers the pagination feature on GraphQL and React applicationOptimistic UI In React Apollo Application: Introduces you how to improve the performance of React applicationDeploy Prisma and React Application to Heroku: You will learn how to deploy Prisma and React Application to HerokuSubscriptions in Prisma and React Apollo Application: Understand the real-time subscriptions by building chat applicationState Management in React Application using Apollo Link:  A modern way to manage state in Apollo client applicationFile Upload in Prisma and React: Learn how to upload a file in Prisma, GraphQL and React application

Overview

Section 1: Big Picture of Prisma

Lecture 1 What is Prisma

Lecture 2 Why Prisma

Lecture 3 What Prisma is not

Lecture 4 Who should use Prisma

Lecture 5 What platform and Cloud Providers Prisma work

Lecture 6 What are the benefits of GraphQL

Lecture 7 Prisma generates GraphQL API for your datamodel

Lecture 8 Connect your resolvers to Prisma API

Lecture 9 What is Prisma Query Engine

Lecture 10 What is DataModeling in Prisma

Lecture 11 What databases are supported by Prisma

Lecture 12 What is Prisma Cloud

Lecture 13 VS Code Setup

Lecture 14 Setting up Prisma

Section 2: Build GraphQL server with Prisma

Lecture 15 What is DataModel?

Lecture 16 Update Prisma Data Model

Lecture 17 Setup GraphQL server with Prisma

Lecture 18 Setup env variables for Primisa endpoint

Section 3: CRUD in Prisma

Lecture 19 Create Data Model in Prisma

Lecture 20 Fetch Records from Database

Lecture 21 Create, Update and Delete Record in Prisma

Section 4: Create Frontend CRUD App with React and Apollo Client

Lecture 22 Create React Application

Lecture 23 Create Apollo client in React Application

Lecture 24 Connect Apollo Client to React

Lecture 25 Fetch Data using Apollo Query Component

Lecture 26 Understanding render Prop pattern in React

Lecture 27 Creating Forms in React

Lecture 28 Send GraphQL Mutation from React Component

Lecture 29 Updating Apollo Cache After Mutation

Lecture 30 Adding Routing with React Router

Lecture 31 Render List items to Bootstrap card component

Lecture 32 Query for Single Record

Lecture 33 Edit Record using update Mutation

Lecture 34 Mutation for Delete Record in React Apollo

Section 5: Authentication in Prisma and GraphQL

Lecture 35 Restructure the resolver functions into separate folder

Lecture 36 Understanding JSON Web token Authentication

Lecture 37 Signup User in Prisma and GraphQL

Lecture 38 Login User in Prisma and GraphQL

Lecture 39 Apply Authentication on Resolvers

Section 6: Authentication in React Apollo Client Application

Lecture 40 Send Login Request from Frontend App

Lecture 41 Save Token to LocalStorage after LoggedIn

Lecture 42 Implement Logout User

Lecture 43 Require Authentication on Edit and Delete

Lecture 44 Implement Signup User on Frontend

Lecture 45 Protect Routes in React using React Router

Lecture 46 Add Authorization header to every request in React Apollo Client

Section 7: Error Handling

Lecture 47 Create Error Message Component to render Errors

Lecture 48 Adding Spinner for Loading Data

Section 8: Pagination in Prisma and React Apollo Application

Lecture 49 Paginate List fo records of Prisma

Lecture 50 Count all Records using Prisma Connection Query

Lecture 51 Create Pagination Controls in Frontend Application

Lecture 52 Implement Pagination in React Application

Lecture 53 Filtering Records in Prisma

Lecture 54 Create Search Course Component

Lecture 55 Execute Search Query and display courses

Lecture 56 Apply Sorting on the Records

Lecture 57 Update Cache after creating records

Lecture 58 Fix Cache after Delete Records

Section 9: Optimistic UI In React Apollo Application

Lecture 59 Improve UI Performance using Optimistic UI in React Apollo

Section 10: Deploy Prisma and React Application to Heroku

Lecture 60 Deploy Prisma Project to Heroku

Lecture 61 Deploy React Project to Heroku

Section 11: Subscriptions in Prisma and React Apollo Application

Lecture 62 GraphQL Subscription Project Setup

Lecture 63 Prisma Subscription Demo

Lecture 64 Creating Subscription in Prisma GraphQL Server

Lecture 65 Subscription in React using Apollo Client

Section 12: State Management in React Application using Apollo Link

Lecture 66 Setup Apollo Link State

Lecture 67 Fetch Records from Apollo State using Query

Lecture 68 Create Task Form Component

Lecture 69 Save new Record in Apollo Link State

Lecture 70 Update Cache using Fragments

Lecture 71 Filter Tasks on the based on Status Value

Section 13: File Upload in Prisma and React

Lecture 72 Setup Local Development Server with Prisma and Docker

Lecture 73 File Upload Demo with Prisma and React

Section 14: Bonus: React Fundamentals

Lecture 74 Create React App using create-react-app

Lecture 75 Creating React Element

Lecture 76 Creating Nested React Elements

Lecture 77 How React uses React Elements to Create Virtual DOM

Lecture 78 What is DOM

Lecture 79 What is Virtual DOM

Lecture 80 What are Components in React

Lecture 81 Create Component in React

Lecture 82 Adding Props Validations

Lecture 83 Create Nested Components in React

Lecture 84 Create State in React Component

Lecture 85 Update Component State using Events

Lecture 86 Iterate Array and render Components

Lecture 87 Pass Function Parent to Child Component

Lecture 88 Convert React Components to JSX

Lecture 89 State in React Component

Lecture 90 Shallow merging with setState

Lecture 91 Use Props PropTypes and default Props in React Component

Lecture 92 Create Stateless Component in React

Lecture 93 Communicate with Parent and Child Component

Lecture 94 What are LifeCycle Methods in React Component

Lecture 95 Types and Phases of LifeCycle Methods

Lecture 96 LifeCycle Mounting Methods in Action

Lecture 97 LifeCycle Updating Methods in Action

Lecture 98 Handling Errors with componentDidCatch

Section 15: Bonus: GraphQL Basics

Lecture 99 What is GraphQL

Lecture 100 What is GraphQL Query

Lecture 101 GraphQL Query Hackernews API

Lecture 102 Arguments in GraphQL Query

Lecture 103 Required Arguments in Query

Lecture 104 GraphQL Schema and Types

Lecture 105 Aliasis in GraphQL

Lecture 106 Fragmenets

Lecture 107 Nested Fields

Lecture 108 Operations in GraphQL

Lecture 109 Variables in GraphQL

Lecture 110 Create Mutations

Lecture 111 Directives in GraphQL

Section 16: Learning Path to become a full-stack developer

Lecture 112 Learning Path to Become a FullStack Developer

Javascript developers who want to build full-stack apps with GraphQL and React,Developers who want to learn Prisma and React Apollo Client,Developers who want to GraphQL in production