/syllabus

back to /tinyhouse

Syllabus

The video below highlights the syllabus and course overview of the Tinyhouse Masterclass.
The document displayed in the video can be found - here.

How To Go Through The Course

The video below highlights the structure of the course, the material available, and how best to go through the course.

Content

This section below highlights all the modules/lessons and breakdown of the material, for TinyHouse, that has been prepared and is currently available in the Newline platform. This section will update automatically when new modules and lessons get introduced and/or changed.

All the existing material shown below pertains to Part I of the course. We'll ensure this section is fully updated when Part II has launched in Q1 2020. ❄️

Module 0

Build React Apps With GraphQL, MongoDB, and TypeScript

Introduction to the TinyHouse Masterclass.

INTRODUCTION

2:39 minutes

Syllabus

Syllabus and course overview.

INTRODUCTION

28:36 minutes

How To Go Through The Course

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

INTRODUCTION

10:46 minutes

How to Setup a VS Code React Developer Environment

Quick walkthrough of the development environment and tools used in the course.

INTRODUCTION

2:53 minutes

Part One Welcome

Welcome to Part I of the course.

INTRODUCTION

3:08 minutes

Module 1

Module 1 Introduction

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

INTRODUCTION

1:03 minutes

What is Node? Intro to Node File System with JavaScript fs

Node is a JavaScript runtime environment that was first introduced in 2009 by Ryan Dahl, as a response to how slow web servers were at the time. In this lesson, we'll introduce Node and talk about the capability Node provides to make I/O tasks asynchronous and non-blocking.

LESSON

5:05 minutes

How to Run Node.js With JavaScript Code

In this lesson, we'll use Node to run a simple JavaScript file on the server.

LESSON

2:58 minutes

How to Build a Minimal Express.js Server With Node

Web servers provide functionality for requests that can be made from client applications. Node has a built-in HTTP module to allow for building a server that facilitates the transfer of data in HTTP. With this lesson, we'll look to use the popular Express framework as the replacement of the core HTTP module to create a minimal Node server, with Express routing.

LESSON

8:07 minutes

How to Use Nodemon to Auto Reload Node.js

Nodemon is an open-source utility tool that helps automatically restart a Node server whenever a change in code is detected in development. In this lesson, we'll install Nodemon and introduce an application script that will start the Node server with Nodemon.

LESSON

3:49 minutes

What is TypeScript? TypeScript vs JavaScript for Development

JavaScript is considered a weakly typed language. In this lesson, we'll go through a simple example of why that can be an issue in development and where TypeScript falls in the picture.

LESSON

5:37 minutes

How to Add TypeScript to a Node.JS Server With ts-node

We'll get started with TypeScript in this lesson by installing a few necessary packages in our server and setting up the configuration of our TypeScript compiler.

LESSON

16:10 minutes

How to Compile TypeScript Code With tsc

TypeScript is a development tool geared towards making building JavaScript applications more robust. In an application's deployed state (browser or server), TypeScript must be compiled to valid JavaScript. In this lesson, we'll see how the TypeScript compiler provides us with a command to compile and produce JavaScript code from TypeScript.

LESSON

3:05 minutes

Automatically Check TypeScript Code for Errors With ESLint

Though VSCode includes TypeScript language support which helps us pick up TypeScript errors in our TypeScript code, we'll introduce more robust code checking with ESLint - a popular open-source JavaScript/TypeScript linting tool.

LESSON

13:17 minutes

Build a Mock Array of Data Objects for TypeScript

To help us get started, we'll begin by introducing a mock data array of rental listings in this lesson. This will help us get started before we begin to address more appropriate data persistence.

LESSON

7:03 minutes

How to Build GET and POST Routes With Express Router

In this lesson, we'll use the routing capabilities Express gives us to create GET and POST routes that interact with the mock data array we've established.

LESSON

10:45 minutes

Module 1 Summary

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

LESSON

4:03 minutes

Module 2

Module 2 Introduction

Introduction to Module 2.0.

INTRODUCTION

0:42 minutes

What is GraphQL?

GraphQL is a query language for APIs. In this lesson, we go through an initial discussion on GraphQL and how GraphQL differs from traditional REST APIs.

LESSON

5:40 minutes

GraphQL vs REST APIs - A Comparison With GitHub's APIs

Before we continue discussing some of the core concepts in GraphQL, we'll take a bit of a tangent in this lesson to contrast and compare Github's existing REST API (v3) and their GraphQL API (v4).

LESSON

9:47 minutes

A Guide to GraphQL Schema and Data Types

In this lesson, we introduce and discuss some of GraphQL's main concepts such as the GraphQL schema, object types and resolver functions.

LESSON

11:22 minutes

Module 3

Module 3 Introduction

Introduction to Module 3.0.

INTRODUCTION

