Syllabus

[00:00 - 00:12] Welcome, in this lesson we'll be going through the course syllabus and getting a better overview of what the course contains. This syllabus document should be available to you from the course material we 've provided.

[00:13 - 00:31] To begin, this is New Line's first master class, Tiny House. Tiny House is a structured, self-paced online learning course designed to help you build a universal JavaScript application or in other words an application where JavaScript is run both on the server and on the client.

[00:32 - 00:51] In this course we'll be working with a variety of different technologies such as React, GraphQL and TypeScript to learn how we can build a real home sharing app, including authentication, data persistence, payments and even deployment. Here are some of the technologies we use in the course.

[00:52 - 01:03] We use React extensively to build dynamic client UI. We also take a deep dive and use React hooks to manage all component logic.

[01:04 - 01:21] We create a web server with Node and Express to serve our GraphQL API and handle API requests by querying and manipulating data from a MongoDB database. We build a robust GraphQL API within the Node environment.

[01:22 - 01:45] We first highlight the benefits of GraphQL over traditional REST APIs before using and implementing the GraphQL JavaScript library, the GraphQL schema language, Graph QL scalar types, resolvers and a lot more. With the help of the Apollo platform we build a well-documented production ready GraphQL API with the Apollo server package.

[01:46 - 02:07] We utilize React Apollo, or data to say the Apollo client's utility to have our React client request and cache data from the API and update the user interface. We construct a MongoDB cluster and database with the database as a service MongoDB Atlas.

[02:08 - 02:22] All querying and manipulation of data is done with the official Node Mongo driver. TypeScript is used extensively both on the client and the server to build a robust and type safe application.

[02:23 - 02:44] We learn how to configure a project's TypeScript compiler, use basic and advanced types, use the definitely typed repository and see how TypeScript can be used within a JSX environment. We leverage the and design React UI framework to help build presentable and beautiful React components.

[02:45 - 02:56] The tiny house course is broken down to two parts. In part one, we take an introductory approach to introduce all the different tools we'll need to build the tiny house application.

[02:57 - 03:32] We'll build our server with Node and Express, introduce and use TypeScript, set up a GraphQL API with a Apollo server, persist data with MongoDB, create a React project with Create React app, introduce and use React hooks, use the Apollo client's utility to make GraphQL requests from our React client, and finally use the and design UI framework to help style our client application. By the end of part one, we'll have a React client app present a list of listings where the data is to live in a MongoDB collection.

[03:33 - 03:48] Our Node server will set up a GraphQL API where our client application will be able to query for these listings or trigger a mutation to delete a certain listing. And this will look something like the following.

[03:49 - 04:20] Part one of the course contains over 65 screencast videos, which is over 7 hours of recorded material, detailed manuscript and code for every single screencast lesson, over 110 multiple choice quiz questions, in-depth challenge projects, and 8 or more PDF cheat sheets. In part two, we take everything we've learned from part one of the course and focus our efforts on building the tiny house home sharing application.

[04:21 - 04:55] We'll establish client side routing with React Router, handle authentication with Google Sign-In and OAuth 2.0, permit persistent login sessions with cookies and session storage, handle payments with Stripe, enable location searching with Google's Geocode API, handle image uploads with Cloudinary and deploy with Heroku. By the end of part two, we'll have a fully functioning home sharing application where users will be able to sign in, create a listing and even book other listings.

[04:56 - 05:08] At this moment in time, part two is currently being prepared and is expected to launch in the winter of 2020. We'll introduce more information here when we reach closer to completing the course.

[05:09 - 05:28] There are some minor differences between how part one and part two of the course is structured. In part one, we spend as much time as possible introducing and using the technologies needed to persist data, create a GraphQL API, have our client interact with that API.

[05:29 - 05:49] Since our focus is on the patterns and methods we take to get this integration, we don't spend a significant amount of time building a large amount of markup in our client application, which is why we focus on building a single, simple webpage. In part two of the course, we take a slightly more advanced approach to build the tiny house application.

[05:50 - 06:11] We won't reintroduce the topics we've learned from part one, but instead spend our focus on using all the different third party libraries and tools we'll need, like Google Sign-In, Google's Geocode API, Stripe, etc. We'll also spend a significant effort scaling our GraphQL API and React application.

