How to Build a React Header With a React Log Out Mutation

Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

This video is available to students only

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

Module 1: Introduction

Introduction:

Start Here

Introduction: (1:55)

Part Two Welcome

Introduction: (15:10)

The TinyHouse App

Introduction: (12:17)

Walkthrough of TinyHouse Code

Introduction: (10:54)

Code Patterns & Behavior

Introduction: (16:39)

How To Go Through The Course

Module 2: Set-up for Part 2

Lesson 1: (2:51)

Set-up For Part II

Module 3: Routing in TinyHouse

Introduction: (0:33)

Module 2 Introduction

Lesson 1: (6:14)

Server-side vs Client-Side Routing in a Web Application

Lesson 2: (7:26)

Build Web App Navigation With React Router and BrowserRouter

Module 4: Setting up our Database

Introduction: (1:05)

Module 3 Introduction

Lesson 1: (5:16)

How to Build MongoDB Database Collections in React

Lesson 2: (15:17)

Build a MongoDB Document Schema: Examples and Best Practices

Lesson 3: (8:27)

How to Build a Seed Function to Add Data to MongoDB

Module 5: User Authentication with Google Sign-In & OAuth 2.0

Introduction: (0:52)

Module 4 Introduction

Lesson 1: (4:36)

How Does OAuth 2.0 Work? [with diagrams and examples]

Lesson 2: (4:49)

How to Get Google Access Credentials for OAuth Authentication

Lesson 3: (4:50)

The GraphQL Document Fields Needed for Google Sign-In

Lesson 4: (8:30)

Using Google Auth and People API With React and GraphQL

Lesson 5: (18:55)

Build GraphQL Authentication Resolvers for Google Auth

Lesson 6: (11:35)

How to Build a Custom Google Sign-In UI in React

Lesson 7: (22:35)

How to Query Google Sign-In Authentication URL From a Client

Lesson 8: (18:05)

Lesson 9: (6:02)

Module 4 Summary

Module 6: Persist Login Sessions with Cookies

Introduction: (0:55)

Module 5 Introduction

Lesson 1: (2:39)

How to Store Persistent Google Sign-In Sessions With Cookies

Lesson 2: (5:32)

sessionStorage vs localStorage vs Cookies for Secure Storage

Lesson 3: (11:05)

Using NPM cookie-parser to Read Cookies in React

Lesson 4: (8:19)

How to Use a Viewer Cookie to Automatically Log In a User

Lesson 5: (8:50)

Prevent Cross-Site Request Forgery Attacks With X-CSRF Token

Lesson 6: (4:09)

Module 5 Summary

Module 7: Building the User Page

Introduction: (0:53)

Module 6 Introduction

Lesson 1: (2:23)

Building a GraphQL Query to Fetch User Account Data Fields