/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

TinyHouse Welcome

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

Environment Setup

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?

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

Running JavaScript with Node

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

LESSON

2:58 minutes

Creating a minimal Node:Express Server

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

Automatic Reloading Using Nodemon

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

Introducing TypeScript

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

Adding TypeScript to our Server

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

Compiling our TypeScript project

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

Linting 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

Introducing mock listings

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

Creating GET and POST Express routes

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

Comparing Github's REST and GraphQL 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

GraphQL Concepts

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

Installing Apollo Server and GraphQL

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

LESSON

2:05 minutes

Creating a GraphQL Schema with the GraphQL JS Library

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

Querying and mutating listings data with GraphQL

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

Using the 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

Introduction to MongoDB

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

LESSON

3:44 minutes

Setting up a new MongoDB Cluster with 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

Connecting the server with MongoDB

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

TypeScript Generics and adding types to our Collections

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

Setting Up Env Variables

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

Seeding mock data to the 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

Processing Data from MongoDB

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

Modularizing 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

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

LESSON

6:58 minutes

Create React App

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

Create React App - The Rundown

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

The Listings Component

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

LESSON

3:46 minutes

Props & TypeScript

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

LESSON

3:26 minutes

Functional Components & 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

Querying Listings

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

Abstracting the type of data from server fetch

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

Deleting a listing

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

React Hooks

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

The 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

The 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

Custom 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

Custom useQuery and refetch

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

LESSON

6:57 minutes

Custom useQuery and loading/error states

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

Custom 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

The useReducer Hook

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

Creating our Apollo Client

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

React 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

Autogenerated 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

UI Frameworks and 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

Styling with Ant Design

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

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

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

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

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

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

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