[06:12 - 06:35] Now an important note to be made, markup, or data to say HTML, and CSS styling isn't a primary lesson of this course. In part two, we'll provide all the custom CSS we'll need from the beginning, and we'll move a little quickly in areas where we spend our time creating the HTML or data to say the JSX markup.

[06:36 - 06:45] We'll reaffirm this point when we begin with part two of the course. What prerequisites do we need to have before we undergo this course?

[06:46 - 07:08] Students should have an understanding of HTML, CSS, and JavaScript, though you may still be able to manage the course not knowing these, this will make things a little difficult. Ideally, prior development experience working with a newer front-end technology like React, an understanding get an NPM is preferable, but isn't a big restriction.

[07:09 - 07:24] Knowing these topics here will help, but they're not fully necessary to work with this course. We do spend as much time as we can to ensure that we introduce and explain the main core technologies we intend to use before we use them like React.

[07:25 - 07:38] All course material is presented in the English language, so students are assumed to understand spoken and written English. Let's now spend a little time addressing the main course material.

[07:39 - 07:50] Each part of the Tinyhouse Masterclass is broken down to modules that each govern a section of the course that is to be addressed and learned. Course material contains the following.

[07:51 - 08:16] Screencast videos, manuscript, code samples, quiz questions, project challenges , cheat sheets, and lecture slides. For every lesson students are expected to proceed through the screencast video, survey the lesson manuscript, run code samples, and answer the lesson quiz questions to reinforce specific lesson topics.

[08:17 - 08:41] The screencast videos are the backbone of the course where every single lesson of the course contains a clear recorded screencast video, where practically every line of code is explained and shown for you to follow along. We recognize that when following along screencast videos, especially with coding screencast videos, one may be interested in seeing a written representation of what is covered.

[08:42 - 08:55] This is why we've spent a decent amount of time providing a detailed and documented manuscript for every screencast lesson. We've taken this a step further as well and we embed irrelevance code examples as we proceed through the lesson.

[08:56 - 09:10] If interested you can treat the manuscript with all the code samples as a new line book of its own. Apart from having the code samples shown in the manuscript, you'll have access to all course code as a downloadable asset.

[09:11 - 09:26] Not only do we share the code examples for the entire finished application, we share the prepared code for every lesson when the lesson is made complete. The screencast videos written manuscript and project code are the core course material.

[09:27 - 09:36] We've also prepared supplementary learning material to help cement important learning topics. The first being multiple choice quiz questions.

[09:37 - 09:53] We've prepared multiple choice questions for a large number of lessons and are available as downloadable PDFs alongside their answers. The multiple choice questions focus on asking direct questions that are intended to reaffirm important patterns and concepts.

[09:54 - 10:08] At separate points in the course we also share larger scale project challenges. These project challenges provide a set of requirements for what we expect can be built and are intended to be more open-ended with how solutions can be made.

[10:09 - 10:26] The project challenges are a great opportunity for you to dive in and build a new functionality that isn't part of the core project code we share. Throughout the course we've also prepared a series of cheat sheets for the topics and patterns we found are important to recognize and remember.

[10:27 - 10:41] These cheat sheets will also be available as downloadable assets. Last but not least at separate moments in the course, when we introduce new technologies like Node or React, we do so by explaining material through lecture slides.

[10:42 - 10:57] We also provide these lecture slides to you as well. In another video titled "How to go through the course" we'll display how each of the course material we've described is available to you and how you can use them to go through the course.

[10:58 - 11:11] We've structured this course to be more than just screencast videos by providing a variety of different course material to help you in your learning journey. This course is structured for you to proceed at your own time.

[11:12 - 11:25] We understand everyone has their own schedule which is why we've provided all the material for the course the moment you've enrolled. Feel free to venture through the material as fast as possible or take your time .

[11:26 - 11:40] Feel stuck somewhere or need guidance on a certain topic? You're always welcome to hop onto the tiny house channel in our Discord organization, where you will be able to find help from others undertaking the course and even help others as well.

[11:41 - 12:00] We, that is to state the instructors, will also be in the channel and will be keeping our eyes on it pretty frequently. While we've made every effort to be clear, precise and accurate, you may find out when you're writing your code you might find it in accuracy in how we describe something or feel a concept can be made more clear.

