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

In this course, we'll show you how to create a production-ready home-sharing site

2.8 / 5 (10 ratings)
Published 5 years ago
Updated 7 months ago

On demand video

22 hrs

Video Lessons

110 Videos

Course Instructors

Hassan Djirdeh

Front End Developer @Shopify | Creator of TinyHouse | Author of Fullstack Vue

Jing Chen

How The Course Works

01Remote

You can take the course from anywhere in the world, as long as you have a computer and an internet connection.

02Self-Paced

Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.

03Community

Join a vibrant community of other students who are also learning with TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two. Ask questions, get feedback and collaborate with others to take your skills to the next level.

04Structured

Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.

Course Overview

What You Will Learn

How to create a Node server using Express
Importance of strongly-typed code
How to integrate TypeScript to a Node server
Differences between REST & GraphQL
What problems GraphQL can solve
How to create a GraphQL API using Apollo

In this course, we'll be creating a Node server from scratch with the help of the Express framework. We'll then introduce the benefits of strongly-typed code and integrate TypeScript into our Node server application.

We will compare GitHub's old RESTful API against its new GraphQL API. We will explore the problems GraphQL aims to solve. And finally, we will create our own GraphQL API using Apollo!

Our students work at

Module 1

Introduction

5 Lessons 56 Minutes

01Part Two Welcome
Sneak Peek00:01:55
02The TinyHouse App
Sneak Peek00:15:10
03Walkthrough of TinyHouse Code
Sneak Peek00:12:17
04Code Patterns & Behavior
Sneak Peek00:10:54
05How To Go Through The Course
Sneak Peek00:16:39

Module 2

Set-up for Part 2

1 Lesson 2 Minutes

01Set-up For Part II
Sneak Peek00:02:51

Module 3

Routing in TinyHouse

3 Lessons 14 Minutes

01Introducting Module 3
Sneak Peek00:00:33
02Server-side vs Client-Side Routing in a Web Application
Sneak Peek00:06:14
03Build Web App Navigation With React Router and BrowserRouter
Sneak Peek00:07:26

Module 4

Setting up our Database

4 Lessons 30 Minutes

01Introduction to Module 3
Sneak Peek00:01:05
02How to Build MongoDB Database Collections in React
Sneak Peek00:05:16
03Build a MongoDB Document Schema: Examples and Best Practices
Sneak Peek00:15:17
04How to Build a Seed Function to Add Data to MongoDB
Sneak Peek00:08:27

Module 5

User Authentication with Google Sign-In & OAuth 2.0

10 Lessons1 Hours 40 Minutes

01Introduction to Module 4
Sneak Peek00:00:52
02How Does OAuth 2.0 Work? [with diagrams and examples]
Sneak Peek00:04:36
03How to Get Google Access Credentials for OAuth Authentication
Sneak Peek00:04:49
04The GraphQL Document Fields Needed for Google Sign-In
Sneak Peek00:04:50
05Using Google Auth and People API With React and GraphQL
Sneak Peek00:08:30
06Build GraphQL Authentication Resolvers for Google Auth
Sneak Peek00:18:55
07How to Build a Custom Google Sign-In UI in React
Sneak Peek00:11:35
08How to Query Google Sign-In Authentication URL From a Client
Sneak Peek00:22:35
09How to Build a React Header With a React Log Out Mutation
Sneak Peek00:18:05
10Module 4 Summary
Sneak Peek00:06:02

Module 6

Persist Login Sessions with Cookies

7 Lessons 41 Minutes

01Module 5 Introduction
Sneak Peek00:00:55
02How to Store Persistent Google Sign-In Sessions With Cookies
Sneak Peek00:02:39
03sessionStorage vs localStorage vs Cookies for Secure Storage
Sneak Peek00:05:32
04Using NPM cookie-parser to Read Cookies in React
Sneak Peek00:11:05
05How to Use a Viewer Cookie to Automatically Log In a User
Sneak Peek00:08:19
06Prevent Cross-Site Request Forgery Attacks With X-CSRF Token
Sneak Peek00:08:50
07Module 5 Summary
Sneak Peek00:04:09

Module 7

Building the User Page

7 Lessons1 Hours 48 Minutes