1:00 minutes

How to Add Apollo Server for a GraphQL API in a Node.js App

In this lesson, we'll install the Express variation of the popular Apollo Server library and the GraphQL JavaScript library.

LESSON

2:05 minutes

Build a GraphQL Schema And Test it in GraphQL Playground

In this lesson, we'll use the Apollo Server and GraphQL JavaScript libraries to create a minimal GraphQL API that we'll be able to interact within an IDE known as GraphQL Playground.

LESSON

9:28 minutes

How to Query GraphQL Data And Mutate Data

In this lesson, we'll look to mimic the listings retrieval and manipulation we had in our Express RESTful API but with GraphQL instead.

LESSON

11:33 minutes

How to Use GraphQL Schema Language

The GraphQL schema language is a human-readable syntax to help create GraphQL schemas. In this lesson, we'll use the GraphQL schema language to re-create the schema we have in a more readable and simpler format.

LESSON

10:51 minutes

Module 3 Summary

This lesson is a summary of the final state of the work done in Module 3.0.

LESSON

2:06 minutes

Module 4

Module 4 Introduction

Introduction to Module 4.0.

INTRODUCTION

0:54 minutes

SQL vs NoSQL - An Intro to MongoDB

This brief lesson highlights some of the differences between relational and non-relational databases, and introduces MongoDB.

LESSON

3:44 minutes

How to Create a MongoDB Cluster in MongoDB Atlas

MongoDB Atlas is a fully managed cloud database service built and maintained by the same team behind MongoDB. In this lesson, we'll create our first MongoDB cluster with MongoDB Atlas.

LESSON

6:51 minutes

How to Connect Node.js to a MongoDB Database

Many different libraries and tools exist to help facilitate the connection between a Node Server and a MongoDB instance. In this lesson, we'll introduce and use the Node MongoDB driver to make our server connect with the MongoDB cluster we've created in Atlas.

LESSON

11:18 minutes

How Add TypeScript Types to a MongoDB Database

Though we've been able to make our database connection from the server, we haven't appropriately specified the type of data that can be returned from our database collections. In this lesson, we introduce and take advantage of generics to define the type of data that can be returned from our listings collection.

LESSON

12:33 minutes

Use Environment Variables With Node.js and MongoDB

Defining and using environment-specific configuration variables within code files is less than ideal due to security reasons as well as the coupling of environment-specific configuration and application code. In this lesson, we'll avoid declaring our MongoDB environment variables directly in our database connection file and instead use the popular dotenv package to load environment variables from a .env file.

LESSON

8:01 minutes

How to Seed Data to a MongoDB Database

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 simple seed script that will make it easy for us to populate the database with mock data in development.

LESSON

8:40 minutes

How to Use GraphQL to Query a MongoDB Database

In this lesson, we'll look to have our GraphQL API resolvers interact and manipulate data in our Mongo database. This will help ensure persistence of data and data changes between server restarts.

LESSON

14:33 minutes

How to Use lodash merge to Modularize GraphQL Resolvers

In this lesson, we'll see how we can use the lodash merge function to have our GraphQL resolvers map be broken down to small resolvers objects that pertain to certain domains (i.e modules).

LESSON

7:17 minutes

Module 4 Summary

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

LESSON

2:14 minutes

Module 5

Module 5 Introduction

Introduction to Module 5.0.

INTRODUCTION

0:46 minutes

React vs JavaScript - Reusable Components and JSX

This lesson provides a quick revision on some of the main topics behind developing UI applications with React.

LESSON

6:58 minutes

How to Create a React App With Webpack

A lot of things need to be considered to create the scaffold of a modern React application, like allowing for a modular-based app, compiling ESNext code, transpiling TypeScript code, etc. To avoid spending too much time with build tools, we'll create a modern React/TypeScript application with a single command - create-react-app.

LESSON

4:21 minutes

An Overview of the create-react-app File and Folder Structure

create-react-app creates a series of files and folders as it instantiates and creates a Webpack bundled React application. In this lesson, we'll spend some time addressing and highlighting each of the files and folders scaffolded by create-react-app.

LESSON

15:57 minutes

Module 6

Module 6 Introduction

Introduction to Module 6.0.

INTRODUCTION

0:45 minutes

How to Build Your First React Function

In this lesson, we'll create our first React Function component.

LESSON

3:46 minutes

How to Define React TypeScript Props

In this lesson, we'll introduce and type define Props to our recently created Listings function component.

LESSON

3:26 minutes

An Intro to React Functional Components With TypeScript

In this lesson, we'll investigate the FunctionComponent interface type React provides and address the type checking capabilities it provides when assigned to functional components.

LESSON

6:47 minutes

Making GraphQL Requests With POST and fetch

