Full Stack Advanced React & GraphQL

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 83 lectures (15h 42m) | 3.31 GB

Advanced React and GraphQL – Build Full Stack Applications with React and GraphQL

Just as React has transformed the way we build web applications, GraphQL is changing how we build APIs to query and mutate data.

With a focus on modern JavaScript and real world application, this course is a start-to-finish way to learn Full Stack Advanced React, Next.js, GraphQL, Node.js and friends.

Join me as I show you how to build a full stack online store with some of today’s top JavaScript technology.

Together we will build “Sick Fits”, a full stack online clothing store complete with real credit checkout. Users can search, sell, add to cart and checkout their favourite items.

The application has six main models — Users, Items, Orders, CartItems, OrderItems, and Roles — all of which are relational and showcase the power of relational GraphQL Queries.

The app also includes many server side bits including authentication, permissions, sending email, uploading images, and charging credit cards.

In addition to building both the frontend and backend of the application, we also spend the last section of the course Testing the React application.

The Tech Stack of our Application

React.js

For Building The Interface along with:

• Next.js for server side rendering, routing and tooling
• Styled Components for styling
• Context for Managing Local State
• Apollo’s React Hooks for interfacing with Apollo Client
• Jest & React Testing Library for Testing

Apollo Client

For Data Management

• Performing GraphQL Mutations(create, update, delete)
• Fetching data via GraphQL Queries
• Caching GraphQL Data
• Error and Loading UI States
• Apollo Client replaces the need for redux + data fetching/caching libraries

Keystone.js

A Node.js based GraphQL Server + Headless CMS For:

• Admin Interface to manage data
• Provides a set of GraphQL CRUD APIs for a MongoDB or Prisma Database
• Schema Definition
• Data Relationships
• Open Source + Self-hosted
• Built with Node.js, React + Next.js
• Implementing Query and Mutation Resolvers
• Custom Server Side Logic
• Charging Credit Cards with Stripe
• Sending Email
• Performing Authentication
• Managing + Checking Roles + Permissions

GraphQL is a type-safe query language for APIs and a runtime for fulfilling those queries with your existing data.

What?! It’s a replacement for (or addition to) your REST API and Ajax Calls.

GraphQL requires buy-in from both your client and your server — it then puts the power of requesting only what you want into the client and the business logic of finding and filtering that data into backend resolvers.

Specifically in this course it enables libraries that make caching, loading, error handling and pagination a breeze

Complex Relational Data queries and server-side mutations like signing up or checking-out are a snap with GraphQL.

GraphQL is just a standard and can be implemented in any language or framework.

Covered Concepts

In each video, we learn and implement a concept into our application. Many of the concepts we return to over and over for different parts of the application, hitting and solving new problems each time.

As we build an entire full-stack application, this course covers a ton. Along with general JavaScript best practices, here are some of the things you can expect to learn:

• React Best Practices
• Custom Hooks
• Server Side Rendering
• Styled Components
• Theming
• Routing
• GraphQL Schema
• Queries and Mutations
• Authentication
• Resolvers
• Cache Management
• Loading and Error States
• Sending Email
• Logic and Flow with Async + Await
• Authentication and Permissions
• Charging Credit Cards
• Hosting and Transforming Images
• Pagination
• Forms in React
• Animations
• Third party React Components
• Unit Testing
• Mocking Components
• Deployment

Table of Contents

1 Tooling and Starter Files Setup
2 The Tech Stack Explained
3 An intro to Next
4 Creating a Page Layout Component
5 Creating our Header and Nav Components
6 An Intro to Styled Components and CSS
7 Global Styles, Typography and Layout Styles
8 Visualizing Route Changes
9 Fixing Styled Components Flicker on Server Render
10 Setting up MongoDB
11 An Intro to GraphQL
12 Setting up Keystone and Typescript
13 Creating our first User data type
14 Adding Auth to our Application
15 Creating our Products Data Type
16 Uploading Product Images
17 Creating two way data relationships in Keystone
18 Inserting Seed Data
19 Setting up Apollo Client
20 Fetching Data with hooks and Displaying it in our Front End
21 Fixing and Styling the Nav
22 A real good lesson in React Forms and Custom Hooks
23 Hooking up our File input and Form Styles
24 Creating Products via our Mutations
25 Refetching Queries after a Successful Mutation
26 Programmatically Changing the Page after product creation
27 Displaying Single Items, Routing and SEO
28 Updating Items
29 Using useEffect to deal with a tricking loading state issue
30 Deleting Products
31 Evicting Items from the Apollo Cache
32 Pagination Links
33 Pagination Dynamic Routing
34 Adjusting our Query for Pagination Values
35 Custom Type Policies and Control over the Apollo Cache
36 Querying The Current User
37 Creating a Sign In Component
38 Creating a Sign Out Component
39 Creating our Sign Up Flow
40 Password Reset – Requesting a Reset
41 Password Reset – Setting a new Password
42 Password Reset – sending the email
43 Cart – Creating the Data Type and Two Way Relationships
44 Cart – Displaying Items in a Custom Component
45 Cart – Using Recat Context for our Cart State
46 Cart – Adding Items to Cart
47 Cart – Adding Items To Cart in React
48 Cart – Animating the Cart Cart Value
49 Cart – Remove From Cart Button
50 Cart – Evicting Cart Items from the Cache
51 Search
52 Setting Up our Stripe Checkout
53 Writing our Client Side Checkout Handler Logic
54 Creating our Order and OrderItem Data Types
55 Custom Checkout Mutation with Stripe
56 Linking up our Frontend to the custom backend checkout mutation
57 Creating our Order and OrderItems in our Mutation
58 Finishing up the Checkout UI and Flow
59 Displaying a Single Order
60 Displaying All Orders
61 Roles and Permissions – A Primer
62 Creating the Roles and Permissions Schema + UI
63 Basic Access Control via Sessions
64 Permissions Access Functions
65 More Flexible Rule Based Functions
66 Getting Meta – Roles based Roles and Hiding UI
67 Cart and Order based Rules
68 User and Field Based Permissions
69 Product Image Permissions
70 Creating a Gated Sign In Component
71 Test Setup, Tooling and Methodology
72 Testing Basics
73 Testing our formatMoney function
74 React Testing Library
75 Snapshot Testing
76 More on Testing Library Queries
77 Mocking GraphQL Data Requests
78 Updating Props and re-rendering
79 Testing Signed in and Signed out Nav States
80 Pagination Testing
81 Testing User Events and Mutations
82 Testing Password Reset Component
83 Mocking 3rd Party Libraries

Homepage