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
Watch Online Full Stack Advanced React + GraphQL
0:00
 / #1: Tooling and Starter Files Setup
 All Course Lessons (83)
| # | Lesson Title | Duration | Access | 
|---|---|---|---|
| 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 subscriptionComments
0 commentsSimilar courses

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!
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
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
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 
Want to join the conversation?
Sign in to comment