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

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!

Course Content

19 modules113 lessons22h 56m total

Introduction

5 lessons 56m total

Part Two Welcome

Welcome to Part II of the course.

INTRODUCTION

1:55 minutes

The TinyHouse App

In this lesson, we'll highlight all the features we intend to have for our home sharing application, TinyHouse.

INTRODUCTION

15:10 minutes

Walkthrough of TinyHouse Code

We'll spend a few minutes walking through the complete TinyHouse code for Part II of the course to gather context on some of the patterns we'll follow.

INTRODUCTION

12:17 minutes

Code Patterns & Behavior

In this lesson, we'll continue from the previous lesson and spend more time discussing common patterns we'll employ as we build both the server and client projects of the TinyHouse application.

INTRODUCTION

10:54 minutes

How To Go Through The Course

The structure of the course, the material available, and how best to go through the course in Part II.

INTRODUCTION

16:39 minutes

Set-up for Part 2

1 lesson 2m total

Set-up For Part II

We begin working on building the TinyHouse application by first modifying the code from the end of Part I of the course to prepare us as we move forward.

LESSON

2:51 minutes

Routing in TinyHouse

3 lessons 14m total

Module 2 Introduction

This is an introduction to the work we'll be doing in Module 2.0.

INTRODUCTION

0:33 minutes

Routing in TinyHouse

Routing is the process of navigating through a web application with the help of URLs. When a link in a webpage is clicked, the URL changes which then navigates a user to a new page. In this lesson, we'll learn about routing and explore the different routes we'll need for our TinyHouse application.

LESSON

6:14 minutes

React Router

React Router is a popular community-built library that provides a set of navigational components to help create routing within React applications. In this lesson, we'll use React Router to declare the main routes and the components that should be shown in these routes for our TinyHouse client application.

LESSON

7:26 minutes

Setting up our Database

4 lessons 30m total

Module 3 Introduction

This is an introduction to the work we'll be doing in Module 3.0.

INTRODUCTION

1:05 minutes

Database Collection Structure

In this lesson, we'll brainstorm the structure of our database and determine how many collections the database for our TinyHouse application will need.

LESSON

5:16 minutes

Database Document Structure

We continue from the previous lesson by declaring the shape of the data we expect to store in each of the collections of our database.

LESSON

15:17 minutes

Seed & Clear Data from MongoDB

Having our database contain some mock data will allow our GraphQL queries and mutations to interact with data from the database. In this lesson, we'll create a scripts to help seed and clear the database of mock data, in development.

LESSON

8:27 minutes

User Authentication with Google Sign-In & OAuth 2.0

10 lessons1h 40m total

Module 4 Introduction

This is an introduction to the work we'll be doing in Module 4.0.

INTRODUCTION

0:52 minutes

OAuth 2.0

OAuth is an industry-standard authorization protocol that enables applications to obtain limited access to user accounts without giving away any passwords. In this lesson, we'll dive a little deeper explaining what OAuth is and how we intend to use it in our application to help users sign-in with their Google account.

LESSON

4:36 minutes

Google Sign-In (OAuth)

In this lesson, we'll create the necessary OAuth credentials from the Google API Console that we'll need to use to set-up Google OAuth in our application.

LESSON

4:49 minutes

Google Sign-In GraphQL Fields

We'll begin creating the GraphQL fields that we'll need to help us establish Google OAuth in our application.

LESSON

4:50 minutes

Using Google Sign-In & People API

Before we update our GraphQL OAuth resolvers, we'll use Google's official Node.js library to help access and interact with Google APIs.

LESSON

8:30 minutes

Building the Authentication Resolvers

We'll continue to update the GraphQL resolver functions we've prepared to allow users to log-in & log-out of our application.

LESSON

18:55 minutes

Building the UI for Login

We'll now switch over to work in our React application and have it communicate with the server to allow a user to sign-in via Google OAuth.

LESSON

11:35 minutes

Executing Login

Having the UI of the Login page built in our client, we'll investigate how we can make the query for Google Sign In's authentication URL when a user attempts to sign in.

LESSON

22:35 minutes

Building the AppHeader & Logout

A user is now able to successfully sign-in from the Login page. In this lesson, we'll spend some time creating the AppHeader component that will help allow users to navigate around our app.

LESSON

18:05 minutes

Module 4 Summary

This lesson is a summary of the work we've done in Module 4.0.

LESSON

6:02 minutes

Persist Login Sessions with Cookies

7 lessons 41m total

Module 5 Introduction

This is an introduction to the work we'll be doing in Module 5.0.