[12:01 - 12:12] If so, email us at [email protected] or let us know through the Discord channel. Similarly, if you found a bug in our code, we definitely want to hear about it.

[12:13 - 12:23] This course is something we'll continue to work on for a very long time by refining things, adding more material, etc. So we'll always be listening for feedback.

[12:24 - 12:36] We'll now spend a little more time walking through the material that is to be taught in the course. In part one, we introduce and learn all the patterns and concepts we'll need to build the tiny house application.

[12:37 - 12:52] We'll focus our efforts to build a simple page that surfaces a list of rental listings, kept in a MongoDB database and is available to us through a GraphQL API. We begin with module one, which involves getting started with our node server.

[12:53 - 13:07] 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. We'll learn how to set up a Node web server with the help of the express framework.

[13:08 - 13:12] We'll learn what Node is. We'll run some JavaScript with Node.

[13:13 - 13:19] We'll create a minimal Node express server. We'll enable automatic reloading with NodeMon.

[13:20 - 13:23] We'll introduce TypeScript. We'll add TypeScript to our server.

[13:24 - 13:28] We'll compile our TypeScript project. We'll link our code with ESLint.

[13:29 - 13:42] We'll introduce mock listings and we'll create get and post express routes. In module two, we'll introduce GraphQL and compare how GraphQL is different from REST APIs.

[13:43 - 13:53] We'll learn what GraphQL is. We'll compare GitHub's public REST and GraphQL APIs and we'll learn some of the core concepts of GraphQL.

[13:54 - 14:03] Module three will use Apollo server as the tool to build our GraphQL API. We'll install Apollo server and the GraphQL JS library.

[14:04 - 14:12] We'll create a GraphQL schema with the GraphQL JS library. We'll query and mutate mock listings data with GraphQL.

[14:13 - 14:27] And we'll see how we can recreate the schema with the GraphQL schema language. Module four will move away from handling mock data and use MongoDB to store any data we want in our application.

[14:28 - 14:38] We'll learn what MongoDB is and how non-relational databases work. We'll set up a new MongoDB cluster with MongoDB Atlas, a database as a service.

[14:39 - 14:49] We'll connect the Node server with MongoDB with the official Node Mongo driver. We'll learn how TypeScript generics can help add types to our database collections.

[14:50 - 14:58] We'll set up environment variables. We'll seed mock data to the database and we'll modularize our GraphQL resolvers .

[14:59 - 15:09] Module five is where we move away from working with the server and begin building the client application for part one of the course. And it's where we get started with React.

[15:10 - 15:19] We learn important React concepts. We use the create React app command line to scaffold a new webpack bundled React application.

[15:20 - 15:36] And we walk through the files and folder structure of a create React app scaff olded project. Module six is where we start to have our React client application begin to make API requests to our server through GraphQL.

[15:37 - 16:14] We'll create a functional listings component, investigate how we can type check for a props in a component, investigate how we can define the type of a functional component in React, we'll create a post request to query the listings information from our GraphQL API, we'll abstract the type of data being returned with the help of TypeScript generics, and we'll have the client be able to trigger the mutation to delete a listing. Module seven is where we introduce and take a deep dive into React hooks and how we can leverage them to make our GraphQL requests.

[16:15 - 16:23] We'll introduce and understand how React hooks work. We'll use the use state hook to track state in our component.

[16:24 - 16:37] We'll use the use effect hook to have our GraphQL query be made when our component's first renders. We'll create and use a custom use query hook to consolidate how components can execute GraphQL queries.

[16:38 - 16:47] We'll extrapolate the capability to refetch a query from the use query hook. We'll have loading and error information be returned from the use query hook.

[16:48 - 17:04] We'll create and use a custom use mutation hook to consolidate how components can execute GraphQL mutations. And we'll investigate and use React's use reducer hook to handle state and state changes in a more controlled manner.

[17:05 - 17:38] Although the custom hooks we've created in Module seven would work well when it comes to interacting with our GraphQL API, in Module eight we'll move towards using React Apollo or the Apollo client utility for a more declative and intelligent way to actually conduct GraphQL requests from a React application. We'll create our Apollo client, we'll utilize and use React Apollo's hooks to conduct our GraphQL requests and we'll auto generate TypeScript definitions with the Apollo command line interface.