Numerous tools and libraries exist to help clients make GraphQL requests to a GraphQL API. Before we begin to introduce a third-party library to help make our GraphQL requests, we'll look to make our requests with the help of the window Fetch API. In this lesson, we'll begin to make the connection between our React client and Node server and see if we can query the listings query from our GraphQL API.

LESSON

14:16 minutes

How to Type Data from GraphQL With TypeScript Generics

Although the custom server fetch() function we've established in the last lesson works, the data being returned isn't appropriately typed. In this lesson, we'll take advantage of TypeScript generics to ensure we get queried data from our server fetch() function with the appropriate type.

LESSON

4:53 minutes

How to Delete MongoDB Listing With GraphQL API

In this lesson, we'll use our custom server fetch() function to invoke the deleteListing mutation we have in our GraphQL API, to delete a listing in our listings collection.

LESSON

8:42 minutes

Module 6 Summary

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

LESSON

2:04 minutes

Module 7

Module 7 Introduction

Introduction to Module 7.0.

INTRODUCTION

1:22 minutes

What are React Hooks? An Intro to Reusing Logic in React

In this lesson, we discuss the motivation behind React Hooks and see a few examples of how React Hooks can help share logic between our React components.

LESSON

7:59 minutes

How to Use the React useState Hook

Though we've been able to create a custom fetch() function to help us make the GraphQL requests to query listings or delete a certain listing, we've only seen the results of our requests in our browser console. In this lesson, we'll introduce and use React's useState Hook to track listings state value in our function component with which we'll be able to use and display in our UI.

LESSON

7:49 minutes

How to Use the React useEffect Hook

We've managed to use the useState Hook to track and display listings data to our UI. In this lesson, we'll introduce the useEffect Hook and see how we can create an effect callback to query listings data the moment our component mounts.

LESSON

11:45 minutes

How to Customize the React useQuery Hook

With React's useState and useEffect Hooks, we've been able to query and display listings information the moment our Listings component is mounted. In this lesson, we'll create our very own custom useQuery Hook that will consolidate the pattern of creating a state property, using the useEffect Hook, and running the server fetch() function to make a query and state update when a component mounts.

LESSON

8:51 minutes

How to Manually Refetch React useQuery Hook Data

In this lesson, we'll introduce the capability for a component to manually refetch a query from the useQuery Hook.

LESSON

6:57 minutes

Customize GraphQL Errors with React useQuery Hook

In this lesson, we'll address how we can handle the loading and error state of our GraphQL queries with our custom useQuery Hook.

LESSON

11:53 minutes

How to Customize the React useMutation Hook

In this lesson, we'll create a custom useMutation Hook which will abstract the server fetch functionality needed to conduct a mutation from a component.

LESSON

16:21 minutes

How to Use React's useReducer Hook to Handle State

In this lesson, we'll configure the useQuery and useMutation Hooks we've created to use another state management Hook to handle state. We'll use React's useReducer Hook.

LESSON

13:25 minutes

Module 7 Summary

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

LESSON

5:07 minutes

Module 8

Module 8 Introduction

Introduction to Module 8.0.

INTRODUCTION

0:54 minutes

Build an Apollo Client With apollo-boost and GraphQL

To use the React Apollo client library, we'll install and set up the Apollo client of our application with which we'll be doing in this lesson.

LESSON

4:21 minutes

How to Replace useQuery and useMutation With Apollo Hooks

With the Apollo client available everywhere in our app, we'll replace the use of the custom useQuery and useMutation Hooks with the variations provided to us from the React Apollo library.

LESSON

4:08 minutes

How to Autogenerate GraphQL Types With Apollo CLI

In this lesson, we'll use Apollo tooling's command line interface to autogenerate static types for the GraphQL requests in our client application.

LESSON

10:24 minutes

Module 8 Summary

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

LESSON

2:38 minutes

Module 9

Module 9 Introduction

Introduction to Module 9.0.

INTRODUCTION

0:26 minutes

An Intro to CSS UI Frameworks With Ant Design

In this lesson, we discuss some of the benefits of using a React UI framework as well as the Ant Design UI library.

LESSON

4:34 minutes

How to Add Ant Design UI Framework to React

Throughout Part I of the course, we haven't made any changes to the presentation (i.e. CSS) of our client code. In this lesson, we'll introduce and use the Ant Design React UI framework to improve the appearance of our client application.

LESSON

20:30 minutes

Module 10

Part One Conclusion

Conclusion of Part I of the course.

INTRODUCTION

0:32 minutes

Module 11
Pro

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

Module 12
Pro

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

Module 13
Pro

Module 2 Introduction

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

INTRODUCTION

0:33 minutes

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

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

Build Web App Navigation With React Router and BrowserRouter

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

Module 14
Pro

Module 3 Introduction

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

INTRODUCTION

1:05 minutes