INTRODUCTION

0:55 minutes

Cookies & Login Sessions

A browser cookie is data that a server can send to a user's web browser where the browser can often send back to the server. With this lesson, we begin discussing how persistent login sessions can be made with cookies by going through a simple exercise with the Google search web application.

LESSON

2:39 minutes

localStorage vs. sessionStorage vs. cookies

Before we dive into implementing persistent login sessions in our app, we'll touch on the different storage mechanisms of the web browser. In this lesson, we explore the differences between localStorage, sessionStorage, and cookies.

LESSON

5:32 minutes

Adding the Viewer Cookie on the Server

We'll utilize the `cookie-parser` package in our Node server to help parse a "viewer" cookie from HTTP requests sent from the client.

LESSON

11:05 minutes

Adding the Viewer Cookie on the Client

Our server is now able to help set and clear the "viewer" cookie in our client when we sign-in with Google. In this lesson, we'll modify our client such that it will use the "viewer" cookie to automatically log a viewer in when the app first renders and the cookie is available.

LESSON

8:19 minutes

X-CSRF Token

We’ll take an additional step in this lesson to prevent Cross-Site Request Forgery attacks. We'll see how we can have the client pass a CSRF token with every request and where the server can use the token to verify the identity of the viewer making the request.

LESSON

8:50 minutes

Module 5 Summary

This lesson is a summary of the work we've done in Module 5.0.

LESSON

4:09 minutes

Building the User Page

7 lessons1h 48m total

Module 6 Introduction

This is an introduction to the work we'll be doing in Module 6.0.

INTRODUCTION

0:53 minutes

User GraphQL Fields

In this module, we begin building the server and client implementation that will help allow us to retrieve and display information for users in our application. We'll begin by brainstorming the GraphQL fields we'll need to query user data.

LESSON

2:23 minutes

Modifying the User, Listing, and Booking GraphQL TypeDefs

In this lesson, we'll modify the User, Listing, and Booking GraphQL type definitions that are relevant to the user information we want to query from the database.

LESSON

10:47 minutes

Building the User Resolvers

With the GraphQL type definitions established for the root-level user query, in this lesson we'll modify the resolver function we have to help query for a certain user.

LESSON

21:38 minutes

The UserProfile React Component

With our `user` query now prepared and available in our GraphQL API, we'll begin building the page shown in the `/user/:id` route of our client app.

LESSON

23:01 minutes

The UserListings & UserBookings React Components

In this lesson, we'll continue to build the user page in our client application by looking to query and present a paginated list of listings and bookings for a certain user.

LESSON

42:50 minutes

Module 6 Summary

This lesson is a summary of the work we've done in Module 6.0.

LESSON

7:20 minutes

Building the Listing Page

7 lessons1h 35m total

Module 7 Introduction

This is an introduction to the work we'll be doing in Module 7.0.

INTRODUCTION

0:33 minutes

Listing GraphQL Fields

In this module, we begin building the server and client implementation that will help allow us to retrieve and display information for listings in our application. We'll begin by brainstorming the GraphQL fields we'll need to query listing data.

LESSON

2:20 minutes

Building the Listing Resolvers

With the root-level `listing` field prepared in our GraphQL API, we'll construct the resolver function for this field to attempt to query for the appropriate listing from the "listings" collection in our database.

LESSON

16:06 minutes

Querying for listing data

With our `listing` query now prepared and available in our GraphQL API, we'll begin building the page shown in the `/listing/:id` route of our client app.

LESSON

11:20 minutes

ListingDetails & ListingBookings

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

25:38 minutes

The ListingCreateBooking React Component

In this lesson, we'll finish up our client update for the listing page by creating the component where a user will eventually use to book for a listing.

LESSON

34:30 minutes

Module 7 Summary

This lesson is a summary of the work we've done in Module 7.0.

LESSON

4:47 minutes

Building the Home Page

6 lessons1h 3m total

Module 8 Introduction

This is an introduction to the work we'll be doing in Module 8.0.

INTRODUCTION

0:45 minutes

Listings GraphQL Fields

In the homepage of our application, we hope to display a small list of the most premium listings available. In this module, we begin building the server and client implementation that will help allow us to retrieve and display listings information for the homepage of our application. We'll begin by brainstorming the GraphQL fields we'll need to query a list of listings from our API.

LESSON

2:59 minutes

Building the Listings Resolvers

With the root-level `listings` field prepared in our GraphQL API, we'll construct the resolver function for this field to attempt to query for a list of listings from the "listings" collection in our database.

LESSON

13:52 minutes

