Full Stack Advanced React + GraphQL

15h 43m 10s
English
Paid

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.

About the Author: wesbos

wesbos thumbnail
I'm a web developer, teacher and speaker from Hamilton, Ontario. I'm 33 years old and I've been making websites for about 21 years!

Watch Online 83 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 83 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Tooling and Starter Files Setup
All Course Lessons (83)
#Lesson TitleDurationAccess
1
Tooling and Starter Files Setup Demo
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
Unlock unlimited learning

Get instant access to all 82 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription