Full Stack Advanced React + GraphQL

15h 43m 10s
English
Paid
May 18, 2023

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, 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.

Watch Online Full Stack Advanced React + GraphQL

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

Similar courses to Full Stack Advanced React + GraphQL

Building Applications with React 17 and ASP.NET Core 6

Building Applications with React 17 and ASP.NET Core 6

Duration 19 hours 28 minutes 31 seconds
MERN React Node Next.js Multi User SEO Blogging Platform

MERN React Node Next.js Multi User SEO Blogging Platform

Duration 20 hours 25 minutes 13 seconds
PHP Symfony 4 API Platform + React.js Full Stack Masterclass

PHP Symfony 4 API Platform + React.js Full Stack Masterclass

Duration 19 hours 24 minutes 17 seconds
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

React, NodeJS, Express & MongoDB - The MERN Fullstack Guide

Duration 18 hours 45 minutes 10 seconds
Next.js 14 & React - The Complete Guide

Next.js 14 & React - The Complete Guide

Duration 36 hours 13 minutes 15 seconds
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Duration 28 hours 38 minutes 19 seconds
Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Full Stack HATEOAS: Spring Boot 2.1, ReactJS, Redux

Duration 5 hours 51 minutes 37 seconds