Building the UI of the Homepage

The homepage of TinyHouse is to be to mostly presentational and aims to serve the purpose of telling the user what our app does as well as provide useful links to direct them elsewhere. In this lesson, we focus on building the presentational UI of the homepage.

LESSON

23:09 minutes

Displaying the highest-priced listings in the Homepage

Our homepage is mostly prepared except for displaying the most premium (i.e. highest price) listings. In this lesson, we'll look to make the query we'll need to retrieve the highest priced listings from our server and display that information on our homepage.

LESSON

19:58 minutes

Module 8 Summary

This lesson is a summary of the work we've done in Module 8.0.

LESSON

3:13 minutes

Searching for listings with Google's Geocoding API

9 lessons2h 4m total

Module 9 Introduction

This is an introduction to the work we'll be doing in Module 9.0.

INTRODUCTION

1:04 minutes

Google's Geocoding API

We've managed to create the capability for users to query for a list of listings that can be sorted based on listing price. In this module, we'll focus on the functionality that will allow our users to search for listings based on location. We'll begin the investigation for this by discussing the API we intend to use to help us - Google's Geocoding API.

LESSON

8:15 minutes

Location-based searching for listings

In this lesson, we'll address the gameplan we have in mind in how we want to conduct location-based searching in our app.

LESSON

7:48 minutes

Updating the listings resolver

In this lesson, we'll begin to write the code in our server project to help allow a user to search for listings in a certain location. To achieve this, we'll first modify the existing `listings` GraphQL query field to accept an optional `location` argument that when provided will return the listings that pertain only to that location.

LESSON

19:49 minutes

Building the Listings page

With our `listings` field in our GraphQL API prepared to accept a `location` argument, we'll begin to work on the client app to build the `/listings/:location?` page for where certain listings can be shown for specific locations.

LESSON

17:33 minutes

Pagination & Filtering in the Listings page

At this point, we have a page displayed in the `/listings/location?` route that surfaces up to eight different listing cards for listings that exist in certain locations. In this lesson, we'll create the capability for a user to filter and paginate the information presented to them in the listings page.

LESSON

30:33 minutes

Searching for listings from the App Header

In this lesson, we'll work on something slightly related to the `/listings/:location?` page and is a big factor of our app. We'll be working on the search input that we'll place in the app header that will allow users to search for listings in a location while within any part of our app.

LESSON

26:56 minutes

Index location-based data

At this moment in time, we've introduced the capability to have our client application query for listing documents for different locations. In this lesson, we'll investigate and discuss indexes within MongoDB and see how can index location-based data from the "listings" collection in our database.

LESSON

9:24 minutes

Module 9 Summary

This lesson is a summary of the work we've done in Module 9.0.

LESSON

3:28 minutes

Connecting with Stripe

8 lessons1h 29m total

Module 10 Introduction

This is an introduction to the work we'll be doing in Module 10.0.

INTRODUCTION

0:56 minutes

Stripe & Stripe Connect

It's finally time we talk about payments! The business model of TinyHouse is an online marketplace where users can host and book listings. In this lesson, we'll learn about how we intend to have TinyHouse be a marketplace by using the third-party payment platform - Stripe.

LESSON

7:58 minutes

Stripe Connect OAuth

When a user in our application plans to host a listing, we'll need to ensure they've connected to their own Stripe account through our Stripe platform account. This is to leverage Stripe Connect's capability to pay the users who have listings in our app when a booking is made. In this lesson, we'll set up the credentials we'll need from Stripe and save them as environment variables for both our server and client projects.

LESSON

11:33 minutes

Stripe Connect GraphQL Fields

We'll begin creating the GraphQL fields that we'll need to help us establish Stripe Connect OAuth in our application.

LESSON

9:11 minutes

Building the Stripe Connect Resolvers

We'll continue to update the GraphQL resolver functions we've prepared to allow users to connect & disconnect from Stripe in our application.

LESSON

13:51 minutes

Connecting with Stripe on the Client

We'll switch over to work in our React application and have it communicate with the server to allow a user to connect with their Stripe account on our platform.

LESSON

27:59 minutes

Disconnecting from Stripe on the Client

We've managed to create the functionality to have a logged-in user in our app connect with Stripe. In this lesson, we'll look to visually indicate that the user is in the connected state and have an action responsible for allowing the user to disconnect from Stripe.

LESSON

13:30 minutes

Module 10 Summary

This lesson is a summary of the work we've done in Module 10.0.

LESSON

4:17 minutes

Hosting new listings

6 lessons1h 30m total

