Wes Bos – Advanced React and GraphQL (2021)
English | Size: 2.39 GB
Category: Tutorial
Updated 2021 – The course has been entirely updated and re-recorded for the latest in React.js, Hooks, Apollo 3 and the Keystone Headless CMS.
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, Next.js, 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.
Together we will build “Sick Fits”, a full stack online clothing store complete with real credit checkout. Users can search, sell, add to cart and checkout their favourite items.
The application has six main models – Users, Items, Orders, CartItems, OrderItems, and Roles – all of which are relational and showcase the power of relational GraphQL Queries.
The app also includes many server side bits including authentication, permissions, sending email, uploading images, and charging credit cards.
In addition to building both the frontend and backend of the application, we also spend the last section of the course Testing the React application.
What is GraphQL?
GraphQL Example Query
GraphQL is a type-safe query language for APIs and a runtime for fulfilling those queries with your existing data.
What?! It’s a replacement for (or addition to) your REST API and Ajax Calls.
GraphQL requires buy-in from both your client and your server – it then puts the power of requesting only what you want into the client and the business logic of finding and filtering that data into backend resolvers.
Specifically in this course it enables libraries that make caching, loading, error handling and pagination a breeze
Complex Relational Data queries and server-side mutations like signing up or checking-out are a snap with GraphQL.
GraphQL is just a standard and can be implemented in any language or framework.
Wes Bos
Meet Wes Bos
Wes Bos is a Full Stack Developer, Speaker and Teacher from Canada. He is a course creator, works as an independent web developer and is the co-host of Syntax – a popular web development podcast. Wes has taught over 500 students in 200+ classes and spoken at dozens of conferences around the world. Wes wrote his own bio in the third person for some reason.
Wes is the author of React For Beginners, BeginnerJavaScript.com, Learn Node and many other courses which together have sold over 100,000 copies. He is also the author of JavaScript30.com, CSSGrid.io, Flexbox.io and Command Line Power User, a set of free video series. 300,000 people have taken at least one of Wes’ free video courses.
Follow @wesbos
Who is this for?
Web developers who want to expand their JavaScript, React and Node skills while learning all about GraphQL.
You should be already familiar with the basics of React – components, state, props, modules and event handlers. If you have taken my React For Beginners course or built a few things in React, you are in good shape.
You should be comfortable with both writing and debugging modern JavaScript including arrow functions, classes, promises, async+await and other commonly used parts of ES6. You of course can take my ES6 for Everyone or Beginner JavaScript to skill up on this!
The backend of the course is written in Node. Prior node knowledge is nice, but not required for this course as you should be able to keep up no problem. You can take Learn Node if you’d like to learn more.
This course requires no knowledge of GraphQL, Keystone, Databases, or testing React components
Anyone looking to learn the whys and hows of GraphQL
Web developers who want to get better at JavaScript
JS developers looking to advance their skills and career
Bootcamp Graduates (see the FAQ for a student discount!)
Front End Devs looking to go Full Stack
Existing Node.js developers looking to learn how GraphQL works with Node
Anyone who wants to get better at JavaScript and learns well from seeing both fundamental and advanced concepts in practice.
Not sure if it’s for you?
100% money back if you don’t think it’s a good fit 💰
Covered Concepts
In each video, we learn and implement a concept into our application. Many of the concepts we return to over and over for different parts of the application, hitting and solving new problems each time.
As we build an entire full-stack application, this course covers a ton. Along with general JavaScript best practices, here are some of the things you can expect to learn:
React Best Practices
Custom Hooks
Server Side Rendering
Styled Components
Theming
Routing
GraphQL Schema
Queries and Mutations
Authentication
Resolvers
Cache Management
Loading and Error States
Sending Email
Logic and Flow with Async + Await
Authentication and Permissions
Charging Credit Cards
Hosting and Transforming Images
Pagination
Forms in React
Animations
Third party React Components
Unit Testing
Mocking Components
Deployment
👌 Video pacing is just right
fast enough to keep you interested without passing by or assuming any details.
Seriously, it won’t put you to sleep – I’m even funny sometimes.
11+Modules
70+Videos
13Hours Building App
5Hours Testing
…and 176,941 words provided with the videos captions
Incremental, Referenceable and Easy To Digest
Videos && Modules
Each video breaks down a specific part of building a Node application and allows for quick referencing in the future. You can binge watch them all today or do a few each day during your lunch or on your commute.
Closed Captioning and Transcripts are provided for every video
Module 1
Introduction and Setup
#1 – Tooling and Starter Files Setup (09:33)
#2 – The Tech Stack Explained (07:42)
Module 2
Learning Next.js
#3 – An intro to Next (08:53)
#4 – Creating a Page Layout Component (18:12)
#5 – Creating our Header and Nav Components (07:49)
Module 3
CSS and Styled Components
#6 – An Intro to Styled Components and CSS (11:52)
#7 – Global Styles, Typography and Layout Styles (10:17)
#8 – Visualizing Route Changes (06:21)
#9 – Fixing Styled Components Flicker on Server Render (06:30)
Module 4
Server Side GraphQL Development
#10 – Setting up MongoDB (13:02)
#11 – An Intro to GraphQL (06:51)
#12 – Setting up Keystone and Typescript (11:28)
#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 (07:59)
#17 – Creating two way data relationships in Keystone (06:39)
#18 – Inserting Seed Data (07:39)
Module 5
Client Side React + GraphQL Development
#19 – Setting up Apollo Client (18:35)
#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:13)
#23 – Hooking up our File input and Form Styles (10:41)
#24 – Creating Products via our Mutations (17:29)
#25 – Refetching Queries after a Successful Mutation (05:17)
#26 – Programmatically Changing the Page after product creation (02:37)
#27 – Displaying Single Items, Routing and SEO (25:57)
Module 6
Working with Mutations
#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:43)
Module 7
Pagination
#32 – Pagination Links (17:04)
#33 – Pagination Dynamic Routing (11:14)
#34 – Adjusting our Query for Pagination Values (04:43)
#35 – Custom Type Policies and Control over the Apollo Cache (26:32)
Module 8
User Registration + Authentication
#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:26)
#40 – Password Reset – Requesting a Reset (08:48)
#41 – Password Reset – Setting a new Password (14:11)
#42 – Password Reset – sending the email (17:32)
Module 9
Shopping Cart Development
#43 – Cart – Creating the Data Type and Two Way Relationships (06:46)
#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:54)
#48 – Cart – Animating the Cart Cart Value (12:18)
#49 – Cart – Remove From Cart Button (05:58)
#50 – Cart – Evicting Cart Items from the Cache (05:02)
Module 10
Search
#51 – Search (30:29)
Module 10
Order Creation and Checkout
#52 – Setting Up our Stripe Checkout (11:23)
#53 – Writing our Client Side Checkout Handler Logic (12:38)
#54 – Creating our Order and OrderItem Data Types (10:27)
#55 – Custom Checkout Mutation with Stripe (17:46)
#56 – Linking up our Frontend to the custom backend checkout mutation (06:49)
#57 – Creating our Order and OrderItems in our Mutation (09:04)
#58 – Finishing up the Checkout UI and Flow (10:03)
Module 11
Frontend Order Displaying
#59 – Displaying a Single Order (10:57)
#60 – Displaying All Orders (12:48)
Module 11
Roles, Permissions and Restricting Access
#61 – Roles and Permissions – A Primer (03:29)
#62 – Creating the Roles and Permissions Schema + UI (07:03)
#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:08)
#68 – User and Field Based Permissions (05:14)
#69 – Product Image Permissions (01:26)
#70 – Creating a Gated Sign In Component (03:13)
RAPIDGATOR
rapidgator.net/file/4786462c33e50f064d33b0bf22e4514e/Fullstack_Advanced_React_&_GraphQL.part1.rar.html
rapidgator.net/file/bdc1c17adb224eb8cae1884b0834e3df/Fullstack_Advanced_React_&_GraphQL.part2.rar.html
rapidgator.net/file/435f8ed87c5120b47ba3e5a95ed592e6/Fullstack_Advanced_React_&_GraphQL.part3.rar.html
rapidgator.net/file/5679258ac63383724eaacba7e2a1e0c3/Fullstack_Advanced_React_&_GraphQL.part4.rar.html
NITROFLARE
nitroflare.com/view/B522BBF81F782F3/Fullstack_Advanced_React_%26_GraphQL.part1.rar
nitroflare.com/view/BEB2AD9AA4BB550/Fullstack_Advanced_React_%26_GraphQL.part2.rar
nitroflare.com/view/DA8A7E3DFA120A9/Fullstack_Advanced_React_%26_GraphQL.part3.rar
nitroflare.com/view/AF0096F0168AB21/Fullstack_Advanced_React_%26_GraphQL.part4.rar