01Module 6 Introduction
Sneak Peek00:00:53
02Building a GraphQL Query to Fetch User Account Data Fields
Sneak Peek00:02:23
03How to Modify GraphQL Type Definitions to Support TypeScript
Sneak Peek00:10:47
04How to Build Paginating GraphQL Resolvers [with examples]
Sneak Peek00:21:38
05How to Build a UserProfile Component With React and GraphQL
Sneak Peek00:23:01
06Build User Profile Pages With GraphQL, Ant Design, & Apollo
Sneak Peek00:42:50
07Module 6 Summary
Sneak Peek00:07:20

Module 8

Building the Listing Page

7 Lessons1 Hours 35 Minutes

01Introduction to Module 7
Sneak Peek00:00:33
02Requesting a Single Set of GraphQL Fields
Sneak Peek00:02:20
03Building a GraphQL Resolver For Specific Fields
Sneak Peek00:16:06
04How to Query for GraphQL Data With Limits and Filters
Sneak Peek00:11:20
05Build a Grid Column Layout with Ant Design in React
Sneak Peek00:25:38
06Build a Booking Form With React and GraphQL
Sneak Peek00:34:30
07Module 7 Summary
Sneak Peek00:04:47

Module 9

Building the Home Page

6 Lessons1 Hours 3 Minutes

01Introduction to Module 8
Sneak Peek00:00:45
02Listings GraphQL Fields
Sneak Peek00:02:59
03Building a GraphQL Resolver For Filtered and Sorted Results
Sneak Peek00:13:52
04Building a Card-Based Homepage Layout in React
Sneak Peek00:23:09
05Sort GraphQL Data And Display Filtered Results in React
Sneak Peek00:19:58
06Module 8 Summary
Sneak Peek00:03:13

Module 10

Searching for listings with Google's Geocoding API

9 Lessons2 Hours 4 Minutes

01Module 9 Introduction
Sneak Peek00:01:04
02Get Started With Google Geocoding API for Location Data
Sneak Peek00:08:15
03How to Implement Location Search With GraphQL and Google
Sneak Peek00:07:48
04Using the Google Maps Node.js Client With GraphQL
Sneak Peek00:19:49
05Building a Location-Based Listings Search Page in React
Sneak Peek00:17:33
06Building Filters and Pagination in React [with examples]
Sneak Peek00:30:33
07Building a React Search Bar in the App Header
Sneak Peek00:26:56
08How to Index Location Search Results With MongoDB Indexes
Sneak Peek00:09:24
09Module 9 Summary
Sneak Peek00:03:28

Module 11

Connecting with Stripe

8 Lessons1 Hours 29 Minutes

01Module 10 Introduction
Sneak Peek00:00:56
02Building a Payment Platform With Stripe and Stripe Connect
Sneak Peek00:07:58
03How to Get Stripe Connect OAuth Credentials for Payments
Sneak Peek00:11:33
04Building a GraphQL Schema for Stripe Connect Integration
Sneak Peek00:09:11
05Integrating the Stripe NPM Library With React and GraphQL
Sneak Peek00:13:51
06Adding Connect with Stripe to a React App
Sneak Peek00:27:59
07How to Disconnect and Remove a Client's Stripe Account
Sneak Peek00:13:30
08Module 10 Summary
Sneak Peek00:04:17

Module 12

Hosting new listings

6 Lessons1 Hours 30 Minutes

01Module 11 Introduction
Sneak Peek00:00:36
02HostListing GraphQL Fields
Sneak Peek00:02:43
03Building a GraphQL Resolver to Receive New Listing Data
Sneak Peek00:15:27
04How to Build a Listing Form Interface in React and Stripe
Sneak Peek00:38:21
05Build a GraphQL Mutation to Store Listing Data and Uploads
Sneak Peek00:28:20
06Module 11 Summary
Sneak Peek00:05:05

Module 13

Cloudinary & Image Storage

3 Lessons 16 Minutes

01Module 12 Introduction
Sneak Peek00:00:41
02Why Use Cloudinary to Host Images in the Cloud?
Sneak Peek00:07:13
03How to Integrate Cloudinary With React and GraphQL
Sneak Peek00:08:46

Module 14

Booking listings

9 Lessons2 Hours 34 Minutes

01Module 13 Introduction
Sneak Peek00:01:04
02CreateBooking GraphQL Fields
Sneak Peek00:02:51
03Build a Booking System With React, GraphQL, and Stripe API
Sneak Peek00:25:57
04How to Store New Bookings and Resolve Overlapping Bookings
Sneak Peek00:23:02
05How to Build a React Booking UI That Blocks Booked Dates
Sneak Peek00:25:20
06Build a Confirmation Dialog in React and Ant Design
Sneak Peek00:21:12
07How to Build a Stripe React Payment Form
Sneak Peek00:17:21
08Build a GraphQL Mutation to Save Bookings and Test Stripe
Sneak Peek00:28:10
09Module 13 Summary
Sneak Peek00:09:01