Module 11 Introduction

This is an introduction to the work we'll be doing in Module 11.0.

INTRODUCTION

0:36 minutes

HostListing GraphQL Fields

For users in our application to add listings (i.e. host listings) in the TinyHouse application, we'll need to create the functionality where users can upload and insert new listing data into our database. In this lesson, we'll establish the GraphQL fields in our API that will help achieve this.

LESSON

2:43 minutes

Building the HostListing Resolver

We'll continue from what we've done in the previous lesson by having the `hostListing` resolver function we've created receive an input with new listing information which will then be added to the `"listings"` collection in our database.

LESSON

15:27 minutes

Building the UI of the Host page

We'll now begin to work on the form on the client application where a user can create (i.e. host) a new listing. The form we'll build will essentially be the UI of the `/host` route of our application.

LESSON

38:21 minutes

Executing the HostListing Mutation

The majority of the work we've needed to do for the form shown in the `/host` page was completed in the last lesson. In this lesson, we collect the values a user is to enter in the form and when the user decides to submit the form, we'll trigger the `hostListing` mutation we have in our API and pass the relevant input along.

LESSON

28:20 minutes

Module 11 Summary

This lesson is a summary of the work we've done in Module 11.0.

LESSON

5:05 minutes

Cloudinary & Image Storage

3 lessons 16m total

Module 12 Introduction

This is an introduction to the work we'll be doing in Module 12.0.

INTRODUCTION

0:41 minutes

Cloudinary & Image Storage

In this lesson and module, we'll investigate to see if there's a better way of storing the newly created images for listings in our database. We'll discuss and investigate cloud-based image and video management services and see how we can use Cloudinary for our application.

LESSON

7:13 minutes

Image uploads with Cloudinary

In this lesson, we'll pick up from what we've done in the previous lesson by modifying our server code to utilize Cloudinary to host listing images for our TinyHouse application.

LESSON

8:46 minutes

Booking listings

9 lessons2h 34m total

Module 13 Introduction

This is an introduction to the work we'll be doing in Module 13.0.

INTRODUCTION

1:04 minutes

CreateBooking GraphQL Fields

For users to book a listing in our app, we'll need functionality to handle this as well as the capability to process transactions between the tenant and host. In this lesson, we'll establish the GraphQL fields in our API that will help achieve this.

LESSON

2:51 minutes

Building the CreateBooking Resolver

Before we begin to implement the `createBooking` mutation resolver, we'll first create the utility function that will facilitate a Stripe charge with the help of Stripe's API.

LESSON

25:57 minutes

Resolving the BookingsIndex of a Listing

In this lesson, we'll continue from the previous lesson and look to see how we can update the bookingsIndex of a listing document with the dates that have recently been booked by a tenant.

LESSON

23:02 minutes

Disabling booked dates on the client

In this lesson, we'll begin to work on the client-side to facilitate the booking of a listing. We'll begin by first disabling any dates in the listing page datepickers that have been previously booked by other users.

LESSON

25:20 minutes

Creating the Booking Confirmation Modal

In this lesson, we'll look to prepare the confirmation modal that gets displayed to the user when the users requests to make a booking.

LESSON

21:12 minutes

Displaying the Payment Form with React Stripe Elements

We'll continue from what we've done in the previous lesson by looking to capture a user's credit or debit card information when a booking is to be made, with the help of the React Stripe Elements library.

LESSON

17:21 minutes

Executing the CreateBooking Mutation

In this lesson, we'll wrap-up what we've done in the last few lessons by now collecting all relevant information and triggering the `createBooking` mutation when a user is ready to confirm their booking.

LESSON

28:10 minutes

Module 13 Summary

This lesson is a summary of the work we've done in Module 13.0.

LESSON

9:01 minutes

Deploying with Heroku

4 lessons1h 2m total

Module 14 Introduction

This is an introduction to the work we'll be doing in Module 14.0.

INTRODUCTION

0:28 minutes

Cloud Computing

We've finished building the application that we've wanted so we'll now focus on deployment. There's no use in having a great app if we can't deploy it for others to use! Before we dive into what form of deployment we're going to conduct, we'll talk about cloud computing and its importance when it comes to the world of deployment.

LESSON

6:40 minutes

Deploying with Heroku

Heroku is a platform as a service (PaaS) that's been around since June 2007 and supports the deployment of several programming languages. In this lesson, we'll use Heroku to help deploy our TinyHouse application on to the cloud!

LESSON

45:13 minutes

Walkthrough of Deployed App

