Fullstack Advanced
React & GraphQL

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)

Deployment + Testing Videos Coming Shortly!