[17:39 - 18:02] And the last module of part one is where we style our client application with the UI framework known as ant design. We'll first discuss how certain UI CSS frameworks work and we introduce the ant design UI framework and we'll utilize components from the ant design framework to style our client application.

[18:03 - 18:24] In part two, we take everything we learn from part one and focus our efforts on building the actual tiny house home sharing application. The very first module of part two will take the code bundle we've prepared in part one and will modify what we've done to then prepare us and set up for part two.

[18:25 - 18:41] In Module two, we'll then introduce the concept of routing and how we want to actually conduct routing within the tiny house application. We'll establish the page level components of our app and the different URL routes for where these components should show.

[18:42 - 18:51] We'll address what routing is within the context of a web application. We'll spend a little time addressing the difference between server side and client side routing.

[18:52 - 19:05] We'll install and introduce react router in our client application and in this module finally, we'll set up some of the main routes and corresponding components we 'll have in tiny house. In module three, we'll set up our database.

[19:06 - 19:19] We'll spend time constructing the shape of documents we want to store for the different collections we'll establish in part two. We'll have three collections in total for part two, a user's collection, a listings collection, and a bookings collection.

[19:20 - 19:34] We'll declare the three collections we want to create with TypeScript. We'll help describe the shape of documents we intend to store for each of these collections and we'll seed the collections in our database with mock data that we've prepared and we'll provide to you.

[19:35 - 19:50] In module four, we'll look into user authentication with Google Sign-In and O Auth 2.0. OAuth is an industry standard protocol that enables applications to gain limited access to user accounts that have been created on different platforms.

[19:51 - 20:03] If you've ever signed into an application with your Google account, Facebook account, Twitter, etc., that sign-in process was most likely made capable with OAuth. In this module, we'll explain what OAuth 2.0 is.

[20:04 - 20:11] We'll create OAuth credentials for Google Sign-In. We'll update our GraphQL API to allow a user to sign in with a Google account.

[20:12 - 20:36] We'll construct the UI of the login page of our client project, we'll execute the login and logout mutations that we'll create from the client, and we'll build the app header of our UI to convey to a user when they're in the logged-in state. In module five, we'll build from the previous module and discuss how we can persist login sessions with cookies.

[20:37 - 21:03] We'll talk about persistent login sessions and cookies, we'll compare local storage, session storage, and cookies within the context of a browser, we'll utilize a cookie on our client to persist login state, and we'll discuss and see how we can also help avoid cross-site request forgery attacks. Module six of part two is when we start to build the different pages of our application.

[21:04 - 21:20] We'll first begin by building the user page, which is the page of our tiny house app where we display information of a certain user and show the listings the user hosts. And in addition, when a user views the own user page, they'll be able to see a history of the booking information they've made.

[21:21 - 21:35] In this module, we'll create the GraphQL field in our API to query information for a certain user from the user's collection. We'll build the GraphQL resolver functions to resolve the data for the certain fields who want to be returned for a single user.

[21:36 - 21:49] We'll discuss the difference between offset and cursor-based pagination, and we 'll implement offset-based pagination for a few fields in our user GraphQL object. Finally, we'll build the UI of the user page in our client.

[21:50 - 22:03] Module seven follows a very similar process where we build the listing page. The listing page is where a user can see details about a certain listing and where the user will eventually be able to book that listing for a period of time.

[22:04 - 22:16] Here is where we'll update our GraphQL API to query information for a specific listing from our database and where we build the UI of the listing page in our client. In module eight, we'll build the home page.

[22:17 - 22:33] We'll continue from what we've done in the previous modules, but now we'll allow the client to query for a list of listings from the server. For this module, we'll do this to show the four highest-priced listings, or that is to say the premium listings in the home page of our app.

[22:34 - 22:47] We'll update our API to allow the request of data from multiple listings at a time. We'll build the UI for our home page, and finally, we'll see how we can apply a filter to our API request to fetch only the highest-priced listings.

[22:48 - 23:02] In module nine, we'll discuss and see how we can search for listings in our app with Google's Geocoding API. Geocoding is the process of converting address information in the form of text into specific geographic coordinates.