For the last core lesson of the course, we'll take a walkthrough of our deployed app to ensure everything works as intended. By the end of this lesson, we'll also spend a little time quickly summarizing what we've done to have our application be deployed.

LESSON

10:25 minutes

Bonus Module

7 lessons1h 4m total

Module 15 Introduction

This is an introduction to the work we'll be doing in Module 15.0.

INTRODUCTION

0:51 minutes

The NotFound Page

In this lesson, we build the UI for the NotFound page shown when a user ever navigates to a route not defined in our app.

LESSON

5:32 minutes

Apollo Client & FetchPolicy

We discuss Apollo Client's intelligent caching system and ways one can manipulate the fetch policy of query requests.

LESSON

16:32 minutes

useLayoutEffect & Window Scroll

We'll see how React's useLayoutEffect Hook can help have our application window be scrolled to the top when we navigate from page to page.

LESSON

10:26 minutes

React Router Hooks

We'll discuss the small changes that can be made to use some of the new Hooks that React Router provides.

LESSON

10:25 minutes

Disconnecting from Stripe & Revoking Access

We'll discuss a small change that can be made to fully disconnect a user from our Stripe Connect account when they've disconnected from Stripe in our app.

LESSON

10:32 minutes

Additional Listing DatePicker Changes

We'll discuss a few small changes that can be made to optimize the date pickers for when a user is to book a certain listing.

LESSON

10:06 minutes

Part Two Conclusion

1 lesson 40s total

Part Two Conclusion

Conclusion of Part II of the course.

INTRODUCTION

0:40 minutes

PostgreSQL & TypeORM

5 lessons1h 1m total

Module 17 Introduction

This is an introduction to the bonus work we'll be doing in Module 17.0.

INTRODUCTION

0:48 minutes

SQL vs. NoSQL

In this lesson, we compare SQL and NoSQL databases.

LESSON

5:06 minutes

PostgreSQL

This lesson is an introduction to the popular and widely used open-source SQL database, PostgreSQL.

LESSON

6:04 minutes

TypeORM

Object-Relational Mapping (ORM) is a technique that lets one access and modify data from a database using an object-oriented paradigm. In this lesson, we'll discuss ORM and be introduced to a popular ORM used for JavaScript and TypeScript, TypeORM.

LESSON

16:03 minutes

TinyHouse - PostgreSQL & TypeORM

In this lesson, we'll convert the server of our TinyHouse project to use PostgreSQL & TypeORM.

LESSON

33:09 minutes

Unit Testing (Client)

10 lessons3h 16m total

Module 18 Introduction

This is an introduction to the bonus work we'll be doing in Module 18.0.

INTRODUCTION

3:38 minutes

Unit Testing

In this lesson, we introduce the concept and benefits of unit testing in web applications.

LESSON

11:44 minutes

Jest & React Testing Library

In this lesson, we'll talk about the two main testing tools we'll use to test our React components - Jest & React Testing Library.

LESSON

30:37 minutes

Apollo React Testing

In this lesson, we'll talk about one other minor testing utility we'll use to help mock GraphQL requests in our tests - Apollo React Testing.

LESSON

8:35 minutes

Getting Started

In this lesson, we'll begin installing the testing libraries we are to use on the client application.

LESSON

8:22 minutes

Testing the Home Component I

In this lesson, we begin preparing tests for the Home component.

LESSON

23:20 minutes

Testing the Home Component II

In this lesson, we complete our tests for the Home component.

LESSON

40:33 minutes

Testing the Login Component I

In this lesson, we begin preparing tests for the Login component.

LESSON

26:16 minutes

Testing the Login Component II

In this lesson, we complete our tests for the Login component.

LESSON

28:59 minutes

Pushing code & creating PRs

In this short lesson, we'll take a bit of a tangent and talk about something we haven't talked about it in the course - creating Pull Requests for features

LESSON

14:39 minutes

Package Updates

1 lesson

Google Maps Node Package Update

This section discusses the migration from @google/maps to @googlemaps/google-maps-services-js.

LESSON

Your Instructors

Profile image for djirdehh

Hassan Djirdeh

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

👋 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.

Profile image for Jing

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.

Frequently Asked Questions

What is this?

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

One-Time Purchase

Get lifetime access to this course.

$299$399$100 off

Student Reviews

jur erick

a year ago

5.0

I find this course helpful in building skills with React. I gained fundamental understanding of React & GraphQL, and I started implementing it to my portfolio projects. After 6 months, I secured a job offer as a Frontend Engineer. My thanks to newline!

Tinyhouse: Fullstack React Masterclass - Pro Package

$299

$399