\newline

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

Go Pro

This video is available to students only

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)

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

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

Lesson 2: (10:47)

How to Modify GraphQL Type Definitions to Support TypeScript

Lesson 3: (21:38)

How to Build Paginating GraphQL Resolvers [with examples]

Lesson 4: (23:01)

How to Build a UserProfile Component With React and GraphQL

Lesson 5: (42:50)

Build User Profile Pages With GraphQL, Ant Design, & Apollo

Lesson 6: (7:20)

Module 6 Summary

Module 8: Building the Listing Page

Introduction: (0:33)

Module 7 Introduction

Lesson 1: (2:20)

Requesting a Single Set of GraphQL Fields

Lesson 2: (16:06)

Building a GraphQL Resolver For Specific Fields

Lesson 3: (11:20)

How to Query for GraphQL Data With Limits and Filters

Lesson 4: (25:38)

Build a Grid Column Layout with Ant Design in React

Lesson 5: (34:30)

Build a Booking Form With React and GraphQL

Lesson 6: (4:47)

Module 7 Summary

Module 9: Building the Home Page

Introduction: (0:45)

Module 8 Introduction

Lesson 1: (2:59)

Listings GraphQL Fields

Lesson 2: (13:52)

Building a GraphQL Resolver For Filtered and Sorted Results

Lesson 3: (23:09)

Building a Card-Based Homepage Layout in React

Lesson 4: (19:58)

Sort GraphQL Data And Display Filtered Results in React

Lesson 5: (3:13)

Module 8 Summary

Module 10: Searching for listings with Google's Geocoding API

Introduction: (1:04)

Module 9 Introduction

Lesson 1: (8:15)

Get Started With Google Geocoding API for Location Data

Lesson 2: (7:48)

How to Implement Location Search With GraphQL and Google

Lesson 3: (19:49)

Using the Google Maps Node.js Client With GraphQL

Lesson 4: (17:33)

Building a Location-Based Listings Search Page in React

Lesson 5: (30:33)

Building Filters and Pagination in React [with examples]

Lesson 6: (26:56)

Building a React Search Bar in the App Header

Lesson 7: (9:24)

How to Index Location Search Results With MongoDB Indexes

Lesson 8: (3:28)

Module 9 Summary

Module 11: Connecting with Stripe

Introduction: (0:56)

Module 10 Introduction

Lesson 1: (7:58)

Building a Payment Platform With Stripe and Stripe Connect

Lesson 2: (11:33)

How to Get Stripe Connect OAuth Credentials for Payments

Lesson 3: (9:11)

Building a GraphQL Schema for Stripe Connect Integration

Lesson 4: (13:51)

Integrating the Stripe NPM Library With React and GraphQL

Lesson 5: (27:59)

Adding Connect with Stripe to a React App

Lesson 6: (13:30)

How to Disconnect and Remove a Client's Stripe Account

Lesson 7: (4:17)

Module 10 Summary

Module 12: Hosting new listings

Introduction: (0:36)

Module 11 Introduction

Lesson 1: (2:43)

HostListing GraphQL Fields

Lesson 2: (15:27)

Building a GraphQL Resolver to Receive New Listing Data

Lesson 3: (38:21)

How to Build a Listing Form Interface in React and Stripe

Lesson 4: (28:20)

Build a GraphQL Mutation to Store Listing Data and Uploads

Lesson 5: (5:05)

Module 11 Summary

Module 13: Cloudinary & Image Storage

Introduction: (0:41)

Module 12 Introduction

Lesson 1: (7:13)

Why Use Cloudinary to Host Images in the Cloud?

Lesson 2: (8:46)

How to Integrate Cloudinary With React and GraphQL

Module 14: Booking listings

Introduction: (1:04)

Module 13 Introduction

Lesson 1: (2:51)

CreateBooking GraphQL Fields

Lesson 2: (25:57)

Build a Booking System With React, GraphQL, and Stripe API

Lesson 3: (23:02)

How to Store New Bookings and Resolve Overlapping Bookings

Lesson 4: (25:20)

How to Build a React Booking UI That Blocks Booked Dates

Lesson 5: (21:12)

Build a Confirmation Dialog in React and Ant Design

Lesson 6: (17:21)

How to Build a Stripe React Payment Form

Lesson 7: (28:10)

Build a GraphQL Mutation to Save Bookings and Test Stripe

Lesson 8: (9:01)

Module 13 Summary

Module 15: Deploying with Heroku

Introduction: (0:28)

Module 14 Introduction

Lesson 1: (6:40)

IaaS vs PaaS vs SaaS: An Intro to Cloud Computing

Lesson 2: (45:13)

A Step-by-Step Guide to Deploying a React App to Heroku

Lesson 3: (10:25)

Walkthrough of Deployed App

Module 16: Bonus Module

Introduction: (0:51)

Module 15 Introduction

Lesson 1: (5:32)

Build a Custom 404 Not Found Page With React Router

Lesson 2: (16:32)

How to Customize Apollo Client Caching and Fetch Policy

Lesson 3: (10:26)

Automatically Scroll to Top of Page With React useLayoutEffect

Lesson 4: (10:25)

How to Customize React Router Hooks

Lesson 5: (10:32)

How to Use the Stripe Deauthorize Function in React

Lesson 6: (10:06)

How to Optimize a React Date Picker

Module 17: Part Two Conclusion

Introduction: (0:40)

Part Two Conclusion

Module 18: PostgreSQL & TypeORM

Introduction: (0:48)

Module 17 Introduction

Lesson 1: (5:06)

SQL vs NoSQL: Pros and Cons for Building a Web App

Lesson 2: (6:04)

How to Start Using PostgreSQL and Migrate From MongoDB

Lesson 3: (16:03)

An Intro to Object-Relational Mapping With TypeORM in Node.js

Lesson 4: (33:09)

How to Migrate a React App From MongoDB to PostgreSQL

Module 19: Unit Testing (Client)

Introduction: (3:38)

Module 18 Introduction

Lesson 1: (8:22)

Getting Started

Lesson 2: (14:39)

An Intro to Pushing Code to GitHub and Creating Pull Requests

Module 20: Package Updates

Lesson 1:

Google Maps Node Package Update

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

Building the Listing Page

Build a Grid Column Layout with Ant Design in React

In this lesson, we'll continue to build the listing page in our client application by looking to prepare the `<ListingDetails />` and `<ListingBookings />` components.

Lesson
Discussion 0

This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

Previous Lesson:

How to Query for GraphQL Data With Limits and Filters

Next Lesson:

Build a Booking Form With React and GraphQL

Start a new discussion. All notification go to the author.

Text

Contents

ListingDetails & ListingBookings
<ListingDetails />

Learn

Fullstack React
ng-book
Fullstack D3
Fullstack Node.js
Fullstack React Native
Fullstack Rust

Requests

Request a Course
Request a Site Feature

Community

Student stories
Community Discord

Masterclasses

Learnify: Learn advanced ASP.NET Core, Entity Framework Core and React
Tinyhouse: Fullstack React Masterclass
Fullstack Flask: Build a SaaS Masterclass
Fullstack D3 Masterclass
Fullstack React with TypeScript Masterclass

Tutorials

React Tutorials
Node.js Tutorials
Rust Tutorials

newline

Latest Book

Fullstack React with TypeScript

Learn this

Learn Pro Patterns for Hooks, Testing, Redux, SSR, and GraphQL

Get access to our free email tutorials

Terms of Service
Privacy

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)

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

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