Full Stack Advanced React + GraphQL

15h 43m 10s
English
Paid

Course description

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

GraphQL for beginners with JavaScript

GraphQL for beginners with JavaScript

Sources: udemy
Obviously, you should use the right tool for the job, right? ... but often, what was the “right” tool, becomes the inferior tool, and frequently you
5 hours 35 minutes 31 seconds
React Hooks

React Hooks

Sources: ui.dev (ex. Tyler McGinnis)
If you never develop a convincing answer for both of those questions, you won’t have a solid enough foundation to build upon when you dive into the specifics. These questions ar...
3 hours 47 minutes 48 seconds
Data fetching with React Server Components

Data fetching with React Server Components

Sources: Build UI
Since its release 10 years ago, React's core APIs have remained surprisingly stable. The original component boundary that supports state and lifecycle methods still works to thi...
1 hour 15 minutes 56 seconds
Zero to Full Stack Hero

Zero to Full Stack Hero

Sources: papareact.com
PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY. From learning the Basics of Web Development to Mastering React!
101 hours 29 minutes 59 seconds