Module 15

Deploying with Heroku

4 Lessons1 Hours 2 Minutes

01Module 14 Introduction
Sneak Peek00:00:28
02IaaS vs PaaS vs SaaS: An Intro to Cloud Computing
Sneak Peek00:06:40
03A Step-by-Step Guide to Deploying a React App to Heroku
Sneak Peek00:45:13
04Walkthrough of Deployed App
Sneak Peek00:10:25

Module 16

Bonus Module

7 Lessons1 Hours 4 Minutes

01Module 15 Introduction
Sneak Peek00:00:51
02Build a Custom 404 Not Found Page With React Router
Sneak Peek00:05:32
03How to Customize Apollo Client Caching and Fetch Policy
Sneak Peek00:16:32
04Automatically Scroll to Top of Page With React useLayoutEffect
Sneak Peek00:10:26
05How to Customize React Router Hooks
Sneak Peek00:10:25
06How to Use the Stripe Deauthorize Function in React
Sneak Peek00:10:32
07How to Optimize a React Date Picker
Sneak Peek00:10:06

Module 17

Part Two Conclusion

1 Lesson 40 Seconds

01Part Two Conclusion
Sneak Peek00:00:40

Module 18

PostgreSQL & TypeORM

5 Lessons1 Hours 1 Minutes

01Module 17 Introduction
Sneak Peek00:00:48
02SQL vs NoSQL: Pros and Cons for Building a Web App
Sneak Peek00:05:07
03How to Start Using PostgreSQL and Migrate From MongoDB
Sneak Peek00:06:04
04An Intro to Object-Relational Mapping With TypeORM in Node.js
Sneak Peek00:16:03
05How to Migrate a React App From MongoDB to PostgreSQL
Sneak Peek00:33:10

Module 19

Unit Testing (Client)

8 Lessons2 Hours 21 Minutes

01Module 18 Introduction
Sneak Peek00:03:38
02An Intro to Software Testing: End-to-End vs. Unit Testing
Sneak Peek00:11:44
03Using Jest and React Testing Library to Test React Components
Sneak Peek00:30:37
04How to Use Apollo to Test GraphQL Requests in React
Sneak Peek00:08:35
05Getting Started
Sneak Peek00:08:22
06Testing the Home Component I
Sneak Peek00:23:20
07Testing the Home Component II
Sneak Peek00:40:33
08An Intro to Pushing Code to GitHub and Creating Pull Requests
Sneak Peek00:14:39

Module 20

Package Updates

1 Lesson

01Google Maps Node Package Update
Sneak Peek

Subscribe for a Free Lesson

By subscribing to the newline newsletter, you will also receive weekly, hands-on tutorials and updates on upcoming courses in your inbox.

What Students are Saying

Meet the Course Instructor

Hassan Djirdeh

👋 Hi! I'm Hassan. You may recognize me from the TinyHouse Masterclass, Fullstack Vue, or from other publications I’ve made under the newline brand. I'm a Front-End/Web Engineer at Shopify where I've been working with React, TypeScript, and GraphQL for years now to help build some of the largest production applications at-scale.

Jing Chen

👋 Hi! I'm Jing, the co-creator of this course. I'm a web developer/instructor, and I've used Node, Express, and GraphQL to build numerous web applications.

Purchase the course today

Frequently Asked Questions

What is this?

This course will show you how to create a production-ready home sharing site

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

01Remote

02Self-Paced

03Community

04Structured

Course Syllabus and Content

Introduction

Set-up for Part 2

Routing in TinyHouse

Setting up our Database

User Authentication with Google Sign-In & OAuth 2.0

Persist Login Sessions with Cookies

Building the User Page

Building the Listing Page

Building the Home Page

Searching for listings with Google's Geocoding API

Connecting with Stripe

Hosting new listings

Cloudinary & Image Storage

Booking listings

Deploying with Heroku

Bonus Module

Part Two Conclusion

PostgreSQL & TypeORM

Unit Testing (Client)

Package Updates

Subscribe for a Free Lesson

What Students are Saying

Meet the Course Instructor

Hassan Djirdeh

Jing Chen

Purchase the course today

One-Time Purchase

One-Time Purchase

Frequently Asked Questions