[23:03 - 23:49] We're going to leverage the capability to Geocode address information to help allow users to search for listings in certain locations, and we'll do this with the help of Google's Geocoding API. We'll discuss how Google's Geocoding API works as well as retrieve the necessary API keys, we'll interact with the Geocoding API in our server to resolve the address location inputs provided by a user, and the client will navigate a user to the listings page when a location search is ever made from the home page or the app header, and in the listings page, we'll query for listings in a specific location with the help of the Geoc oding API, and lastly, we'll create an index for our listings collection to support efficient location-based queries.

[23:50 - 24:36] In Module 10 of Part 2 is where we introduce Stripe as the third-party payment processor that would essentially allow our application to handle payments between tenants and hosts. We'll discuss Stripe and the Stripe Connect product for marketplaces, we'll discuss how we'll facilitate signing with Stripe with OAuth 2.0, so users that are to receive payments in our app can sign in with their Stripe accounts, we'll establish the GraphQL fields for Stripe authentication, we'll interact with the Stripe API and build the accompanying Resolver functions, we'll update the user profile section of a logged-in user and the user page to allow a user to connect and disconnect with Stripe from our application.

[24:37 - 25:16] In Module 11, we'll focus on allowing users to host their own listings on the TinyHouse platform, we'll introduce the host listing GraphQL mutation, we'll build the host listing Resolver function that is to receive the appropriate inputs and update the correct collections in our database, and on the client we'll build the form in the host page and we 'll trigger the appropriate mutation where the host form is completed and submitted by the user. In Module 12 for Part 2 of the course, we'll discuss Cloudinary and see how we can have a better way to store images of listings in our app.

[25:17 - 25:34] In the Module before this, we'll allow a user to host a listing and when it comes to having the image for the listing be sent from the client to the server, the server will receive the image and store it in the database as a base64 encoded string. Storing images this way takes a lot of space in our database.

[25:35 - 25:56] In this module, we'll discuss the existing approach we have and then we'll see how we can leverage Cloudinary, a cloud-based image and video management service to store images for new listings on the cloud. In Module 13, we'll focus on the last big feature of our application, TinyHouse , and that is to allow users to book listings from other users.

[25:57 - 26:17] We'll create and build the necessary Create Booking GraphQL mutation, we'll address that when a booking is created, how the Bookings index of a listing is to be updated , which is essentially the index that reflects the bookings that have been made for the listing. We'll see how we can disable dates that have already been booked in the Date Picker Elements of the listing page.

[26:18 - 26:46] We'll show how we can surface a confirmation model that summarizes the amount to be paid when a user is just about ready to book a listing. We'll see how we can use components from the React Stripe Elements library to safely capture debits or credit card information, and finally when the user triggers the Create Booking mutation and wants to make the booking, we'll verify the payment was made and all the expected updates in our application have been made accordingly.

[26:47 - 27:06] In Module 15, we'll see how we can now deploy our application with Heroku. We'll talk about cloud computing and the difference between platform as a service, infrastructure as a service and software as a service solutions, and we'll leverage Heroku to have our application be deployed.

[27:07 - 27:45] We'll have one other spinoff module in Part 2 labeled the Bonus Module, and at this module we'll basically prepare a few separate lessons on topics we consider good to know and/or important that don't necessarily have to fall into the grand scheme of the actual tinyhouse application, and we'll be updating this particular module as time goes by, and at this very moment we'll build the UI of the not found page of our client which is something we've omitted within the modules above. We'll discuss Apollo Client and the fetch policy process and how it works with the Apollo cache.

[27:46 - 28:00] We'll see the use layout effect hook from React and why it's appropriate when it comes to doing window scrolling within our application. We'll see how React Router now has introduced hooks that can be used.

[28:01 - 28:19] We'll discuss the Stripe Disconnect process that we already have, and we can see how we can also revoke access for users from our Stripe Connect dashboard when they 've disconnected, and we have some additional listing date picker changes. This is now a high level overview.

[28:20 - 28:34] As you begin with part 1 of the course and/or part 2 we're going to be reiter ating a lot of the things we've mentioned here and talk about each of the specific things we want to tackle as we begin every module and every specific lesson.