Course Description

Fullstack Advanced React & GraphQL 2021

Salepage : Fullstack Advanced React & GraphQL 2021

 3.31 GB

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.

For a full list of topics covered, see below.

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)

Module 12

Testing

– 71 – Test Setup, Tooling and Methodology (07:40)

– 72 – Testing Basics (10:51)

– 73 – Testing our formatMoney function (07:03)

– 74 – React Testing Library (15:38)

– 75 – Snapshot Testing (06:11)

– 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:23)

– 81 – Testing User Events and Mutations (17:17)

– 82 – Testing Password Reset Component (07:11)

– 83 – Mocking 3rd Party Libraries (23:32)

Related to Fullstack Advanced React & GraphQL 2021