CF

Full Stack Advanced React + GraphQL

15h 43m 10s
English
Paid

As React has revolutionized the development of web applications, GraphQL is reshaping the way we create APIs for data querying and mutation. This course focuses on modern JavaScript and real-world applications, providing a comprehensive guide to mastering Full Stack Advanced React, GraphQL, Node.js, and related technologies. Embark on this journey to learn how to build a full stack online store using today's cutting-edge JavaScript tools.

What You Will Learn

This course offers detailed insights and practical experience in:

  • Creating dynamic and responsive user interfaces with Advanced React.
  • Designing scalable and efficient APIs using GraphQL.
  • Implementing server-side operations with Node.js.
  • Integrating modern databases and handling data persistency.
  • Deploying a full stack web application from development to production.

Course Features

Hands-on Projects

Engage in real-world projects that mimic industry-level challenges, focusing on building functional online stores.

Expert Guidance

Learn from experienced instructors who provide personalized feedback and insights throughout the course.

Comprehensive Curriculum

The course is structured to cover every aspect of full stack development, ensuring a robust understanding of each component.

Who Should Take This Course?

This course is ideal for:

  • Developers looking to dive into full stack development with React and GraphQL.
  • JavaScript enthusiasts eager to expand their knowledge of modern frameworks and libraries.
  • Professionals aiming to build scalable and efficient web applications.

Additional

https://github.com/wesbos/Advanced-React/

About the Author: Wes Bos

Wes Bos thumbnail

Wes Bos is a Canadian full-stack developer, podcaster, and one of the most widely followed teachers in the JavaScript ecosystem. He runs his eponymous online course catalog at wesbos.com and co-hosts Syntax, the long-running web-development podcast. His teaching style — short, dense, project-based screencasts paired with downloadable starter files — set the template that most modern coding-course creators now follow.

The catalog mirrored under this source covers the surface area Wes is best known for: ES6 for Everyone (the canonical introduction to modern JavaScript syntax for a generation of front-end engineers), Master Gatsby, Learn Node (Node.js with MongoDB), and Full Stack Advanced React + GraphQL. The material is paid and aimed at developers who already know the basics and want a focused, working-engineer's tour through a specific stack rather than a beginner walkthrough.

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

Related courses

Frequently asked questions

What is Full Stack Advanced React + GraphQL about?
As React has revolutionized the development of web applications, GraphQL is reshaping the way we create APIs for data querying and mutation. This course focuses on modern JavaScript and real-world applications , providing a comprehensive…
Who teaches this course?
It is taught by Wes Bos. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 83 lessons with a total runtime of 15 hours 43 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/full-stack-advanced-react-graphql. The page hosts every lesson with the integrated video player; no download is required.