How to Build MongoDB Database Collections in React

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

Build a MongoDB Document Schema: Examples and Best Practices

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

How to Build a Seed Function to Add Data to 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

Module 15
Pro

Module 4 Introduction

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

INTRODUCTION

0:52 minutes

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

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

How to Get Google Access Credentials for OAuth Authentication

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

The GraphQL Document Fields Needed for Google Sign-In

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 Auth and People API With React and GraphQL

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

Build GraphQL Authentication Resolvers for Google Auth

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

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

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

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

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

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

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

Module 16
Pro

Module 5 Introduction

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

INTRODUCTION

0:55 minutes

How to Store Persistent Google Sign-In Sessions With Cookies

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

sessionStorage vs localStorage vs Cookies for Secure Storage

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

Using NPM cookie-parser to Read Cookies in React

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

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

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

Prevent Cross-Site Request Forgery Attacks With 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

Module 17
Pro

Module 6 Introduction

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

INTRODUCTION

0:53 minutes

Building a GraphQL Query to Fetch User Account Data 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

How to Modify GraphQL Type Definitions to Support TypeScript

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

How to Build Paginating GraphQL Resolvers [with examples]

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

How to Build a UserProfile Component With React and GraphQL

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

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

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

Module 18
Pro

Module 7 Introduction

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

INTRODUCTION

0:33 minutes

Requesting a Single Set of 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 a GraphQL Resolver For Specific Fields

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

How to Query for GraphQL Data With Limits and Filters

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

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

25:38 minutes

Build a Booking Form With React and GraphQL

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

Module 19
Pro

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 a GraphQL Resolver For Filtered and Sorted Results

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 a Card-Based Homepage Layout in React

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

Sort GraphQL Data And Display Filtered Results in React

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

Module 20
Pro

Module 9 Introduction

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

INTRODUCTION

1:04 minutes

Get Started With Google Geocoding API for Location Data

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

How to Implement Location Search With GraphQL and Google

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

Using the Google Maps Node.js Client With GraphQL

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 a Location-Based Listings Search Page in React

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

Building Filters and Pagination in React [with examples]

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

Building a React Search Bar in 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

How to Index Location Search Results With MongoDB Indexes

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

Module 21
Pro

Module 10 Introduction

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

INTRODUCTION

0:56 minutes

Building a Payment Platform With Stripe and 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

How to Get Stripe Connect OAuth Credentials for Payments

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

Building a GraphQL Schema for Stripe Connect Integration

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

Integrating the Stripe NPM Library With React and GraphQL

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

Adding Connect with Stripe to a React App

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

How to Disconnect and Remove a Client's Stripe Account

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

Module 22
Pro

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 a GraphQL Resolver to Receive New Listing Data

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

How to Build a Listing Form Interface in React and Stripe

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

Build a GraphQL Mutation to Store Listing Data and Uploads

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

Module 23
Pro

Module 12 Introduction

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

INTRODUCTION

0:41 minutes

Why Use Cloudinary to Host Images in the Cloud?

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

How to Integrate Cloudinary With React and GraphQL

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

Module 24
Pro

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

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

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

How to Store New Bookings and Resolve Overlapping Bookings

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

How to Build a React Booking UI That Blocks Booked Dates

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

Build a Confirmation Dialog in React and Ant Design

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

How to Build a Stripe React Payment Form

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

Build a GraphQL Mutation to Save Bookings and Test Stripe

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

Module 25
Pro

Module 14 Introduction

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

INTRODUCTION

0:28 minutes

IaaS vs PaaS vs SaaS: An Intro to 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

A Step-by-Step Guide to Deploying a React App to 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

Module 26
Pro

Module 15 Introduction

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

INTRODUCTION

0:51 minutes

Build a Custom 404 Not Found Page With React Router

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

How to Customize Apollo Client Caching and Fetch Policy

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

LESSON

16:32 minutes

Automatically Scroll to Top of Page With React useLayoutEffect

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

How to Customize 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

How to Use the Stripe Deauthorize Function in React

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

How to Optimize a React Date Picker

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

Module 27
Pro

Part Two Conclusion

Conclusion of Part II of the course.

INTRODUCTION

0:40 minutes

Module 28
Pro

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: Pros and Cons for Building a Web App

In this lesson, we compare SQL and NoSQL databases.

LESSON

5:06 minutes

How to Start Using PostgreSQL and Migrate From MongoDB

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

LESSON

6:04 minutes

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

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

How to Migrate a React App From MongoDB to PostgreSQL

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

LESSON

33:09 minutes

Module 29
Pro

Module 18 Introduction

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

INTRODUCTION

3:38 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

An Intro to Pushing Code to GitHub and Creating Pull Requests

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

Module 30
Pro

Google Maps Node Package Update

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

LESSON