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 prerequisites are necessary before enrolling in this course?
Before enrolling, students should have a solid understanding of JavaScript and some experience with front-end development. Familiarity with React is recommended, as the course builds on advanced concepts. Basic knowledge of Node.js and web development principles will be beneficial for understanding the full stack development process covered in the course.
What is the main project built during the course?
The main project in the course is a functional online store. Students will gain experience by designing and implementing a full stack application using React for the front end, GraphQL for API design, and Node.js for server-side operations. The project involves creating and managing user accounts, products, and orders, and integrates with payment systems using Stripe.
Who is the target audience for this course?
This course is designed for developers who want to deepen their knowledge in full stack development using modern JavaScript frameworks like React and GraphQL. It also suits JavaScript enthusiasts looking to expand their skills in building scalable web applications. The course assumes a foundational understanding of JavaScript and web development.
How does this course compare in depth and scope to other similar courses?
This course offers a comprehensive curriculum that covers both front-end and back-end development, focusing on React, GraphQL, and Node.js. Unlike some courses that may only cover individual components, this course provides a holistic approach to full stack development, including database integration, user authentication, and deployment processes.
What specific tools and platforms are taught in the course?
The course covers a variety of tools and platforms essential for full stack development. It includes instruction on using Next.js for server-side rendering, Styled Components for CSS management, MongoDB for database integration, and KeystoneJS for building scalable APIs. Additionally, the course teaches Apollo Client for data fetching and Stripe for payment processing.
What topics are not covered in this course?
The course does not cover foundational JavaScript or basic React concepts in detail, as it is designed for those with prior experience. It also does not delve into mobile app development or non-JavaScript-based back-end technologies. The focus remains on web application development using specific tools like React, GraphQL, and Node.js.
What is the time commitment required for this course?
The course consists of 83 lessons with a total runtime of approximately 15 hours and 43 minutes. To fully engage with the material, including hands-on projects and exercises, students should anticipate dedicating additional time outside of the video lessons to practice and solidify their understanding of the concepts taught.