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

Watch Online Full Stack Advanced React + GraphQL

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

REACT ROUTER (v6)

REACT ROUTER (v6)

Sources: ui.dev (ex. Tyler McGinnis)
There’s an easier way to master React Router. Our linear course is like having a smart, experienced friend sit down next to you, walk you through each concept, and apply what yo...
3 hours 15 minutes 27 seconds
Crash Course: Build a Full-Stack Web App in a Weekend!

Crash Course: Build a Full-Stack Web App in a Weekend!

Sources: udemy
Do you want to learn the fundamentals of modern web development fast? Do you want to find out if building websites and apps is the right career path for you? Or maybe you just w...
12 hours 13 minutes 30 seconds
Build a Spotify Connected App

Build a Spotify Connected App

Sources: fullstack.io
Learn how to build a full stack web app to visualize personalized Spotify data with the help of Node.js, React, Styled Components, and the Spotify Web API.
3 hours 47 minutes 28 seconds
My first Remix app

My first Remix app

Sources: Build UI
Remix is a modern full-stack React framework built on the foundations of the web platform. It layers the latest innovations in the frontend ecosystem on top of the core URL-base...
5 hours 44 seconds